これはTwitterやFaceBookなどのSNSでシェアされる時にも表示され、大きな印象を与えます。
WordPressではきちんと設定できますが、Bloggerではそのままだと記事の一番最初の画像がアイキャッチになります。
そのため、好きな画像をアイキャッチとして設置することができません。
しかし、そんなBloggerでもたった一手間でアイキャッチ専用の画像を設置できる方法がありました。
この記事では、Bloggerでアイキャッチ専用の画像を設置する方法についてまとめます。
この方法でアイキャッチを設定して、ブログの印象を大きくアップしましょう！
Youtubeの動画サムネイルをアイキャッチとして設定する方法は、こちらの記事をご覧ください。
>>【Blogger】記事中にYoutubeの動画を追加する方法
Bloggerでアイキャッチを設定する
まず、アイキャッチにしたい画像を記事の一番上に設置します。
そのまま右上のボタンから記事作成画面をHTMLモードに切り替えます。
すると、一番上に追加した画像のコードが表示されます。
ここにたった一行、緑の部分のコードを<img>タグの最後に追加しましょう。
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkI_HTkPaGYL-ktoOaLMkMufBQCnG35gZgExspE0RD2IPM__kKRNOKXYXfTp9AbAPW_vZ5w9s-u-87yCDqnrzhAkIq19M3JPryZgyvUzO5SuukiwTodD9z5_gM2U7hbbPD48ktCBVQPW8/s1600/zelo_orange.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="507" data-original-width="768" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkI_HTkPaGYL-ktoOaLMkMufBQCnG35gZgExspE0RD2IPM__kKRNOKXYXfTp9AbAPW_vZ5w9s-u-87yCDqnrzhAkIq19M3JPryZgyvUzO5SuukiwTodD9z5_gM2U7hbbPD48ktCBVQPW8/s320/zelo_orange.png" style="display: none;" width="320" style="display: none"/></a></div>
追加した後右上のボタンから『作成』に戻してみると、設置した画像が消えていることがわかります。
このように画像が非表示になったら、アイキャッチの設置は完了です。
記事を『投稿』もしくは『更新』したあと、トップページで確認してみましょう。
設定した画像が、アイキャッチとしてうまく表示されるはずです。
コメント