Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

faint.jpg


名称 Faint
カラム数 2
プラグイン対応 ○(サイドバー集約型)
レスポンシブ対応
サイドバー 右横からスライド
記事幅 可変 最大900px (内寸 840px)
サイドバー幅 PC --- 350px (内寸 290px)
スマホ --- デバイス幅 - 64px
最大 350px (内寸 290px)
ヘッダー PC --- 左 横250px (内寸 180px)
スマホ --- 上
Browser SupportIn principle, current and previous version

Chrome

Firefox

Safari

Opera

Edge

IE11

License
Required 必須事項
・Designer Note and Backlink 製作者表記と当ブログへのリンク (Designed by)
Permitted 許可事項
・Modification 改変
・Personal Use 個人利用
・Commercial Use 商用利用
Forbidden 禁止事項
・Distribution 再配布
・Hold Liable 使用にあたっての損害・損失に対する責の一切を負いません
推奨カスタム 色変更


valid-html5.png



更新履歴 2017.1.25


・ SNSシェアリンクのUTF-8エンコード

参考記事
SNSシェアリンクのエンコード


--------- 以下本文



更新履歴 2016.10.13


メンテナンス
・ FC2新変数導入に於ける関連JSの削除(html内容の切り替え) --- 動作が若干軽快になりました
・ 全体レイアウトの見直し
・ 関連記事サムネイルの整形
・ ベンダープレフィックスの整理
・その他微調整

html内容が大きく変わっています
トップページの見た目に変化はほとんどありませんが
個別記事のコメント投稿フォーム等が若干変わっています


更新履歴 2016.1.10


メンテナンスを行いました
詳細は以下の記事をご参照ください

Faintメンテナンスのお知らせ


更新履歴 2016.1.8


フッター構造を変更しました
コンテンツ縦幅が短い時フッターが上に上がる件を修正しました
タイトルタグを微調整しました(SEO対策)


更新履歴 2015.12.4


Google feed api 廃止に伴う新着サムネイル仕様変更

Google自体がこちらのAPIを排除してしまいましたので
この日付以前にDL頂きました方については新着サムネイルが反映されません
お手数ですが再DLをお願い致します


更新履歴 2015.10.16


不承認でしたので修正して再申請中です
承認されました ありがとうございます
不承認理由は以下の通り
Faintテンプレ不承認の件


修正に伴い カスタマイズの訳注を追加しました Ctrl+Fキー検索

  top: 27px; /* 注)FC2検索バー非表示の方はここの数字を0に変更してください */


デフォルトのままでFC2検索バーを非表示にするとこうなってしまいます ↓

sample


お手数おかけします よろしくお願いします(またリジェクトだったりして)


...... と思ったけど やっぱこんなのあかんわ (´・ω・`)
みんながみんなここを覗いてくれるとは限らない
JSで処理します 上の無し 今の無し 忘れてください(笑)

* 自動で処理されます


---------- 以下本文


2015.10.14 申請致しました

ふぇいんと (((ง'ω')و三 ง'ω')ڡ≡シュッシュ ( ←こういう意味ではありません)


TOP PAGE DEMO
ARTICLE DEMO
DOWNLOAD
FAQ




仕様
・画像縦長レイアウト
・メイソンリー 及び グリッド
・ヘッダー左固定
・サイドバー右からスライド
・ヘッダーにはお好きなリンクを設置してください
・imgに class="shadow-attachment" 追加で画像にドロップシャドウがつきます


お受けできないご質問・ご相談(申し訳ございません 自己責任・自己努力でお願いします)
・サイドバーの形状変更(スライド→下へ流す など)
・トップページの表示タイプ変更(全文表示へ変更 など)
・レスポンシブを固定幅化
・カラム数やサイドバー位置変更



カスタマイズのナビゲーション


今回もみなさんがカスタマイズしそうな箇所に訳注を付けてあります
Ctrl+Fキー検索

注)

で出てきますのでご確認ください



Internet Explorer 8以下について


このテンプレートからIE8以下のレガシーブラウザを完全にバッサリ切ってしまいました (´・ω・`)
IE8以下用の記述は全て削除しておりますので
まだまだIE8利用者向けの表示が必要だという方は他のテンプレートをお選びください
または 閲覧者サイドにブラウザのグレードアップを促されます方は 下記のリンク先をご参照ください

GirlOnWire



サイドバーのプラグインについて


