はてなブログでMarkdown編集時でも画像を中央寄せできるようにする。

f:id:MahiroN:20200505233320p:plain

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の利点を損なってしまします。

今回はこの事態への現状最も楽だと思える対処方法を共有します。

Befoerのような状態をAfterにあるような表示に変えます。 f:id:MahiroN:20200505233320p:plain

画像を貼り付けて特にオプションを指定しない場合、inlineブロックとして画像が貼り付けられ１行分だけ文字が回り込見ます。

これを避けるために改行を挟むのがよく行われる書き方です。どちらの場合も左寄せとなります。ライトにした場合も同様になります。

何も指定しない場合①: 1行分だけ回り込む f:id:MahiroN:20200505231039p:plain:w400

何も指定しない場合②: 改行を挟み込むことで回り込みを防ぐことができる。 f:id:MahiroN:20200505231103p:plain:w400

オプションでleftまたはrightを指定した際には文字が回り込むようになります。(下の図を参照) f:id:MahiroN:20200505232328p:plain:w400

今回の編集ではデフォルト時に中央寄せかつ文字が回り込まないように設定します。
なので1行だけの回り込みは不可能になるのでご注意ください(使う機会はないと思いますが)。
また、leftとrightがオプションで指定された時には影響が出ないようにします。

必要なことは以下の3点です。

カスタムcssに以下のcssを追加するだけです。

img.hatena-fotolife:not(.hatena-image-left):not(.hatena-image-right) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

幻魔ナイトブログ