アイキャッチ画像をもっと活用しよう

アイキャッチ画像をもっと活用しよう

カスタマイズ
2020/03/26 0
vanillaice (Akira)
vanillaice (Akira)
初心者向け トラブル対処 Tips

FC2ブログの機能 アイキャッチ画像 について。どんなときに使い、使うとどんなことが起こるのかについてのおさらいです。

アイキャッチ画像の指定

FC2ブログには「旧投稿画面」「新投稿画面」の2つのエディターがありますので、それぞれ「どこで」設定するかについてです。

旧投稿画面
旧投稿画面

旧の方は画面下部に、新の方は画面右にあります。新の方はちょっとわかりにくいですね。メタタグ編集 という項目に折りたたまれています。

活用法

こんな人が使うと良いよ、こういうときに使うと良いよ、といういろいろな提案です。

記事に画像を掲載しない人

現在 サムネイル画像, アイキャッチ画像 というのは重要視されていて、Googleクローラーも積極的に取得しようとしていますし、最近のブログの形態は 要約表示 が主流です。トップページで記事内容全てを表示するのではなく、リスト形式にしておくタイプのものですね。

記事にサムネイル対象となる画像が無いときは要約タイプテンプレートで画像表示部位がNo imageだらけになったり、あるいは画像なしでテキストのみ表示だけになったりします。記事の中に画像を掲載したくないけれども、トップページなどではサムネイルが欲しい、という場合にアイキャッチ画像機能が有効です。

画像編集で装飾をつけている人

CSSではなく画像自体に装飾編集をほどこしている方ですね。色合いやなんかではなくて、枠をつけたりテキストを入れたりなどの場合です。例えば以下のようなもの。

これらを記事内の「本文」に一番最初の画像として掲載した場合、要約タイプテンプレートの多くでは以下のような表示になります。

お世辞にも美しいとは言えない。装飾が中途半端に出ていたり、こういう装飾はほぼ間違いなく背景透過png画像なので背景部位が黒くなっていたり
* テンプレートによっては背景が透過されたままの場合もあります, 使用変数によります

トップページの見栄えとしてはやはりこの方がすっきりして綺麗ではないでしょうか。記事内には装飾付きのものを掲載するとしても、トップページサムネイルは装飾前(加工前)の画像をアイキャッチ画像指定しておく、というのも上手な活用法のひとつです。

スクリーンショット掲載をする人

スクリーンショットというのは テキストを含んでいる 場合が多いです。あるいはスクリーンショットでなくとも画像上にテキストを合成している場合。例えば以下のようなもの。

テキストを含んだ画像(スクショ含む)というのは大抵png拡張子です。テキストはjpgで保存するとぼやけてしまいます。トップページサムネイルになると以下の通り。

ただこれについては「わかりやすくて良いじゃないか」という見方もあるんですね。実際「はてなブログ」などはサムネイル画像が存在しないときに自動で記事タイトル入の画像を作成してサムネイル適用しているぐらいです。ただ個人的にテキスト付きの画像がサムネイルに向かないと思うのは、以下のような仕様のテンプレートもあるからです。

個別記事のヘッダーに大きくサムネイル画像が表示されるタイプ。このサンプルなんかはスクショ内のテキストと記事タイトルが違いますし、タイトルが短いのでさほどでもないんですが、スクショ内テキストと記事タイトルが同一で、テキスト on テキスト、みたいな。個人的には「… なにがなの (;`ー´)」と思ってしまうんですよね。すごく嫌なんですこれが。あくまでも個人的に(笑)

画像内にテキストが含まれている場合は別の画像をアイキャッチ画像指定するか、合成であるならば素のテキスト無し画像を指定する、などの工夫をできるだけしてもらえると良いかな、と思います。

注意点

FC2の「アイキャッチ画像」機能なんですが、RSSに画像配信されない点とFC2サービス内でもランキングに画像が反映されないなどの注意点があります。今回提案したのは簡単に言えば 記事内最初の1枚目の画像をサムネイル対象にしない方が良い場合 の例とその対処に本機能を利用しようじゃないか、ということです。つまり「別の画像を指定する」ということですね。

同じく別画像指定をしたいけれどもRSSやランキングにも配信したいよ、という場合にはサムネイルにしたいimg要素を最初に掲載し、style="display: none;" または style="width: 0; height: 0;" を指定するなどして不可視化する、という方法もあります。まぁ良い方法ではないので極力使いたくはないですが。この方法はアイキャッチ画像機能が導入される以前の「どうしようもない場合」の対処法であって、機能導入後はなるべく機能の方で対処したいところです。

noneやサイズ0の場合、不可視状態だとしても 読み込みは行われます ので、その画像が1MBあるならば1MBの負荷がかかっています。そして style="display: none;" の使用はクローラーにとって良いことは一つもない、と。それでもときに使わざるを得ない場合もあるかもしれませんので、こういう方法もあるよ、最終手段だよ、ということで。

まとめ

アイキャッチ画像に指定されたものはRSS, ランキングには出ませんが OGP画像対象にはなっています。RSSリーダーによってはOGPを参照するものもありますので、その場合はちゃんと画像が出てきます。FC2ランキングもOGPを参照してくれると良いな、と思うんですが。もちろん個人設定で OGP設定をopt in(ON) にしなければいけませんよ。新規開設者の場合は自動でopt in状態だと思いますが、旧ユーザーさんはopt out(OFF)なので自主的に有効化してください。

 0

There are no comments yet.

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

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

カスタマイズ