おもこん

おもこんは「思いつくままにコンピュターの話し」の省略形です

アイキャッチ画像を登録しました。

このブログのアイキャッチ画像を登録しました。

アイキャッチ画像については、はてなブログの説明がありますが、それだけでは分かりにくいと思います。 ここでは、自分の経験を書くことによって、アイキャッチ画像の補足的解説をしていきます。

私の場合はブログを投稿したら、いつも Twitter に情報共有の投稿をしています。 これは記事を「公開する」ボタンを押した後の画面から行うことができます。

そこで、Twitterで表示される画像の適切なサイズを考えてみました。 Twitterの説明によると、その画像はツイッターカードと呼ばれるカードの一部で、次のような仕様になっています。

  • 画像サイズは最小300x157最大4096x409
  • アスペクト比(横:縦の長さの比)は2:1

また、ツイッターカードの画像の幅を定規で図ったところ、8cmでした。

このことから最適な画像サイズを計算してみます。 私のPCの解像度は165DPIです。 165DPIの意味は、1インチあたり165個のピクセル(画素:ドット)が配置されているということです。 1インチが2.54cmであることから、8cmの画像のピクセル数は

8÷2.54✕165 = 520

ですので、520x260の画像を用意すれば良いことになります。 私はGimpで画像を作りました。

もしも、あなたがFacebookなどに情報共有の投稿をするならば、Facebookの仕様を検討する必要がありますので、注意してください。

はてなブログでデフォルトのアイキャッチ画像を設定するにははてなブログヘルプを参考にしてください。

少し前に公開した「ブログ収益化?宣言?」の記事を更新して実際にTwitterで共有してみます。 その結果を画像にして貼り付けたのが次の画像です。

アイキャッチツイッター

アイキャッチ画像の(はてな側による)自動生成を設定して、投稿ブログに写真がある場合は、投稿画面のサイドパネルの設定をしないと、最初の写真がアイキャッチ画像に使われるので注意が必要です。

また、一度投稿した記事を更新してアイキャッチ画像が変わる場合、Twitter上ではしばらく古い画像が表示されることがあります。 これは、ツイート自身が画像を持っているわけではなく、ツイートがリンク先のメタタグを見に行って画像を取ってくるためです。 それを新しい画像に切り替えるにはTwitterカードバリデータを開き、そこに投稿先のアドレスを入れ、「preview card」ボタンをクリックします。 それで新しいアイキャッチ画像が出れば大丈夫のはずです。

これらの注意事項ははてなのヘルプに書かれているのですが、私自身引っかかってなかなか上手くいきませんでした。 何か質問があれば、コメントしてください。