Markdownではてなブログを編集していると画像を挿入すると以下のような書式になると思います。
[f:id:MahiroN:20200501123753p:plain]
ちなみにデフォルトでは図は左寄せとなります。
これを[f:id:MahiroN:20200501123753p:plain:right]
や[f:id:MahiroN:20200501123753p:plain:right]
のようにすることで左、右寄せにすることができます。
感覚的に[f:id:MahiroN:20200501123753p:plain:center]
とすれば中央よせになるように感じますができませんでした。
どうやら「:left」や「:right」はクラスを付与するためのタグなようで「:center」は普通に文字列として扱われてしまうため画像の横に:centerと言う文字列が入ったバグった表示のされ方をしてしまします。
多くのサイトではdiv要素で区切ってstyleを設定する方法が紹介されていますが、それでは楽に記事を書けるというMarkdownの利点を損なってしまします。
今回はこの事態への現状最も楽だと思える対処方法を共有します。

【Amazon.co.jp 限定】 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
- 作者:Mana
- 発売日: 2019/03/16
- メディア: 単行本
目指す姿
Befoerのような状態をAfterにあるような表示に変えます。
デフォルトの動きのおさらい
画像を貼り付けて特にオプションを指定しない場合、inlineブロックとして画像が貼り付けられ1行分だけ文字が回り込見ます。
これを避けるために改行を挟むのがよく行われる書き方です。どちらの場合も左寄せとなります。 ライトにした場合も同様になります。
何も指定しない場合①: 1行分だけ回り込む
何も指定しない場合②: 改行を挟み込むことで回り込みを防ぐことができる。
オプションでleftまたはrightを指定した際には文字が回り込むようになります。(下の図を参照)
今回の編集ではデフォルト時に中央寄せかつ文字が回り込まないように設定します。
なので1行だけの回り込みは不可能になるのでご注意ください(使う機会はないと思いますが)。
また、leftとrightがオプションで指定された時には影響が出ないようにします。
変更手順
必要なことは以下の3点です。
- 回り込みが発生しないよう画像をblock要素にする。
- 画像をブロックの中で中央揃えにする。
- 右寄せや左寄せ指定した画像には影響がないようにする。 否定擬似クラスをつけることで可能です www.sejuku.net coliss.com
img.hatena-fotolife:not(.hatena-image-left):not(.hatena-image-right) { display: block; margin-left: auto; margin-right: auto; }