アイキャッチ画像を記事毎に設定する

広告
eyecatch

アイキャッチ画像とは、はてなブログで作成した記事を Twitter や Facebook などでシェアされた時に表示される画像です。アイキャッチ画像は記事に挿入した画像から自動的に選ばれることもありますし、指定した画像を設定することもできます。ここではアイキャッチ画像を記事毎に設定する方法について解説します。

※ 「アイキャッチ画像が設定されない場合に使用される画像の設定」も併せてご参照ください。

複数の画像を記事に挿入した場合のアイキャッチ画像

記事に画像を挿入している場合、アイキャッチ画像は記事の最初の画像が自動的に選択されます。例として次のような 3 つの画像が含まれる記事を作成してみます。

複数の画像を記事に挿入した場合のアイキャッチ画像(1)

複数の画像を記事に挿入した場合のアイキャッチ画像(2)

この記事を投稿したあと、 Twitter でこの記事をシェアしてみます。

複数の画像を記事に挿入した場合のアイキャッチ画像(3)

複数の画像を記事に挿入した場合のアイキャッチ画像(4)

Twitter には次のように投稿されました。ツイートにはシェアした記事の一番目の画像がアイキャッチ画像として使用されていることが確認できます。

複数の画像を記事に挿入した場合のアイキャッチ画像(5)

複数の画像からアイキャッチ画像に使用する画像を選択する

複数の画像を記事に挿入している場合に、最初の画像ではなく指定した画像をアイキャッチ画像に指定することもできます。記事の編集画面で、画面右側のタブに表示されている「編集オプション」アイコンをクリックしてください。

アイキャッチ画像に使用する画像を選択する(1)

右サイドバーに「編集オプション」タブが表示されます。

アイキャッチ画像に使用する画像を選択する(2)

「アイキャッチ画像」のブロックに選択可能な写真の一覧が表示されています。アイキャッチに設定したい画像をクリックしてください。これで設定は完了です。

アイキャッチ画像に使用する画像を選択する(3)

それでは記事を投稿したあとに、あらためて Twitter でこの記事をシェアしてみると Twitter には次のように投稿されました。ツイートには先ほど選択した画像がアイキャッチ画像として使用されていることが確認できます。

アイキャッチ画像に使用する画像を選択する(4)

アイキャッチ画像に外部の画像URLを指定する

アイキャッチ画像には、記事に挿入した画像から選択するだけではなく、インターネット上で自由にアクセス可能な画像への URL を指定することもできます。例えば次のようなテキストだけの記事で試してみます。

アイキャッチ画像に外部の画像URLを指定する(1)

画面右側のタブに表示されている「編集オプション」アイコンをクリックしてください。右サイドバーに「編集オプション」タブが表示されます。

アイキャッチ画像に外部の画像URLを指定する(2)

アイキャッチ画像に外部の画像URLを指定する(3)

「アイキャッチ画像」のブロックに「画像URLで指定する」と表示されているテキストボックスががあります。ここにアイキャッチ画像に設定したい画像の URL を入力してください。

アイキャッチ画像に外部の画像URLを指定する(4)

例えば画像の URL が https://www.example.com/nanohana.jpg だった場合は次のようになります。これでアイキャッチ画像の設定は完了です。

アイキャッチ画像に外部の画像URLを指定する(5)

それでは記事を投稿したあとに、 Twitter でこの記事をシェアしてみると Twitter には次のように投稿されました。ツイートには先ほど URL で指定した画像がアイキャッチ画像として使用されていることが確認できます。

アイキャッチ画像に外部の画像URLを指定する(6)

アイキャッチ画像に「はてなフォトライフ」にアップロードした画像URLを指定する

画像をアップロードして一般公開できるような場所がない場合は、はてなフォトライフに画像をアップロードして URL を取得し、その URL を指定することもできます。画面右上に表示されている次のアイコンをクリックし、表示されたメニューの中から「はてなフォトライフ」をクリックしてください。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(1)

「はてなフォトライフ」の画面が表示されます。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(2)

どこのフォルダでもいいのですが、今回はトップフォルダに画像をアップロードしてみます。画面右上の「アップロード」をクリックしてください。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(3)

画像をアップロードする画面が表示されます。アップロードしたい画像をドラッグ&ドロップで点線のエリアにドロップするか、点線のエリアを一度クリックして表示されたファイル選択ダイアログからファイルを選択してください。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(4)

画像のアップロードが完了したら、表示されている画像のサムネイルをクリックしてください。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(5)

画像が表示されたら、画像の上でマウスを右クリックし、表示されたメニューの中から「画像アドレスをコピー」をクリックしてください。画像への URL をコピーできました。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(6)

アイキャッチに「はてなフォトライフ」の画像URLを指定する(7)

今回の場合は次のような URL がコピーされました。これが画像への URL となります。(試しにこの URL をブラウザのアドレスバーなどに貼り付けて画像が表示されるかどうか確認されてみください)。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/buzzjp/20200412/20200412064003.jpg

それでは記事の編集画面に戻り、アイキャッチ画像の URL を入力するところに先ほどの画像の URL を入力してください。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(8)

それでは記事を投稿したあとに、あらためて Twitter でこの記事をシェアしてみると Twitter には次のように投稿されました。ツイートには先ほど URL を指定した画像がアイキャッチ画像として使用されていることが確認できます。

アイキャッチに「はてなフォトライフ」の画像URLを指定する(9)

-- --

アイキャッチ画像を記事毎に設定する方法について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。