Blogger の画像挿入タグが残念すぎるので、CSS で少しだけ対応する

Blogger の記事投稿画面で画像を挿入した場合、以下のようなタグで挿入されます。 ※2021年6月現在の場合 ```html <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshA-sB1IOm4s0JYX1L5iFGbw7ifN15irj6WkGQ2PdJBW5-Ud1zN4YT1vBh7LBTmRhVAGg0ieitP8gUf9WJMDIM9oEN89NhBitkJS_s_zPTJm5FSLeCuSL9znJv6YlQIrEP9kDt7-8ZJs/s868/%25E7%2584%25A1%25E9%25A1%258C.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="240" data-original-width="868" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshA-sB1IOm4s0JYX1L5iFGbw7ifN15irj6WkGQ2PdJBW5-Ud1zN4YT1vBh7LBTmRhVAGg0ieitP8gUf9WJMDIM9oEN89NhBitkJS_s_zPTJm5FSLeCuSL9znJv6YlQIrEP9kDt7-8ZJs/s320/%25E7%2584%25A1%25E9%25A1%258C.png"/></a></div> ``` とても残念です。 昔はこんな変なコードじゃなかったけどなぁ（過去の記事を見て確認）。 `a` タグに `display: block;` が追加されています。 このせいで、画像の横の余白もクリックできるようになってしまっています。 <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshA-sB1IOm4s0JYX1L5iFGbw7ifN15irj6WkGQ2PdJBW5-Ud1zN4YT1vBh7LBTmRhVAGg0ieitP8gUf9WJMDIM9oEN89NhBitkJS_s_zPTJm5FSLeCuSL9znJv6YlQIrEP9kDt7-8ZJs/s868/%25E7%2584%25A1%25E9%25A1%258C.png" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="240" data-original-width="868" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshA-sB1IOm4s0JYX1L5iFGbw7ifN15irj6WkGQ2PdJBW5-Ud1zN4YT1vBh7LBTmRhVAGg0ieitP8gUf9WJMDIM9oEN89NhBitkJS_s_zPTJm5FSLeCuSL9znJv6YlQIrEP9kDt7-8ZJs/s320/%25E7%2584%25A1%25E9%25A1%258C.png"/></a></div> 何もないところをクリックできてしまうことにすごい違和感があります。 さらに、Blogger はデフォルトでライトボックス機能が有効になっていますが、画像横の余白をクリックした場合はライトボックス機能が効きません。 画像の上をクリックしたときだけ効きます。 また、上記は配置を中央にしているのですが、これまた `a` タグに `text-align: center;` が追加されています。 従って、画像横の余白をクリックできないようにしようと `display: block;` を削除すると、`text-align: center;` が効かなくなるという残念さ。 なんで一つ上の `div` に設定してくれないんだろう？ というわけで、上記の `display: block;` `text-align: center;` を `div` タグに設定すれば解決します。 でも、画像挿入の度に手動で変更するのは面倒ですし、過去の記事全部を修正なんてやってられないので、以下の CSS を追加して対応しました。 ```css div.separator { display: block; text-align: center; } .separator a { display: inline !important; } ``` ただし、画像の配置位置は中央固定です。 きちんとやろうとすると、`a` タグ内の `text-align` の値を、親要素の `div` に適用させる処理が必要ですが、CSS だけではできないので、JavaScript を使う必要があります。 私はそこまでやりたくなかったので、これで妥協しました。 もしかしたら、CSS4 になったらできる？ ## 参考 URL - https://teratail.com/questions/51614