Bloggerのデザインを少しずついじっているが、
記事一覧の画像、いらないなー、と思っいた。
画像がある記事はその画像の一枚目がタイトルの左に表示されるが
画像がない記事は表示がないのでタイトルの表示が揃っていない。
個人的にこのズレが気持ち悪いので、
ならばいっそのことこの画像が表示されないようにしたい、と思った。
なんとなくここらへんかな？とあたりをつけてHTML(CSS)をいじっていたのだが、
どうも根本的に画像を非表示にするのは難しいようだ。
（サービスによっては画像を非表示にできたりもするらしいのだが、
Bloggerではそういう設定はないようである。）
であれば仕方がない。
全部の記事に同じ画像が表示されるようにすれば、最悪タイトル表示はズレない。
例えば全部透明のpng画像とか、エンピツとか、☆とか、あまりうるさくないやつ。
なんてことを考えながら色々なページを見ていたら、
このような記事があった。
目から鱗！Bloggerのアイキャッチを任意の画像にする方法 ｜ いろいろぐ
記事一覧のあの画像、アイキャッチというのか。
<img src="image-here" style="display:none;">
画像をURL指定し、スタイルにdisplay:noneを指定してあげればいいようだ。
Bloggerで記事を投稿する際、私はいつもHTMLビューで行うのだが
画像挿入をすると
<div class="separator" style="clear: both;"> <a href="画像URL" style="display: block; padding: 1em 0; text-align: center; "> <img alt="" border="0" data-original-height="" data-original-width="" src="画像URL"/> </a> </div>
このようなタグが挿入される。
この中の
style="display: block;
これを
style="display: none;
に書き換えた。
これで、記事内に画像は表示されないが、記事一覧に↑で指定した画像が表示される。
※注意
画像挿入は記事の一番最初の部分で行う。
（一枚目の画像になるようにすること。）
せっかくなのでおおまかに何の記事か分かるようなアイコンにしてみた。
アイコンはこちらのものをお借りしている。
これでタイトル表示がズレる気持ち悪さがなくなった。
Blogger関連記事はこちら
投稿日：2022年12月22日
初出：2022年11月10日
0 件のコメント:
コメントを投稿