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

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

カスタマイズ
2020/03/26 7
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)なので自主的に有効化してください。

 7

There are no comments yet.
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/11/05 (Thu) 13:02
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/11/05 (Thu) 14:49
vanillaice (Akira)
Akira
To アイキャッチ画像の件 内緒さん

こんばんは。

/page-878.html あたりを拝見して、たぶんこれだなぁ、と思ったんですが(カエルの絵文字がサムネイル)、違ったらご指摘ください。
恐らくこの仕様のことだと思います。

参考記事: 記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】
https://vanillaice000.blog.fc2.com/blog-entry-625.html

FC2サムネイルのおさらいをすると

・「本文」一番最初の画像が対象
・本文最初の画像が FC2エディターで挿入した絵文字の場合は対象 = エディターに無い絵文字は 対象
・外部サーバー画像は対象外
・ファイル名に半角カッコつきは対象外

などなど。
今回の場合は

> 一度消して保存しても、再度開くとまたゾンビのように復活している〜

この「消した」の意味はアップロードファイルを削除(delete)したのではなく、記事内からhtml(img要素の記述)を削除(remove)した、という意味ですよね。

アイキャッチ画像欄の「削除する」を押したかどうか

NO - 画像が復活
YES - 次の候補画像へ

アイキャッチ画像欄で画像を指定したか

NO - 本文内最初の画像へ = カエル絵文字
YES - その画像がサムネイルに

----------
こういう流れです。復活したのは「アイキャッチ欄の『削除』を押していないから」、カエル絵文字がサムネイルになっているのは「本文内にありFC2エディター絵文字ではないから」

絵文字を記事でたくさん使われる方は注意が必要なんですね (´・ω・`)
で、現状ですとこのカエルの画像は「サムネイル対象」なので、No image画像を発動というか、カエルを無視してno image指定画像を表示させることができません。
なので結果として アイキャッチ画像指定を行う という作業になります。

すごく面倒なんですが、対象になっている以上それしかないです。

で、今後のこともありますので、絵文字(エディター以外)を使われる際は

<img class="emoji" src="アドレス" width="横" height="縦" alt>

と、class名 emoji を付けてください。このクラス名を持つimgはサムネイル対象から外れます。エディター内絵文字が対象にならないのもこのクラス名を持っているためです。
絵文字をサムネイルにしたい、という場面は恐らく今後もよほど無いと思いますので、ひと手間必要ですがこの対処が一番確実だと思います。
過去のものについては残念ですがアイキャッチ画像の再指定、ということで ^^;

*
追記: 誤情報を打ち消ししました。

2020/11/05 (Thu) 20:55
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/11/06 (Fri) 06:51
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/11/06 (Fri) 08:26
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2020/11/06 (Fri) 15:42
vanillaice (Akira)
Akira
To 思わぬ副産物♪ 内緒さん

こんにちは。
今ちょうど検証してました。

おっしゃるとおり、アイキャッチ指定以外方法が無さそう、仕様が変更されているようです。
私の昨日作成したページは画像が壊れてしまっています。
https://blog-imgs-137.fc2.com/v/a/n/vanillaice000/cap29348----1200.png

一番右のサムネイルがぶっ壊れマークになってますよね。これも原因がわからないけども、昨日は英語ページのままやったけどそれは関係ないと思います。たぶん (´・ω・`)

結果について今から記事を書きますね。
emojiクラスつき画像にはテンプレートスタイルシートで調整を入れています。
ちょっと気になる、って感じですよね(笑)
昨日お伝えすれば良かったね ^^;

2020/11/06 (Fri) 15:51

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

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

カスタマイズ