今回は、はてなブログで表示した画像を中央寄せにして、真ん中に表示させる方法を紹介します。
画像の表示方法をちょっと変えるだけで、より目立たせたり見やすくなったりするので使いこなしてみてください。
はじめに
今回紹介する方法を使えば、はてなブログの記事内に設置した画像を中央寄せ（真ん中よせ）に表示させることができます。
だから何？ってなるかもしれませんが、まずはこちらをチェックしてください。
なんとなく左側に寄っていませんか？
こちらはタイトル下に表示させる「アイキャッチ画像」なのですが、サイズはこのまま中央寄せにするとこんな感じになります。
左右の幅が均等になってバランスが取れた感じになりましたね。
今回の記事では、このように画像を中央に寄せる方法を紹介します。
注意点
今回のコードは、「全記事の画像を中央寄せ」にする場合と「特定の画像を中央寄せ」にする方法があります。
どちらの方法を取るかによってcssを適用するクラスが変わり、使うcssも変わってくるので注意してください。
ではまずは、全記事の画像を中央寄せにする方法から見ていきましょう。
全画像を中央寄せにするcss
画像を中央寄せにする為に使われるコードは以下です。
.entry-content img{
display: block;
margin: 0 auto;
}
このようなコードを使えば、冒頭で紹介したように画像を中央寄せにすることができました。
左右の余白を調整しているのは「margin: 0 auto;」の部分です。
特定の画像を中央寄せにするcss
続いて、特定の画像を中央寄せにするためのcssです。
特定の画像を中央寄せにする場合は、記事に貼り付けた画像のhtmlを書き換える必要があります。
center-imgというクラス名を持つdiv要素の中に中央寄せにしたい画像を貼り付けましょう。
はてなブログの「Markdown」形式を使っている場合を例にとると以下のようになります。
<div class="center-img">
[f:id:XXXXXXX:aaaaaaaaaaaaaaaaaa:plain]
</div>
真ん中のテキストは、Markdown形式で書いた場合の画像URLです。
見たままモードの場合も同じように画像のURLをcenter-imgで囲めば、特定の画像だけを中央寄せにできました。
htmlを書き換えた上で、特定の記事を中央寄せにするcssを記述していきましょう。
.entry-content .center-img img{
display: block;
margin: 0 auto;
}
コード自体は、ほとんど全画像の時と同じですね。
これで、center-imgという要素の中にある画像だけが中央寄せになりました。
別の記事でもcenter-imgで囲むだけで中央寄せにできるので便利です。
まとめ
今回紹介した方法を使えば、記事内の画像を中央寄せにすることができました。
全部の画像に適用するか特定の画像だけにするかが選択できるので、それぞれ使いこなせるようにしてみてはいかがでしょうか。
ではまた。
