FC2ブログ「サムネイル」徹底解析

2019年02月01日
カスタマイズ
0

FC2ブログでいわゆる「サムネイル」と称される画像について。利用中のテンプレートが 全文表示タイプ要約表示タイプ かで意識も違うと思いますが、サムネイル画像はとても大事です。

FC2での「サムネイル」がどこでどのように扱われるか。例えば今あなたのテンプレート(要約タイプの場合)のトップページに表示されている画像は OGP画像かもしれませんし、そうではないかもしれません。その辺りの説明など。

サムネイル画像とは?

一般的には オリジナル画像があり、それとは別でサイズの縮小及び容量の削減が行われている画像 のことです。サムネイルの意味は「親指の爪」という意味で、サイズのことを表しています。ですから横1000pxもあるような画像を指して「サムネイル」とはあまり言わないですよね。

また、サムネイルの役割は例えばオリジナル画像の「見本」であったり、陳列用に 並べて表示される ことが多いので容量も削減されていることがほとんどです。サイズを縮小しただけで容量は小さくなりますが、加えて画像を多少劣化させてでも容量を絞ることがあります。例えば重たい動画GIFなどは静止画にすると負荷を下げられます。

FC2ブログに限定すると、トップページで表示される画像はサムネイル化されたものではなくオリジナルの場合があります。上に掲載したのは要約タイプテンプレートのトップページの様子です。実際の各画像はオリジナル画像をCSSで縮尺表示させているだけですから厳密にはサムネイルとは言いませんが、複数のアイテムがほぼ同じ形で表示が行われていますので便宜上やはり「サムネイル」と称する場面が多いですね。全文タイプテンプレートで原画をそのまま掲載している場合にはそれを「サムネイル」と呼ぶことはまずありません。仮にそのサイズが小さいとしてもです。何故ならサムネイルは「複数が並んでいる」状態をイメージされることが多いからです。

FC2ブログで自動生成されるサムネイル

FC2ではいくつかの用途に合わせて自動でサムネイル画像が作成されています。CSSの縮尺ではなく本来の意味でのサムネイル画像のことです。みなさんが記事に画像を掲載するとそれを基にサイズ及び容量を削減した陳列用の別の画像を作ってくれるわけですね。

トップページ用(主にパソコンで利用) トップページ用(主にスマホで利用) トップページ用(新変数) 関連記事用 最新記事用 ランキング用
サイズ W300 × H200 W72 × H72 W760 × H420 W144 × H144 W72 × H72 W300 × H200
変数 <%topentry_image_w300> <%topentry_image_72> <%topentry_image_url_760x420> <%topentry_relate_thumbnail> <!--recent_image_72_with_alt--> 不明(ユーザー利用権限なし)
URL https://blogthumbnail.fc2.com/w300/サーバー番号/a/b/c/abcde/ファイル名.拡張子
* abcdeは登録サブドメイン
* 拡張子はオリジナルに準ず
* ランキング用サムネイルと同一
http://blogthumbnail.fc2.com/72/サーバー番号/a/b/c/abcde/ファイル名.拡張子
* abcdeは登録サブドメイン
* 拡張子はオリジナルに準ず
* 最新記事用サムネイルと同一
http://blogthumbnail.fc2.com/760x420/サーバー番号/a/b/c/abcde/ファイル名.拡張子
* abcdeは登録サブドメイン
* 拡張子はオリジナルに準ず
https://blogthumbnail.fc2.com/r72/サーバー番号/a/b/c/abcde/ファイル名.拡張子
* abcdeは登録サブドメイン
* 拡張子はオリジナルに準ず
https://blogthumbnail.fc2.com/72/サーバー番号/a/b/c/abcde/ファイル名.拡張子
* abcdeは登録サブドメイン
* 拡張子はオリジナルに準ず
* スマホ用サムネイルと同一
https://blogthumbnail.fc2.com/w300/サーバー番号/a/b/c/abcde/ファイル名.拡張子
* abcdeは登録サブドメイン
* 拡張子はオリジナルに準ず
* パソコン用サムネイルと同一
特徴 動画GIFは静止画に
透過GIF, 透過PNGは黒背景に
高さが足りない場合は黒背景で補填
動画GIFは静止画に
透過GIF, 透過PNGは黒背景に
  • パソコン用
  • スマホ用
  • パソコン&スマホ用(新変数, 2019.2.14実装, 非公開変数)
  • 関連記事用
  • 最新記事用
  • ランキング用

まだ他にもあるかもしれませんがとりあえずこの6つ。
最新記事用のサムネイルは公式プラグインの最新記事 (サムネイル付)」 をダウンロードすると使えます。72(スマホ用, 最新記事用)とw300(パソコン用, ランキング用)はそれぞれ同じ格納データを引っ張ってきていますが変数は分けられています。

画像のサムネイル化は 容量を落とす ことも目的のひとつですから、動画GIFは静止画に、透過は解除されて黒背景になります。jpg拡張子に統一されていそうですが実際はオリジナル画像の拡張子を引き継ぎます。

自動で作成されるとはいえ、作成条件は存在します。

サムネイル化の条件

記事にUPした画像全てが無条件でサムネイル化されるわけではありません。

  • 「本文」に掲載されている一番最初の画像であること, 追記掲載画像は記事内最初の画像であっても除外
  • エディターのツールを利用して掲載した絵文字は対象外(クラス名「emoji」)
  • ファイル名に半角カッコが含まれていないこと(例: xxx(1).jpg)
  • 外部参照画像(外部直リンク)画像でないこと
  • 「アイキャッチ画像」機能を利用して指定した画像は記事本文内最初の画像よりも優先される

