アイキャッチ画像(記事のサムネイル)

アイキャッチ画像は、そのブログ記事を表すサムネイル画像です。はてなブログのトップページのほか、X(旧Twitter)やFacebookなどのソーシャルメディアで表示されます(ページ後半の「アイキャッチ画像の利用シーン」も参照)

こちらはPC版での操作のみに対応している機能です。
スマートフォンやタブレットから操作される場合には、利用されているブラウザの設定から、PC版(デスクトップ用サイト)表示に切り替えてご利用いただく必要があります。 切り替え方法はスマートフォンやタブレットからPC版のはてなブログを利用するにはをご参照ください。
アイキャッチ画像に使用していた(あるいは自動で選択されていた)画像を記事から削除した際には、新しいアイキャッチ画像を「編集オプション」で選択しなおしてください。

アイキャッチ画像を選ぶ

アイキャッチ画像には、自動生成シェア画像記事中にある画像が選択できます。
何も設定していない場合は、記事中にある最初の画像が自動で設定されます。

記事中の2番目以降の画像などを設定したい場合は、記事を投稿する際に編集サイドバーの 編集オプション タブから個別に設定することもできます(このあとの「任意の画像をアイキャッチ画像に指定する」をご参照ください)

なお、ブログの公開設定が「すべての人に公開」で、アイキャッチ画像が設定されていない場合、ブログタイトル・記事タイトル・記事のカテゴリーから画像(自動生成シェア画像)を自動で生成します(このあとの「自動生成シェア画像について」をご参照ください)

デフォルトのアイキャッチ画像

ブログのトップページなど記事以外のページには、デフォルトのアイキャッチ画像が自動で使用されます。はてなブログ全体のデフォルトアイキャッチは、次の画像です。

はてなブログのデフォルトのアイキャッチ画像

はてなブログのデフォルトのアイキャッチ画像(クリックで拡大)

ブログごとにデフォルトのアイキャッチ画像を設定する

デフォルトのアイキャッチ画像は、ブログごとに専用の画像を指定することもできます。

詳細設定 画面の「アイキャッチ画像」で設定してください。

ブログごとのデフォルトのアイキャッチ画像を新規に指定または変更すると、デフォルトのアイキャッチ画像で投稿したすべての記事に自動で反映されます。

記事中に画像がない場合に自動で設定されるアイキャッチ画像について

記事中に画像がない場合、ブログタイトル・記事タイトル・記事のカテゴリーなどから生成する「自動生成シェア画像」が自動で指定されます。
自動生成シェア画像の指定を無効とし、デフォルトアイキャッチ画像が自動で指定されるよう設定できます。無効にする場合は、詳細設定ページから変更してください。

 シェア画像の自動生成を無効にした状態
シェア画像の自動生成を無効にした状態

サムネイルの表示について

アイキャッチに設定した画像は、はてなブログのトップページや記事一覧ページ(/archive)、各種記事モジュールのブログカードなどでサムネイルとして表示されます。ただし、記事中に画像がない場合に自動で設定されるアイキャッチ画像は、X(旧Twitter)やFacebookなどのソーシャルメディアでのみ表示され、サムネイルとしては表示されません。
また、詳細設定のアイキャッチ画像設定の「アイキャッチのない記事で、この画像を記事サムネイルとして表示する」を有効にした場合には、アイキャッチ画像が指定されていない場合も、デフォルトのアイキャッチ画像をサムネイルとして表示することが可能です。ページのレイアウトのために常にサムネイルが存在する状態にしたい場合など、ご希望に応じてご利用ください。

アイキャッチ画像のサイズに関する注意点

デフォルトのアイキャッチ画像をブログごとに設定する際には、ソーシャルメディアに投稿されることを考慮して、横長で十分な大きさの画像を用意するとよいでしょう。

各ソーシャルメディアが公開しているプレビューの表示サイズに関するドキュメントなども参考にしてください(記事末の「外部リンク」参照)

任意の画像をアイキャッチ画像に指定する

記事中の2番目以降の画像や、あるいは記事中の画像に関係なくデフォルト画像を使いたい、記事中の画像ではなく自動生成シェア画像を使いたいなどの場合には、個別に画像を指定できます。

編集サイドバーの「編集オプション」から次の手順で個別に画像を指定します。

  1. 編集サイドバーの 編集オプション タブをクリックする
  2. アイキャッチ画像 という見出しの下に、記事中にあるすべての画像と、デフォルトのアイキャッチ画像が一覧表示される
  3. 一覧から、アイキャッチ画像に指定する画像をクリックして選択する。あるいは、「自動生成シェア画像を設定する」にチェックを入れる
  4. 「公開する」または「更新する」をクリックする

また、使用したい画像のURLを「画像URLで指定する」と書かれた欄に直接入力することもできます。

「編集オプション」で記事ごとに指定したアイキャッチ画像は、デフォルトのアイキャッチ画像に優先します。

自動生成シェア画像について

ブログの公開設定が「すべての人に公開」で、アイキャッチ画像の設定がない記事をX(旧Twitter)やFacebookなどのソーシャルメディアでシェアする際に、ブログタイトル・記事タイトル・記事のカテゴリーなどから画像を自動で生成します。この画像を「自動生成シェア画像」と呼びます。

自動生成シェア画像のイメージ

ブログの公開範囲について

公開範囲が「すべての人に公開」のブログで、アイキャッチ画像の設定がない記事をソーシャルメディアでシェアした場合に、シェア画像を自動で生成します。

公開範囲を限定したブログの記事をシェアした場合は、画像は表示されません。

シェア画像に表示される内容

シェア画像には、以下の内容を掲載します。画像に掲載される文字の分量は、それぞれの長さによって変わります。

  • ブログタイトル
  • 記事タイトル
  • 記事のカテゴリー

アイキャッチ画像の利用シーン

アイキャッチに指定した画像は、主に次の場面でサムネイルとして表示されます。

はてなブログ内で

  • ブログの記事一覧ページ(検索結果、iPhoneアプリなども)
  • ブログのサイドバーに表示できる「最新記事」「人気記事」などのモジュール
  • はてなブログのトップページなどに掲載されたとき

ソーシャルシェアで

  • FacebookやX(旧Twitter)で記事がシェアされたときのプレビュー
  • そのほかOGP(Open Graph Protocol)に対応した各ソーシャルメディア

アイキャッチ画像がソーシャルメディア上で反映されない場合は

はてなブログの設定でアイキャッチ画像を変更した後も、FacebookやX(旧Twitter)などのサービスで、古い画像が表示され続けることがあります。
各サービスで表示される画像を更新するには、サービスごとの開発者向けツールを利用してください。最新の記事内容が反映されます。