サイドバーはスライドタイプです
パソコンの横サイズよりもスマホ横サイズを小さく設定しています
プラグインの横幅指定ですが 可能な方は

width: 100%;
max-width: 任意の数値px;

の指定をお願いします
横幅指定がpxによる具体的数値になっている場合には width: 100%; を追加
そして width の前に max- を追加して頂く という形です
どうしてもpx指定が必要な方は 最大196pxの指定でお願いします(iPhone5Sの画面幅までをサポート)
サイドバーからプラグインがはみ出ないようにするための処理でございます
196px 随分と小さいです できれば width: 100%; で (ノ゚ェ゚)



ヘッダーのリンクについて


ヘッダーは左側に固定してあります ブラウザ縮小・スマホ・タブレット閲覧時には上に移動します
リンク設定の仕方 Ctrl+Fキー検索

<!-- 注)リンク設定ワンセット -->

このすぐ左横にある文字列でリンクワンセット分です

<li><a href="ここにリンク先アドレス" class="underline-from-left">ここに表示テキスト</a>

About me や Site info などの個別記事に飛ばすなり
別サイトに飛ばすなり 特定のカテゴリに飛ばすなり ご自由に設定をどうぞ
赤字以外の部分は変更されませんようお願いします



メイソンリー及びグリッド の意味


メイソンリー = サイズ違いをタイル状に並べる
グリッド = 同サイズのものを方眼状に並べる

という区分があるわけですが(いずれも「グリッド」ですけれども細分化すると という意味です)
毎回記事に確実に画像を入れている(サムネイルが取得できる状態にある (後述)) 方はグリッドに
画像なしの記事もあるよ という方はメイソンリーになります
メイソンリーのおもしろさはそれぞれサイズが違う というところにありますので
今回はこれで (`・ω・́)ゝ

* サムネイルが取得できる状態 = 「本文の編集」に「FC2にアップロードした」画像を貼り付けている



フォントについて


英字にはwebフォントを利用しております(Google Fonts)
記事内でもアルファベットはちょっと丸っこい可愛らしい文字になるように設定してしますが
それが煩わしい方は以下の箇所で設定を変更してください
Ctrl+Fキー検索

.inner-contents {
  margin-bottom: 20px;
}

こちらにfont指定を追加します 以下の通り

.inner-contents {
  margin-bottom: 20px;
  font-family: メイリオ, Meiryo, 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', sans-serif, '游ゴシック', 'Yu Gothic';
}

別にこの指定じゃなくても良いですよ お好きなものをどうぞ
Windowsをご利用の方はちょっと気になるかもしんない (´・ω・`)
恐らく Macの方は気にならない とっても綺麗
これはもう仕方がないですよねー
Microsoftはアンチエイリアス(縁をぼかして滑らかにする) に否定的 ( ˙³˙)




ご質問 不備・不具合のご報告はお気軽にどうぞ
その際には
・ ご自身のブログアドレスの明記
・ 該当テンプレートを設定状態に
・ 右クリック禁止の解除
上記3点を必ずお守りください
お守り頂けない場合にはお答え致しませんので 自己解決でお願いします


みなさんいつもありがとうございます! ٩( 'ω' )و
関連記事

Comments 21

There are no comments yet.
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/14 (Wed) 11:40 | EDIT | REPLY |   
Akira  
To フッターの件 内緒さん

ありがとうございますe-257

>下の文字が変な表示〜

というのは、今お使い頂いているAnotherDay_zureテンプレの「フッターが上に上がってくる」
という意味でお間違いないでしょうか。

この原因なのですが、サイドバーにフラッシュで小鳥が飛ぶプラグインを入れてらっしゃいますよね。
こちらはたぶんですが、Internet Explorerの比較的古いバージョンを基準に作成されたものだと思います。
(absolute という配置の仕方を行っている点から推察)
で、これ恐らくHTML5のレスポンシブで作成されているテンプレートのほとんどでこういう表示になってしまうと思います。
(他製作者様のレスポンシブテンプレでご確認ください)

