FC2ブログのサムネイル関連の充実に伴って、若干混乱もあり ^^;
テンプレートのデフォルト設定と絡めた記事内容です。
サムネイル あるいは サムネイル画像 とは
サムネイルとは…
サムネイル（英語：thumbnail、サムネールとも表記される）とは、画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。親指（thumb）の爪（nail）のように小さく簡潔であるという意味から来ている。
Wikipedia
視認範囲の限られるカタログや画面表示上、もしくはデータ量の限られるネットワーク上の画像情報の伝達において用いられることが多い。
一覧表示に特化した小さめ画像、と思えば大体合ってます。
FC2ブログでサムネイルを表示させる変数
サムネイル取得条件
・ 「本文」内一番最初の画像 (追記内の画像は対象外)
・ FC2投稿画面(エディター)のモバイル絵文字は対象外
・ クラス名 emoji のついた画像は対象外
・ ファイル名に 半角カッコ が付いているものは対象外
・ 外部直リンク画像 (外部サーバー画像)は対象外
上記取得条件を踏まえた上で
| 通常サムネイル | ||
|---|---|---|
| 変数 | 用途 | 備考 |
| 記事内の画像をサムネイル画像として表示 (大) | 横 300px 縦 200px 寸が足りない場合は黒背景で補填 GIF動画は静止画に変換 |
|
記事内の画像をサムネイル画像として表示 (小) | 横 72px 縦 72px 主にスマホ用 寸足らずはよほど起こらず、中心部を切り出し GIF動画は静止画に変換 |
|
元画像をそのまま表示 | 厳密にはサムネイルではない 画像縱橫は元画像に依存 GIF動画の静止画変換は無し 非公開変数扱いか？ |
| 新着記事用サムネイル | ||
|---|---|---|
| 変数 | 用途 | 備考 |
|
記事内の画像をサムネイル画像として表示 (大) | 横 300px 縦 200px 寸が足りない場合は黒背景で補填 GIF動画は静止画に変換 |
|
記事内の画像をサムネイル画像として表示 (小) | 横 72px 縦 72px 主にスマホ用 寸足らずはよほど起こらず、中心部を切り出し GIF動画は静止画に変換 |
|
元画像のURLを取得 | 厳密にはサムネイルではない 画像縱橫は元画像に依存 GIF動画の静止画変換は無し |
| 関連記事用サムネイル | ||
|---|---|---|
| 変数 | 用途 | 備考 |
|
記事内の画像をサムネイル画像としてURL取得 | 横 144px 縦 144px 寸足らずはよほど起こらず、中心部を切り出し GIF動画は静止画に変換 |
なんでこんな仕様にしたやら (´・ω・｀)
関連記事だけ特殊。
ブログ個人設定で「テンプレート変数のみ」に切り替えたりそうでなかったり、な使い方だからでしょうかね (´・ω・｀)
あとは「関連記事サムネイル」のプラグイン。
こちらには
<!--recent_image_72_with_alt-->
という変数が使われていますが、
後ろの with_alt が「オルト属性を付ける」ことを意味しているんだと思います。
しかし実際には付いてない (No image用のユニコーンだけ付いてる)
って、ぅオイ！何がしたかった （￣∀￣；）
それじゃ意味ないじゃんかー。
しかも形が %なんだしゃんではなく、エリア変数と言われる形式のもの。
えー。わけわかんね 
alt属性抜けによるバリデートエラーが嫌な場合はプラグインを利用せず「テンプレート変数のみ」でhtmlに直接書かないとダメですねぇこれは (´・ω・｀)
そのために「サムネイル画像を表示」ではなく「URLを取得」になっているんでしょうね。
「サムネイル画像を表示」の方は問答無用で出来上がりのimg要素として確定してしまいますが、「URL取得」ならばかなり融通が効きます。
従ってこうすればバリデートクリア ↓
<img src="<%topentry_relate_thumbnail>" alt="">
白字が自動出力部分、緑字が手打ちする部分。
素直にプラグイン利用を勧めた方が良いのか、テンプレにデフォルトで書き込んで「テンプレート変数のみ」に切り替えて
もらう方が良いのか悩みどころ。
(既存テンプレで直書きしているものはいまのところありません)
GIF動画が静止画に変換されちゃう！
を避けたい方は元画像依存の変数一択です。
ただし表示負荷も元画像依存ですので、サムネイル変数を利用した方がページ読み込みは速くなります。
つか、関連記事用も3種用意してくださいよ ヽ(`Д´)ﾉ
新規実装の「アイキャッチ」そして「No image」
こちらも便利ですがややこしやになりました。
アイキャッチ画像
使い道:
・ 記事内に画像を添付していない、でも No imageにするのは嫌
・ 記事内に画像は添付したけれど、「一番最初の画像」という括りだと困る
など
使い方:
記事を書く都度設定。
No image画像設定
使い道:
・ 記事内に「画像が存在しない」ことを明確にしておきたい
・ 画像無しを明示しつつ、空白になるのを避けたい
・ テンプレートデフォルトのNo image画像が好みではないので変更したい
など
使い方:
環境設定 > ブログの設定 > 記事の設定 > サムネイル代替画像の設定から
ブログ全体に一括で設定。
これまで No image代替画像についてはテンプレートに(テンプレート作者に)委ねるしかなかったので、簡単に設定できるようになったのは良いですね。
ただし画像上に「No image」というテキストが載ることはありませんので、テキストが必要であれば画像編集が必須です。
表示優先順位 アイキャッチ画像 > 記事内の画像 > 個人設定No image画像 > テンプレデフォルトNo image画像(あるいは「無し」)
個人の設定が優先ですので、テンプレデフォルトが邪魔をすることはありません。
優先順位は理にかなったものですので、きちんと把握して上手に使い分けると良いと思います。
----- 追記 2020.3.14
上記内容に一部誤りがあります。以下の記事をご参照ください。誤情報の掲載についてお詫び申し上げます。
FC2ブログの「サムネイル代替画像の設定」について
え？今更？って感じですね。すみません。もしかしたら私の勘違いで誤情報を発信したかもしれません。あるいは仕様に変更が入っていることに気づかなかった可能性も。いずれにしろお詫びを含めた記事でございます。...
----- 追記ここまで
最後に注意点ですが、
FC2のアイキャッチ画像機能はRSSへの画像配信が行われません。
これは覚えておいた方が良いと思います。
画像配信を行いたい場合には対象としたい画像を記事の一番最初(書き始め)にサイズ 0 × 0 で掲載するか、
CSSのdisplay: none; を利用して掲載されると良いですね。
There are no comments yet.