最近ポイ活の入会特典のポイント稼ぎのためにゲーム案件をこなしていたのですが、Google OneでVPNを癖でゲームの途中でONにしてプレイしていたせいでポイントがつきませんでした・・・。
悲しくて、でも頑張って達成したのでブログにでもスマホのスクリーンショットを貼ってみようかなーと思って貼ってみたところ・・・。
スマホのスクリーンショット（縦長）が左寄りだとバランスが悪く感じるし、大きさもなんだか微妙なことに・・・。
そういえば画像を中央揃えにしたことなかったなと、とりあえず中央揃えにする方法について調べてみました。
見たまま編集で画像を中央揃えにする方法
見たまま編集には、テキストと画像を「左揃え・中央揃え・右揃え」にできるボタンがあるので画像をクリックした後にボタンを押すだけなのでとても簡単です。
見たまま編集を利用している人はこれだけでいいと思います。
はてな記法・Markdown編集で画像を中央揃えにする方法
私は現在はてな記法を利用しているのですが、はてな記法には見たまま編集のように「左揃え・中央揃え・右揃え」にできるボタンがありません。
なんで・・・？
なので別の方法をとることになります。
①キャプションをつけて画像を中央揃えにする
キャプションを記入（空白一行でもいい）することで画像が中央揃えになります。
空白をいれるだけなのはお手軽ですが、クローラー（bot）的に意味のない記述をしちゃダメかなーとこの案は却下することにしました。
キャプション内容を毎回考えて記入するのも私には面倒に感じるかな・・・。
②画像を中央揃えに設定するCSSを記述する
次のコードを「管理画面」→「 デザイン」→「 カスタマイズ」 →「 デザインCSS」に貼り付けて下さい。
/*画像の中央揃え*/
.entry-content img{
display: block;
margin: 0 auto;
}
/*画像の中央揃えここまで*/
これで記事内の画像が中央揃えになります。
注意：この方法はすべての記事の画像が中央揃えになります
③中央揃えにしたい画像にタグを記述する
はてな記法・Markdown編集での画像は、はてなブログ独自の「fotolife記法」で貼り付けられます。
fotolife記法の構文
[f:id:はてなID:画像番号:オプション]
この「fotolife記法」を次のように「divタグのalign属性」を使って挟みます。
- <div align="center">[f:id:はてなID:画像番号:オプション]</div>
これで画像が中央揃えになります。
- 右揃えにしたい場合はcenter（中央）部分をright（右）に変更します。
- この方法は画像だけじゃなくてテキストにも使えます。
私はこちらの方法で中央揃えにしてみようと思っています。
