やはりYahoo!からお引越しされた方のみならず、FCブロガーでも混乱をきたしている方が多いようです。そこでもう一度説明をしたいと思います。実際すごくややこしいんで、頭の中をクリアにしてご覧ください(笑)
「サムネイル」「アイキャッチ」という用語について
まずこの用語で既に混乱(笑)
サムネイル, サムネイル画像とは
サムネイル（英語：thumbnail、日:縮小見本表示、サムネール）とは、画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。 親指（thumb）の爪（nail）のように小さく簡潔であるという意味から来ている。
Wikipedia
注: スマートフォンではデバイス横幅の関係上、両者共に表示サイズが同等になってしまいますので、サムネイル画像の方に width: 60%; max-width: 300px の制限をかけています。
「オリジナル」は他に「原画」「元画像」などの表現も使われます。このオリジナルを サムネイル化 したものがサイズが小さい方の画像ですね。サイズだけでなく容量も小さくなっています。
サムネイル画像はFC2ブログのアップローダーの機能を利用して、オリジナル画像のアップロード時に同時に作成することができます。
アップローダーの サムネイル という項目の 同時に作成する にチェックを入れておくと任意のサイズで生成されます。ただし横・縦共に 999pxまで という上限があります。通常は横幅を軸にして考えるでしょから、横のサイズを例えば300や400などオリジナルサイズよりも小さな値を入れておき、縦幅は 999 にしておくと良いでしょう。
念の為、この縦横のサイズ指定はそのサイズに切り出す目的ではないですよ。縦横比は維持したままでアップロードが行われます。例えば 横400 縦300 と指定しても、原寸が 1200 × 675 の場合は 横400 縦225 になります。単位はpxです。
サムネイル画像の意義は、wikipediaにも記載が有る通り、見本の際に大判画像がドーンドーンと表示されていては視認性が落ちます。加えてサムネイルには 陳列 の概念もあります。比較対象などを行う時は 同じサイズで並んでいる 方が視認性が高いわけです。これはブログでも同じで、要約表示タイプテンプレートのトップページはまさに陳列 と言えるでしょう。(もちろん画像サイズを敢えてバラバラに表示するデザインもありますが)
全文表示タイプテンプレートはトップページについては無関係です。全文タイプは本文に記載した内容がトップでもそのままそっくり表示されますので「陳列」という形状にはなりません。
画像が同じサイズで並んでいます。この形状を指してこれらの画像は多くの場合「サムネイル」と表現されます。
ですが実際にこの画像は オリジナル画像で表示されています。サムネイルは「小さくなっている」ことも条件に含まれますから、厳密に言えばサムネイルではありません。CSSで縮尺表示を行っているだけです。とはいえ一般的にこの状態は「サムネイル画像」であると表現されます。それは陳列状態を見ているからそう感じるわけです。
アイキャッチ, アイキャッチ画像とは
eye-catching images(目を惹きつける画像)ということで、highly noticeableな画像、という意味だと思います。デザイン界隈以外ではあまり目にすることのない表現ですが。
この表現が日本で一般的かどうかちょっと私わからないのですが、ググると結構出てくるので日常的に使われているのだろうと思います。
で、定義としてはやはり 人目を惹くための画像 ということですよね。または サムネイル画像の言い換え として利用されることもあるようです。そしてさらに 記事の代表画像 の意味も含んでいると思われます。
サムネイル画像の定義に「代表」というのはあまり無い… とはいえ「見本」ですから含むっちゃ含むような気もしますがともかく、FC2ブログの機能名称になっている アイキャッチ画像設定 はまさに 代表画像を選ぶ 機能だと思えばほぼ間違いではありません。
また先程のブログトップページの様子に言及しますと、各記事についているサムネイルは各記事を代表する画像ですから、これこそまさしくFC2が言うところの「アイキャッチ画像」ですよね。ですからトップページに並ぶ画像は「サムネイル」であり「アイキャッチ」でもある、と。
ということで、以下が重要ポイント。
「アイキャッチ画像」はトップページの表示画像を決定する
アイキャッチ画像に指定した画像は最優先であり強制力が高い指定です。そしてもう一つ
「アイキャッチ画像」で指定した画像はOGP画像を決定する
OGPとも深く結びついています。ちょっとこのあたりがですね、アイキャッチ機能のリリース直後のシステムから変更があり、当初はOGPの対象外だったんですね。しかし現在はこの指定がOGPも左右しています。FC2さんちゃんと広報してくださいよ！(笑)
webの用語や機能名称というのは混乱のもとになることがあるんですよねぇ。例えばそれこそ「サムネイル」と言ってみたり「アイキャッチ」と言ってみたり。「オリジナル」と言ってみたり「原画」と言ってみたり。日本語は特に置き換え表現が多数あります。英語ですらカタカナ日本語感覚で使う自由な国民性(笑)
あとこの「アイキャッチ画像」の名付けについては、アップローダーの「サムネイル」作成機能と同名にならない配慮でもあるはずです。ところがそもそもサムネイルとアイキャッチは混同して使われている用語なので、もっと独自性の強い名称の方が良かったのかも、です。「最優先画像指定」とか。ダサいけど(笑)
もう既に大きなヒントが出ているんですが、アイキャッチ画像は 個別記事内の画像とは結びついていない という点。
旧来のFC2ブログのサムネイル選出条件と新規実装のアイキャッチ画像機能
- 「本文」に 掲載されている 一番最初の画像
- ファイル名に半角カッコが含まれる画像は対象外
- エディターのツールを利用して挿入した絵文字(これも画像です)は対象外
- 相対パスで記した画像は対象外
これが長く親しまれた画像の選出条件です。本文に掲載したものが要約テンプレのトップや新着・関連記事のサムネイルとして表示される、という感覚ですよね。
例えば以下のような形。
この場合トップページに表示されるのは一番左にある画像です。「一番最初の掲載」にあたるためです。
仮に「本文」に画像掲載がなく、「追記」に有った場合
トップページは以下のようになります。
本文最初の掲載画像よりもアイキャッチ指定画像が優先される
例えば個別記事で以下のような形。
これまでの感覚でいくとトップページではこう ↓
アイキャッチ画像の別の画像を指定するとこう ↓
こうして本文最初の画像とは別のものを表示させることも可能です。それが「アイキャッチ画像」機能の最大の特徴です。つまり本文画像よりも優先表示されているわけですね。もっと言えば 本文内に画像が存在しなくとも、「アイキャッチ画像」に画像を指定すればそれが表示される ということです。
「アイキャッチ画像」機能実装の意義
サムネイル必須要件への対応
この仕組はおそらく OGPへの配慮 であり、サムネイル必須時代への適合 でもあります。
記事に画像を掲載しない、というユーザーも居ますよね。がしかしweb一般ではサムネイル画像はほぼ必須と言って良い時代です。現にGoogleのAMPや構造化マークアップでは「サムネイル画像必須」と規定されています。「記事に画像掲載なし」というスタイルで運営しているユーザーがSEO面で不利にならないように設けられた機能ではないかと思います。
Googleなどが記事の代表画像を表現する際に「アイキャッチ」という表現は用いません。「サムネイル」という単語でもって表現されます。念の為。
なので決して無意味な機能ではありませんし、混乱するとしても一部の方にとってはありがたい機能です。ただし注意点はあります。
FC2ブログ「サムネイル」徹底解析
FC2ブログでいわゆる「サムネイル」と称される画像について。利用中のテンプレートが 全文表示タイプ か 要約表示タイプ かで意識も違うと思いますが、サムネイル画像はとても大事です。 FC2での「サムネイル」がどこでどのように扱われるか。例えば今あなたのテンプレート(要約タイプの場合)のトップページに表示されている画像は OGP画像かもしれませんし、そうではないかもしれません。その辺りの説明など。...
アイキャッチは本来「FC2ブログ内だけで補完」される機能です。システムの修正によりOGPに採用されるようにはなりましたが、RSSではやはり対象外。そしてFC2ブログサービス内であってもランキング掲載時にアイキャッチ画像で指定した画像は表示されません。
昨今のRSSリーダーはOGPも参照するものが増えてはいますが、純粋にxml文書だけをパースするサービスもまだ多く存在します。RSSへの画像配信を重視する場合はやはりアイキャッチではなく記事内に画像を掲載するようにしてください。
限定記事内の画像
パスワード限定に制限をして更新した記事で「本文」に画像掲載が有る場合、トップページには表示されませんが 新着記事リスト, 関連記事リストには表示されてしまいます。それを避けるために例えば当たり障りのない画像をアイキャッチ指定しておくとか、あるいは「限定」の文字を入れた画像を準備してアイキャッチ指定しておくなどが有効です。あるいは本文には画像を掲載しないか。これが最も原始的で確実な方法(笑)
結局は画像掲載者全員「アイキャッチ画像」機能を利用している
これを書くとさらに混乱する可能性がありますが事実です。旧来の「本文最初の画像」だけを意識して記事を書いており、アイキャッチ画像指定は行っていない、というユーザーでも実際にはアイキャッチを指定しています。
記事編集中には気が付きません。「記事を保存」つまり投稿をした時点で自動的にサムネイル対象画像が「アイキャッチ画像」の項目に指定されます。ですから画像を本文に掲載した時点でアイキャッチを指定している、ということになります。能動的か受動的かの違いです。
この仕組ゆえの注意点もあります。
記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】
書こうかなと思いながら長らくスルーしていた 【アイキャッチ画像】設定の仕様変更 についてです。 えっとねー、いつだったかな？ 6月からFC2ブログが各機能をにちょこちょこと変更かけてたんですよね。 「… 迷走しとる (´・ｪ・｀)」などと思ったものです。 システムを変えてみたり戻してみたりやっぱり変えてみたり… という時期があったんです(笑) 迷走なんて言葉を使うと失礼ですね。「調整」という表現の方が良いか。 ...
新投稿画面「メタタグ設定」の意味
新投稿画面では「アイキャッチ画像」の指定項目が非常にわかりづらくなっています。画面右下の メタタグ編集内にあり、デフォルトでは折り畳まれています。
この「メタタグ」の意味なんですが、テンプレートの <head> から </head> を見るとたくさんの <meta xxx を頭に持つ要素が見つけられると思います。これがメタタグ・メタ要素です。
何故アイキャッチ画像を「メタタグ」項目に入れているかというと、OGPメタ要素 のことを指しています。
<meta property="og:type" content="ページ分類">
<meta property="og:url" content="記事URL">
<meta property="og:title" content="記事タイトル">
<meta property="og:description" content="概要文">
<meta property="og:image" content="サムネイル画像">
上記がOGP関連のmeta要素で、個人設定で有効化されます。その中に「サムネイル画像」を特定するmeta要素があります。FC2ブログはこれのことを言っています。
テンプレート内に上記のOGP関連meta要素は記載されていません。記載されているとしたらFC2が公式にOGPをサポートする以前にリリースされたテンプレートであり、SEOの一環として製作者が入れていたものだと思います。現在はブログ個人設定で有効化が可能(つまり自動で書き出される)ため内容重複になりますのでテンプレート内から削除するか、個人設定の方を無効化してください。
meta要素はOGPのためだけに利用するものではありませんので「メタタグ編集」なる名称はいかがなものかと思いますが、そうなっているだから仕方がない(笑)
素直に「OGP画像指定」で良かったんじゃないのか ^^;
スピード対策と推奨サイズ
アイキャッチ画像は FC2ブログアップローダーのサムネイル自動作成で生成した画像を用いたスピード対策はできません。
アップローダーの生成に頼らず自身で作成したサムネイル画像なら対策になります。
何故ならトップページサムネイルもOGPも自動的にオリジナルサイズが適用されるからです。まずOGPの方。アイキャッチ画像に指定されているURLが
https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/tests.jpg
だとします。緑の「s」は自動生成されたサムネイルであることを示しています。本来ならこのsつきのURLがトップやOGPに適用されそうなものですが、実際には
https://blog-imgs-xxx.fc2.com/x/x/x/xxxxx/test.jpg
こちらのオリジナルの方です。
仮にアップローダーの機能に頼らず、自分で縮小画像を作成してアップロードした場合は有効です。いずれにしろOGPの推奨サイズは各社総じて 横1200px以上 なので、そちらを念頭に置いた方が良いでしょう。
トップページの方は、テンプレートで指定されている独自変数に依存します。自動生成サムネイルを出力する変数はありません。全ユーザーがサムネイル画像を生成しているとは限らないためです。
まとめ
注意点もいくつかありますし、把握できるまでは迷いが出ることも。しかし理屈が理解できれば有益な機能です。特に限定記事には有効かなぁ、と思います。関連記事リストに画像が出ていることに気づいていない方が居るようなので。画像も文章の一部になりえますので秘匿性の高い記事では表示したくないのではないかと。
というわけでアイキャッチ画像機能のおさらいでございました。
There are no comments yet.