このブログでは、今後おそらく投稿画像の位置を中央から変えることはないので、CSSで強制的にセンタリングさせてしまっています。
毎回画像を追加するたびに中央処理をするのはとても面倒です。多分同じような方もいらっしゃるんじゃないかという希望を抱きつつ、その方法を説明したいと思います。
まずはPC用のCSS
style.css に以下のコードをそのまま貼り付けます。
1 2 3 4 5 6 | .kizi img { display:block; margin: 0 auto; text-align: center; margin-bottom:0 !important; } |
これでPC記事の投稿画像がいつでも強制的にセンタリングされます。ビジュアルエディタでは左寄りですが、プレビューで確認してみてください。センタリングしているはずです。
「margin-bottom:0;」に関して、記事の画像は「pタグ」に挟まれていますので画像自体の下方に余白がでるとバランス的にアレなのでゼロにしています。もちろん画像の下方に余白がもっと欲しいという方は調整してください。
次はスマフォ用のCSS
style.css だけ変更してもスマートフォンで見た時には当然センタリングされていません。そこでスマートフォン用のCSSにも処置をほどこします。
smart.css に以下のコードをそのまま貼り付けます。
1 2 3 4 5 6 | .post img { display:block !important; margin: 0 auto !important; text-align: center !important; margin-bottom:0 !important; } |
!important ですが、もしセンタリングされなかったら返って面倒なので全部につけてあります(笑)いまのところ僕のブログはこれで問題なくスマートフォンはセンタリングされていて、他の箇所の誤動作もありません。
注意点とまとめ
注意点として、この処置をすると投稿画像が強制的にセンタリングされます。したがって、当然画像を左右にふることはできないことを了承ください。
また、このブログでは問題ありませんが、作りによっては問題がでてくるケースもあるかもしれません。それに関しては自己責任でお願いします。
「中央配置にする」この動作がひとつなくなるだけでも相当楽になると思うのは僕だけだろうか・・・・。
兎にも角にも「Wordpressで記事投稿画像を強制的にセンタリングさせる方法」でした。ノシ