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

2022年8月2日火曜日

ブログ編集

t f B! P L

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

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


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

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


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

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


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

色々調べたところ、
アイキャッチ画像 (1枚目の画像) を挿入して、その画像を記事内には表示しない
という方法があるようです。

これは 投稿時の下書き画面をHTMLビューに変更して行う 方法です。
新しい技がでてきました。
やってみます。

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

私はパワポを使って ワイド画面 (16:9) 形式で画像を作成しました。
その画像を、下記のように、この下書き画面の一番最初の画像として貼り付けます。


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

上の画像の左上のところに鉛筆マークがあるのでそこをクリックします。
するとHTMLビューというものがあるのでそこを選択します。
すると下記の画面になりました。
うわ、難しい、こわいこわい、ってなりますね。
ひるまずすすめていきます。


私は見出しのすぐ下にアイキャッチ用の画像を挿入したのでそこのHTMLをみてみます。
すると下記の蛍光をつけたところが、この画像のHTMLコードであることがわかります。


ここの width="640" /></a></div> のところに style="display: none" を挿入して
width="640" style="display: none"/></a></div>
にします (下記 赤丸)。


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

作成ビューに戻すと、下記のように画像が消えました。
間に大きなスペースも入りません。

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

リスト

記事本文

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

まとめ

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

先達の記事を参考にさせてもらうと、どんどんできることが増えます。
そこから派生して他のことも勉強できて面白いですね。

自己紹介

自分の写真
医科クリニック開業準備中の医師。やる気はあるけど、知識がない。気になったことを勉強してまとめていきたいと思います。
がむしゃら院長のXはこちら

このブログを検索

ブログ アーカイブ

連絡はこちら

名前

メール *

メッセージ *

QooQ