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

サムネイル画像とは？

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

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

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

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

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

• パソコン用
• スマホ用
• パソコン&スマホ用(新変数, 2019.2.14実装, 非公開変数)
• 関連記事用
• 最新記事用
• ランキング用

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

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

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

サムネイル化の条件

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

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

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

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

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

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

書こうかなと思いながら長らくスルーしていた 【アイキャッチ画像】設定の仕様変更 についてです。 えっとねー、いつだったかな？ 6月からFC2ブログが各機能をにちょこちょこと変更かけてたんですよね。 「… 迷走しとる (´・ｪ・｀)」などと思ったものです。 システムを変えてみたり戻してみたりやっぱり変えてみたり… という時期があったんです(笑) 迷走なんて言葉を使うと失礼ですね。「調整」という表現の方が良いか。 ...

vanillaice000.blog.fc2.com

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

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

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

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

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

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

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

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

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

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

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

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

OGP設定は大事です

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

vanillaice000.blog.fc2.com

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

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

まとめ

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