Bloggerは画像の扱いに癖があり
・本文に画像を挿入したときにレイアウトが崩れがち
・本文中に挿入した画像の解像度が低すぎる
・グリッドに並べたいのに並ばない
等の問題で困っていた。解決方法自体は意外と簡単(だが全部直すとそれなりに手間)で、実はかなり前から既知の問題であったらしいので、備忘録として書いておく。
回り込みについては、画像を指定しているタグに
float: left;
などがあれば削除することで解決する。また、画像を
<div style="clear: both;"></div>
で囲むと、囲まれた箇所の回り込みが解除されるので、併せて使用する。
画像の解像度が低い問題は、imgタグのsrcで/s320/のように指定されている箇所を/s1600/とすることで解決する。何ならこの項を完全に削除してしまっても問題ない。
コードの生成時期・画像の挿入方法によっては/s320/ではなく/w640-h360/のような形式で指定されていることがあり、またなぜか/s600/も混在していた。本文中の画像が鮮明に表示された時は、本来ならそうあるべきなのではあるが、妙に感動してしまった。
自分の載せる画像は、基本的に横長であまりグリッドに並べる機会はないが、皆無でもない。カラム内でグリッドに並べたい場合は
<div style="display:grid;grid-template-columns:1fr 1fr;gap:1em;">
を用いる。
古のAppleScriptの頃からそうだったが、自動生成コードは余計なものがゴチャゴチャとついていて汚いのどうにかならんのかなと思う。
また、Bloggerではアイキャッチ画像は自動で一番最初の画像になってしまうのだが、これをなんとかする方法は「アイキャッチにしたい画像を先頭に持ってきてstyleタグで非表示にする!」というものであり、なんだかな、という感じであった。