専門的になりますのでかいつまんでの説明になりますが、小鳥のフラッシュが
フッターを含めた全体コンテンツの下に割り込ませるタイプのJSが組んであるようです。
レスポンシブデザインでフッター位置を操作されてしまうとレスポンシブとしてはもう成り立たなくなってしまいます (´・ω・`)
ですので私のテンプレ側のみでの処置というのはほぼ不可能です。
そしてプラグインのソース内容を私が変更するわけにはまいりませんので、プラグイン製作者様にご相談頂くしか。
固定幅のテンプレートならば上手く表示されえるものもまだあるのではないかと思います(HTML構造によります)。
あるいはIEならばOKかもしれません(IEはabsoluteの誤認識があります)

2カラムデザインというのはメインコンテンツの縦幅とサイドコンテンツ(サイドバー)の縦幅が異なりますよね。
メインコンテンツがサイドよりも短い場合、フッターが上に上がってくることがあるんですね。
それを上がらないように処理されているテンプレはこちらのプラグインとほぼ衝突すると思います(私のテンプレも含みます)
お役に立てず申し訳ございません (*_ _)

* 無作為に他製作者様の作品で検証しましたが、やはり概ねデザインが狂ってしまうようです。
(chrome, Ironで確認
同じchromiumベースブラウザですが chromeでの崩れとIronでの崩れ方が違うことも確認しました(笑))

2015/10/14 (Wed) 14:28 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/15 (Thu) 20:19 | EDIT | REPLY |   
Akira  
To 文章の件 内緒さん

そうですー!
内緒さんのパソコンがおかしいわけでも、私の文章力がキテレツなわけでもございません(笑)
文章にも著作権がありますので、侵害しないようダミーテキストを利用しています。
英文・日本語文ともに並べ替えしておりますので変な文章なんです ^^;

2015/10/16 (Fri) 16:19 | EDIT | REPLY |   
tak  
トップの画像

こんにちは。

Be Happyテンプレート 愛用させて頂いております。

ところでトップページのトップ記事のアイコン?画像ですが、
画像と比べて画質が落ちて表示されているように思います。

対策法はありますか?

現在
.inner-image-wrapper:before {
padding-top: 70%;



.inner-image-wrapper:before {
padding-top: 60%;

としていますが、70%でも画像の画質がおちて表示されています。

10月17日のトップページ元画像

http://blog-imgs-83.fc2.com/s/g/o/sgourmet/P1210422.jpg



<img src="http://blog-imgs-83.fc2.com/s/g/o/sgourmet/P1210422.jpg" alt="おかず1" style="width: 0; height: auto;" />

を最初に挿入しています。

大変お忙しいとは存じますが何卒ご教授の程よろしくお願いいたします m(_ _)m

2015/10/17 (Sat) 12:13 | EDIT | REPLY |   
Akira  
To takさん

こんにちは。
いつもありがとうございますe-454

> サムネイルの画質が落ちる件

こちらまた長々と鬱陶しい説明になりますが、お付き合いください(笑)
理解して頂かないとまた同じ内容で頭を悩ませることになりますので、よろしくお願いします。

① 画像形式について

一般的にデジカメやスマホなどで写真を撮影した際の画像形式( = 拡張子) はJPGです。
JPG拡張子の画像の特徴 = 拡大しても縮小しても画質が劣化する
(拡・縮に強い、というか解像度が変わらない画像は「ベクター画像」といいまして、変換するには特殊なソフトを利用する必要があります。
そしてイラストには最適ですが 風景や人物などの「写真」には向きません。
また、ベクターでなくJPGと同じラスタ画像に分類されるPNG拡張子がありますが、
こちらは縮小には若干強いもののやはり拡大には弱いです。
そして画像容量が大変大きいので、表示負荷がかかります。)

② 縦横比について

.inner-image-wrapper:before {
padding-top: 60%;

このパーセンテージ指定は画像の縮小率とはなんの関係もありません。
これは画像が収まるボックスの縦横比を固定するために設けています。
横を100%とし、縦はその60%
という指定がこれです。
ですからここの数値を変更されますと、画像が収まるボックスの縦横比が変わるだけです
padding-top: 100% で完全な正方形になります。
あくまでも「形」「比率」であって、「表示サイズ」とは無関係です。

③ 長辺と短辺

画像には縦横比があります。
ボックスの縦横比を固定しましたが、画像の縦横比が狂ってはいけませんよね。
まずtakさんの画像の縦横比を計算してください。
比率はデジカメの種類、スマホの種類によって左右しますので、自身がお持ちの画像の比をまずご確認ください。
正方形以外の写真は必ず「長辺」と「短辺」が存在しますよね。
②の説明で、画像用のボックスの縦横比が固定されます、と書きました。
仮にそれが10:6(5:3)だとします。
そこへ収まる画像のサイズが1000px×500pxだとしますよね。
すると10:5ですから、縦が少し足りませんね。
その際にはJavascriptが画像の短辺を基準にして見切れが起こらないよう拡大をします。
すると今度は横がボックスよりも大きくなります(= はみ出します)。
はみ出した部分は「表示させない」
この流れを全てJSが担っています。
これを行わないと
・全ての画像サイズ(バラバラだと仮定します)を揃える
・縦横比を狂わせない
この二点で問題が出てきます。

-------------

一旦投稿しますね。

2015/10/17 (Sat) 15:53 | EDIT | REPLY |   
Akira  
To takさん

以下の質問に YES/ No でご自分の環境をご確認ください。

1.画像の横サイズをいつも揃えている (YES or NO?)
2.画像の縦サイズもいつも揃えている(つまり縦横全く同じで揃えている) (YES or NO?)

2がYESの場合は縦横比がどの画像も全く同じです。
ここまで大丈夫でしょうか。物理的法則のお話しです。
続けます。
仮にtakさんが1.2共にYESであった場合。
JS不要になりますよね。
ボックスのサイズを画像の縦横比と全く同じに揃えるだけで済みます。
すると長辺・短辺の都合での拡大は起こりませんので、劣化も起こりません。
ボックスと、ボックス内に収まる画像の縦横比に開きがあればあるほど、この「拡大率」が大きくなります。

JSを削除する場合には、さらに言えばボックス自体も不要です。
単なるimgとして掲載すれば良いです。
ただし1pxでも異なる画像だとトップページのサムネイルは揃わなくなります。

HTML構造、そしてCSSにも大幅な変更を加えることになりますので、その節には自己責任でのカスタマイズをお願いいたします。

takさんへのおすすめ ↓

ご自分の画像の縦横比を確認し、ボックスの縦横比をそれとほぼ同等になるように指定する。

2015/10/17 (Sat) 16:02 | EDIT | REPLY |   
Akira  
To takさん

takさんの場合は画像の「画質」「サイズ」に強いこだわりをお持ちですので、やはりレスポンシブではなくソリッド(固定幅)のテンプレートが向いているように思います。
メリット・デメリットは以前お伝えした通りです。
私は多少画像が劣化するとしても、誰もが画像の全体像を一目で捉えられる方が良い、と思います。
これはあくまでも私の感覚です。
デバイスの画面サイズによっては見切れが起こって全体像が見られないけれども、高画質である方が好ましい。
とお考えになる方ももちろんいらっしゃいます。
これは好みの問題ですので、ご自身で方向性をお決めになられると良いのかな と。

長い説明になりました。よろしくご査収くださいませ。

2015/10/17 (Sat) 16:10 | EDIT | REPLY |   
tak  
ありがとうございます。

Akiraさま

詳細なご説明を頂き、大変勉強になりました。
画像に関しても知らなかった事ばかりです。(PNGとJPEG,ベクターの違い)
お恥ずかしい限りです。

私の画像ですが、最近3:2のアスペクト比にしております。
以前は4:3のマイクロフォーサーズセンサーをフルにつかったものだったのですが、
新しく購入予定のカメラのセンサーがAPS-Cのため、3:2に変更しております。
実際は横1000px、縦667pxです。
また横が1000pxにするとマイクロフォーサーズの場合は縦が750pxとなり
ちょっと大き過ぎるという判断によるものでした。

>ボックスの縦横比をそれとほぼ同等になるように指定する。

はい、ご指導の通りにしてみます。

つまり2÷3=66.666・・・→67%にすれば劣化はある程度防げるということですね。

早速変更してみます。

いつもいつも貴重なご指導を賜り感謝しております。m(_ _)m

これで安心して新兵器(カメラ)を導入できます!(`・ω・´)ゞ


