IT系女子ログ

Webデザイナー目線のあれこれ話。デザインもコーディングも勉強中。

はてなブログのサムネイル画像(アイキャッチ画像)が意図した表示になっていないので調べてみた

f:id:tosssaurus:20150317233843j:plain

はてなブログの"最新記事"や"注目記事"のコンテンツで使われているサムネイル画像は、一番始めにアップした画像が使われているようです。

これはこれで大変便利なのですが、困ったのは下書きの時にアップしたけれど、校正して削除した画像がサムネイルになっていたこと。これでは、サムネイル画像と記事の内容がズレていて、違和感を感じてしまいます。
また、記事のトップに持ってくる画像とサムネイル画像を違う画像にしたいときも大いにあります。

修正がてら、はてなブログのサムネイル画像の編集について、少し調べてみました。

サムネイル画像とアイキャッチ画像の意味と違い

まずは言葉の説明から。
はてなブログでは、記事一覧に表示する小さい画像のことを"アイキャッチ画像"と呼んでいます。
このアイキャッチ画像のことを"サムネイル画像"と呼んだりもします。


【WordPress】アイキャッチとサムネイルの違いを解説!プラグインで再生成も可能 - ゆめぴょんの知恵

アイキャッチ eye-catch

和製英語で、Webの世界では記事の先頭に使う画像のこと。導入部分で目を引く画像を使うことで、読者に記事に興味を持ってもらい離脱率を下げる狙いがある。

 

サムネイル thumbnail

thumb(親指)のnail(爪)のように小さい画像のこと。内容を開かずとも、一目で視覚的に把握できる画像のこと。

アイキャッチでも間違いないですが、サムネイルの方が、私が意図している内容に近いので、この記事では"サムネイル"という言葉を主に使います。

サムネイル(アイキャッチ)の編集方法

サムネイル更新前はこちら↓

f:id:tosssaurus:20150217170218g:plain

一番上の画像を使用しているのですが、途中のテキストからの表示になっていて、これではサムネイルの意味がありません。

画像の中央を正方形にトリミングするみたいです。

  • サムネイルを編集したい記事の編集画面に行く
  • サムネイルにしたい写真を投稿しておく
    (①写真を投稿しておかないと次の編集画面で画像を選択できない
     ②記事に使いたくない画像はサムネイル設定後、削除する→投稿した写真の履歴は消えない)
  • 編集サイドバーの編集オプションメニューをクリックする

f:id:tosssaurus:20150217170238g:plain

  • サムネイルにしたい画像をクリックする

f:id:tosssaurus:20150217170249g:plain

  • 記事を更新して、サイトで確認

サムネイル更新後↓

f:id:tosssaurus:20150217170257g:plain

サムネイルが編集できました!

今回はちょうど良いと思う画像を記事の中で使用していたので、新たに写真を投稿することはなかったのですが、もし記事には使っていない画像をサムネイルに使用したいなら、新たに投稿しておかなければなりません。

編集が面倒なので、私はこうしてます。

とはいえ、いちいち編集するのも面倒なので、私は内容をテキストだけで書いて、ある程度固まってきたらサムネイルにしたい画像を投稿するようにしています。

記事に必要なかったらサムネイルが決まってから削除すれば良いだけです。
記事の公開前にサムネイルを確認する方法は、編集方法と同じように、編集サイドバーを見れば分かります。

サムネイル画像の重要性

ブログ向けではありませんが、面白い記事なのでご紹介します。

日本版 YouTube クリエイター ブログ: YouTube クリエイター ハンドブックから学ぶヒント : 効果的なサムネイルとは?

参考サイト


アイキャッチ画像(記事のサムネイル) - はてなブログ ヘルプ


はてなブログでアイキャッチ画像(サムネイル画像)を変更する方法 - 芸能・ニュース記事に喝っ!


【WEBデザイン】記事に適した画像と、サムネイルに適した画像は異なるんじゃない? - Fラン建築学生の妄想