記事編集画面下、「記事設定」内にある アイキャッチ画像 の欄で画像を指定した場合にはその画像がサムネイル化対象となります。仮に本文最初に掲載されている画像がアイキャッチ指定画像と別のものであった場合、サムネイル化されるのはアイキャッチの方です。

また、アイキャッチ画像に何も指定しなかった場合には本文最初の画像が自動で「アイキャッチ画像」に登録されます。つまり サムネイル化されるのはアイキャッチ画像である ということです。この点はアイキャッチ画像機能が2016年5月に新規実装されてから幾度かの仕様変更(しかもコッソリ)を経て現在の形で落ち着いています。

掲載した画像が期待通りサムネイル化されていない、例えばトップページに画像が表示されない、あるいは意図したものと別の画像が表示されている、という場合には対象記事の編集画面を開いてアイキャッチ画像欄を確認してください。そして別の画像になっている場合にはサムネイル作成条件と照らし合わせを行いましょう。そしてアイキャッチ画像指定には気づきにくい特徴もあります。以下の記事を参照のこと。

記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】

書こうかなと思いながら長らくスルーしていた 【アイキャッチ画像】設定の仕様変更 についてです。 ...

このアイキャッチ画像機能ですが、「記事に画像を掲載したくはないがサムネイルは欲しい」「サムネイルにしたい画像をどうしても本文最初には掲載できない」といった場面に於いては便利な反面 抑えておくべき重要な特徴があります。

知っておくべき「アイキャッチ画像」の重要な特徴

  • ランキング用サムネイル化が行われない
  • RSS配信が行われない

アイキャッチ指定した画像がトップページにちゃんと表示されていたとしてもその画像はランキングには反映されません。画像なしと判断されてNo imageのユニコーン画像が代替表示されます。

個人的にはやはり サムネイル画像は必要、必須と言っても良い と思っています。特にランキングなんかでは他サイトは競合になるわけですよね。サムネイルが無いだけでちょっと負けてしまうんです。人の目を惹くために画像は大いに役立ちます。FC2のランキングは代替画像が表示されるのでまだ良いのですが、サービスによっては画像なしの場合に以下のような表示になることがあります。

他者のランキングなのでぼかしがキツい上に捏造してますので見づらいですが、こうして整ったレイアウトの中で画像なし記事がテキストのみで表示されていた場合には スルーされる確率が上がります。人間の視覚というのはそういうふうにできてます。全体観で捉えるとテキストのみの部分というのは無意識に飛ばされてしまうことが多いんですね。そういう意味でNo image代替画像が出る場合はまだマシ。

「記事に画像を掲載しないから」という理由で全文表示タイプテンプレートを選んでいる方も多いかもしれませんが、サムネイル画像は有った方が良いですよ。ここまで説明したようにアイキャッチ画像機能を利用すれば記事への画像掲載なしにサムネイル化対象画像を指定することができます。そうすれば最低でも「関連記事」「新着記事」にサムネイルを付けることができます。でも外部への配信とFC2ブログ内であってもランキングには反映されないという点を踏まえて、それでもどうしても記事への画像掲載はしたくないという場合には割り切る(笑)

とはいえランキングに登録しているということは「読んで欲しい」という気持ちがあるのでしょうから、サムネイルを付けるだけでも多少はアクセスが上がるかもしれません。私の場合ランキングに登録しているのはランキングページの挙動を知りたいだけでアクセスUPを狙っているわけではないのでアイキャッチ使いまくりですが反面教師にしてください。

それから要約タイプテンプレートを利用していてサムネイルも気にしている、という方でもアイキャッチ機能を使っている方はFC2ブログも含めランキングサイトには意図した画像が伝わっていないかもしれない、ということです。RSS配信が行われないというのはつまりその画像情報は外部に届くことはないという意味です。もちろん本文掲載画像のアイキャッチ自動登録なら別です。

結局はアイキャッチ画像で記事内に存在しない画像を指定する、というのは裏技的なものであって、サムネイルにしたい画像は本文の一番最初に掲載する というのが王道です。

FC2サムネイル対象画像がOGP画像になっているかどうか

SNSで重要な OGP 詳細は以下の記事で。

OGP設定は大事です

OGP (Opne Graph Protocol, オープン グラフ プロゥトコル) というのが何物であってどんな役割か、という説明です。結論から簡単に言うと SNSシェアを重要視する場合にはOGP設定が必須 です。...

要約テンプレートのトップページにサムネイルが出ているからといってそれがOGP画像になっているとは限りません。というよりも 個人設定の「メタタグ設定」 を触った記憶が無いのであればその画像はOGP画像ではありません。自主的にOGP設定を行ってください。

アイキャッチに指定した画像ですが、実装直後は「OGP画像にはならない」という仕様でした。現在ではアイキャッチ画像に指定したものがそのままOGP画像に指定されるようになってます。

本文最初の画像 アイキャッチ画像
トップページ
(パソコン, スマホ)
関連記事
新着記事
FC2ランキング
RSS
(外部ランキングサイト含む)
OGP

まとめ

FC2でのサムネイル画像について説明をしました。現時点でFC2ブログでは AMP の提供はありませんが、今後導入される可能性はゼロではありません。GoogleによるAMP優遇、特にカルーセル表示に選ばれるには サムネイル画像必須 です。いざAMP版が提供されて慌てて画像を… なんてことにならないよう、横1200px 縦675px の画像掲載をおすすめします。

vanillaice (Akira)

Posted by vanillaice (Akira)

関連する記事

コメント 0

There are no comments yet.

コメント投稿

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

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)