2015/10/19 (Mon) 21:54 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/10/19 (Mon) 22:00 | EDIT | REPLY |   
Akira  
To takさん

はい。一度お試しください。
新しいカメラ、楽しみですねe-257

2015/10/20 (Tue) 00:59 | EDIT | REPLY |   
Akira  
To 内緒さん

いえいえ。どうぞお気になさらず。
お気軽にどうぞe-454

2015/10/20 (Tue) 01:00 | EDIT | REPLY |   
長谷川  

お久しぶりです。graceを使わさせて頂いてる者です。
このfaintも気になっていますが再申請の方もリジェクトでしょうか?

2015/10/23 (Fri) 18:03 | EDIT | REPLY |   
Akira  
To 長谷川さん

ご無沙汰しておりますe-257

今確認しましたところ、リジェクトの旨の通知は届いておりません(笑)
①ある程度申請件数が積もってから処理するつもり
②業務の重要度としては最後方
③私のことが嫌い

このいずれかではないかとe-452

2015/10/24 (Sat) 02:18 | EDIT | REPLY |   
長谷川  
To Akiraさん

今見に行ったら承認されていました。
早速ダウンロードしました、ありがとうございました!
ですが・・Akiraさんのものはどれも使いたくなってしまうのが悩みです(笑)

2015/10/26 (Mon) 20:34 | EDIT | REPLY |   
Akira  
To 長谷川さん

