追記：PC表示の左画像を、スマホで中央に-朱夏の酔狂者

追記：PC表示の左画像を、スマホで中央に

2025/09/05

前回で思い出した件として、追記。

前提：今現在、私はmacOS 13.7.7 で、Safari 18.6 を使用。

Bloggerブログで、テンプレートはQooQリスト版をカスタマイズして利用中。

画像を左に置いて、文章を回り込ませたい場合。

PC表示ならばそれでいいけど、横幅の少ないスマートフォンでは画像を中央に寄せたかったんだ。

それで、cssを書いたんだっけ。それにしてもマヌケなcss書いてたな。修正したよ。PCとスマホで表示を変えるために、imboxってクラスを指定している。

テーマ＞HTMLを編集で、

これは、/* 個別記事下部 */の上部に書いた。

/* imboxの指定*/
.imbox{
float: left;
margin-right: 15px;
margin-bottom:10px;
}

/* shimeの指定*/
.shime{clear: both;display:block;padding:1em;}

/* モバイル時、箇条書きの行間空ける、画像を中央寄せにする*/
@media ( max-width : 480px ) {
li{line-height :3em;}
.imbox{float: none; 
text-align:center; 
margin-right: 0;}
}

次にBlogger記事編集画面で、こんなふうに画像と文章を入れる。

編集画面をHTMLビューにして、画像の <a href= の前に、先ほど指定した <div class="imbox"> を入れる。最後に</div>を足してね。

<div class="separator" style="clear: both; 
text-align: center;">
<div class="imbox">
<a href="https://blogger.(長々と画像のURL)" 
imageanchor="1" style="margin-left: 1em; 
margin-right: 1em;"> 
<img alt="なんとか" border="0" data-original-height="サイズ" 
data-original-width="サイズ" height="サイズ" 
src="https://blogger.(長々と画像のURL)" 
width="サイズ" /></a></div></div>