Bloggerでアイキャッチ画像を指定

ホームのリストに自分の好きな画像を表示させます

Bloggerではブログ内の最初の画像がアイキャッチ画像としてリストにでてきます。

しかし、統一感がなく、その記事の中で何が書いてあるかわかりません。

実際にその記事を開いてみると、下記のようになっています。

個人的にはすっきりしていて好きですが、アイキャッチ画像を指定するには、どうしても記事の最初にその画像を入れこまないといけません。

2枚目の画像を指定することはできないようです。

どうにかならないんでしょうか。

アイキャッチ画像として自分の好きな画像を指定する

色々調べたところ、

アイキャッチ画像 (1枚目の画像) を挿入して、その画像を記事内には表示しない

という方法があるようです。

これは 投稿時の下書き画面をHTMLビューに変更して行う 方法です。

新しい技がでてきました。

やってみます。

① まず、自分の好きな画像を作成して、見出しの下に挿入します。

私はパワポを使って ワイド画面 (16:9) 形式で画像を作成しました。

その画像を、下記のように、この下書き画面の一番最初の画像として貼り付けます。

② この画像を非表示にします。

上の画像の左上のところに鉛筆マークがあるのでそこをクリックします。

するとHTMLビューというものがあるのでそこを選択します。

すると下記の画面になりました。

うわ、難しい、こわいこわい、ってなりますね。

ひるまずすすめていきます。

私は見出しのすぐ下にアイキャッチ用の画像を挿入したのでそこのHTMLをみてみます。

すると下記の蛍光をつけたところが、この画像のHTMLコードであることがわかります。

ここの width="640" />

 のところに style="display: none" を挿入して

width="640" style="display: none"/>

にします (下記 赤丸)。

③ うまくできているかどうか確認します。

作成ビューに戻すと、下記のように画像が消えました。

間に大きなスペースも入りません。

 

ホーム画面で確認するとリストには自分の指定したアイキャッチ画像が反映されています。

しかもその画像は記事内にはでてきませんでした。

リスト

記事本文

今回は下記の記事を参考にさせて頂きました。ありがとうございます。

https://blogger-nav.blogspot.com/2018/08/blogger.html

https://monocotoyom.blogspot.com/2021/03/bloggerfeatured-image.html

まとめ

・アイキャッチ画像を自分の好きな画像にすることができました。

・アイキャッチ画像の縦横比率に合わせた画像を指定すると、画像が途切れることなく表示されました。

先達の記事を参考にさせてもらうと、どんどんできることが増えます。

そこから派生して他のことも勉強できて面白いですね。

関連記事

扶養範囲内とは

http://gamushara-incho.lovepop.jp/wordpress/wp-content/uploads/2023/07/E3-81-8C…

Google Analytics を導入

自分のブログの解析がしたい! http://gamushara-incho.lovepop.jp/wordpress/wp-content/uploads/2…

関連記事の画像表示をきれいに

関連記事一覧の画像を表示をきれいにします https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXs…

ブログ内の画像に枠線をつける

画像に枠線をつけてみやすくします http://gamushara-incho.lovepop.jp/wordpress/wp-content/uploads…

コメント

コメント機能は移行中です。お問い合わせよりご連絡ください。