ほんまやぁー (´・ω・`)
えー ( ̄∀ ̄;)
リジェクトされるのを前提、って言うとおかしいけど、そのつもりで出したところもあるんですよね。
えー ( ̄∀ ̄;)
タブレットはどうでもいいってことなんでしょうかね(独り言です)
いずれにしてもありがとうございますe-257

2015/10/26 (Mon) 22:04 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/12/30 (Wed) 01:28 | EDIT | REPLY |   
Akira  
To Faint 左サイドメニューの件etc. 内緒さん

ありがとうございます
嬉しいお言葉まで頂きました

> 左サイドメニュー(ヘッダー代用 以下ヘッダーと称す)に画像

Ctrl+Fキー検索(CSSソース内にあります)

#banner {
width: 250px;
height: 100%;
overflow-y: auto;
padding: 70px 35px 0; /* 注)ブログタイトルの上辺位置合わせは 70px の数値を変更 大きくすると下へ下がります */
/* 注)左サイドナビ背景画像不要の方ここから削除 */
background-image: url(http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/201509231033319e8.png),
url(http://blog-imgs-82.fc2.com/v/a/n/vanillaice000/20150923103852b7f.png);
background-position: left top,
right bottom;
background-repeat: no-repeat;
/* 注)左サイドナビ背景画像不要の方ここまで削除 */
background-color: rgb(237,242,249); /* サイドナビ背景色 */

position: fixed;
left: 0;
top: 0;
z-index: 50;
}

赤字部分を削除及び太字部分追加修正して以下の通り。

#banner {
width: 250px;
height: 100%;
overflow-y: auto;
padding: 70px 35px 0; /* 注)ブログタイトルの上辺位置合わせは 70px の数値を変更 大きくすると下へ下がります */
background-image: url(画像アドレス);
background-size: cover;

position: fixed;
left: 0;
top: 0;
z-index: 50;
}

背景修正作業は終了です。
ブラウザの上下左右幅を大きくしたり小さくしたり、よくよく確認してください。
一旦投稿します。

*内容を書き直しました。
まずこちらを試して頂こうと思いまして(笑)
別のやり方を書きましたがこれが一番簡単。
ただ、こちらのテンプレートは左ヘッダーの横幅が大変狭いので、もしかしたら思い通りの位置に表示できないかもしれません。
その場合には別のやり方を改めて記しますので、まずは一度こちらで確認してみてください。
特にタブレットをお持ちでしたらそちらでも目視確認をお願いします。
もちろんスマホも (´・ω・`)

思い通りの位置ではない、と思われましたら、ご利用になりたい画像のURLを教えて頂くか、
その画像の「どこに」表示したいメイン部分があるのかを把握しておいてください。
画像内の右下なのか、ど真ん中なのか、左上なのか、といった具合。
上記の記述で上手く行ったのであればこの件は不要ですー。

2015/12/30 (Wed) 02:29 | EDIT | REPLY |   
Akira  
To Faint 左サイドメニューの件etc. 内緒さん②

> 左ヘッダーとメインコンテンツを離したい件

Ctrl+Fキー検索。

#main {
margin: 0 auto;
width: 100%;
padding-left: 250px;
}

赤字部分の数字を増やして頂くと離れます。
あまり数字を大きくしすぎると記事の幅が細くなってしまいますので、見た目を確認しながらどうぞ。

ご不明点・わかりにくい点がございましたらお気軽にどうぞ (●'ω')ノ

2015/12/30 (Wed) 02:40 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2015/12/30 (Wed) 20:31 | EDIT | REPLY |   
Akira  
To Faint→Romantiqueの件 内緒さん

了解しましたー。
こちらは一旦締め、という形でよろしいでしょうか。
別途ご質問の方拝見しますね。

2015/12/31 (Thu) 00:35 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い