【はてなブログ】アイキャッチ画像をセンタリングする（1番目の画像のみセンタリングする）

最近地道に取り組んでいた各記事へのアイキャッチ画像の追加がひと段落して、アイキャッチ画像が左寄せされていることに違和感を覚えました。

すべての画像をセンタリングする場合

まずはじめにすべての画像をセンタリングする場合には、「デザイン」＞「デザインCSS」に以下のコードを挿入すれば良いでしょう。

.entry-content img{
  display:block;
  margin:0 auto;
}

しかし、実際にすべての画像をセンタリングすると、画像の上に画像に関する注釈を書いている記事などでは見づらくなってしまいます。

アイキャッチ画像だけをセンタリングする場合

そこで、アイキャッチ画像だけをセンタリングすることにしました。

アイキャッチ画像だけを簡単に見分ける術がなかったので、アイキャッチ画像が必ず記事の先頭にあることを活かして以下のように対応しました。「デザイン」＞「フッタ」などに追加します。

<script>
  var ic = document.getElementsByClassName("entry-content")[0].getElementsByTagName("p")[0].firstElementChild;
  if(ic.tagName === "IMG"){
    ic.style.display = "block";
    ic.style.margin = "auto";
  }
</script>

ごく単純に、記事の先頭行が画像だったらセンタリングしています。