細かい手作業からおさらば！WordPress画像を自動的に中央に寄せる方法！

当ブログはWordPressで製作しているのですが、画像を結構使っているブログになると思います。
個人的な趣味なのですが、画像表示は真ん中に表示したい派です！

比較的大型の画像を使用しているのでスマートフォンで確認すると左に寄りすぎてて表示が甘い…。なんてことは無いのですがパソコン表示の場合真ん中表示をしない場合は左から表示されてしまいます。
要するに右側に空白が開いてしまうんですね。

当然それを回避するために「真ん中表示」機能がついているのですが、これを使う場合は毎回ボタンを押さないと反映されません。
ライブドアブログの時は一括でできたのに、ここは少し不便ですねぇ…。

私の場合は「今日は右端！」「今日は左端！！」なんて日によって変える事は無いので全て真ん中表示で良いんですよね。
というわけで今日はワードプレスの記事内に使用された画像を自動的に真ん中に寄せてしまうやり方です！(/・ω・)/

-index-

カスタムCSSを変更する

画像を一括中央表示する場合はワードプレスの「プラグイン」を使用したり、「options.php」という管理画面からいじっても良いのですが、オススメの方法が「カスタム(追加)CSS」を変更する方法です。

個人的には色々いじってみてこれが簡単でした。
options.phpからの変更方法は何故か反映されていないことがあり、プラグイン制御は少し面倒だったので。

手順としては

と難しいことはありません。
入力するコードは

 /*画像を初期位置で中央へ*/
.entry-content figure.wp-block-image {
width: 100%;
text-align: center;
}

これを追加するだけです。サクッと行ってみましょうか。

はい。これで問題なく反映されているはずです。
簡単でしょ？？
記事を書いているときは「左揃え」で表示されていますが、プレビューを見るとしっかり中央表示になっているはずです。

※もし追加CSSの保存ができない場合はセキュリティ(WAF)のせいかもしれません。
以前書いた記事を参考にどうぞ⇓

さて、画像を真ん中に一括表示できるようになりましたが、「キャプション」は左端から表示されるままです。
※キャプションとは？？…画像下に表示される説明文の事

大型の画像の場合は左端で問題無いのですが、小さめの画像を中心表示すると変な所から文字が現れます。

このままだと視認性が良くないというか間の抜けてしまった表示になるので、キャプションもCSSで真ん中に表示させていきましょう！
無理やりキャプションを追加せず、文字を下側に打ち込んでから真ん中表示なんて力技もあるのですが、あまり美しくないですしね…。

キャプションを中央に表示させるやり方は追加CSSを追加するだけなので方法としては先ほどと一緒です。

今回は「画像を中央に」ではなく「キャプションを中央に」するのでコードはこちらを使います

/*キャプションを真ん中に*/
figcaption {
text-align : center;
}

これを打ち込むだけですね。
あとは保存すればOK！

これで問題なく画像も中央になり、キャプションも真ん中に表示されているはずです！

先ほどの「画像中央表示」「キャプション中央表示」はカスタムCSSを打ち込むだけで永続的に反映されます。
自動的に反映されるものなので、逆に言うと「左・右端揃え」がしたくてもできなくなります。
ここだけは人によってデメリットなのかもなので注意してください。

今回の方法をオススメできる方は「ブログ・サイト画像全てを中央表示にしたい」方が対象です。
記事によって頻繁に位置を変えたい方は面倒ですがその都度手動で位置を調整する方法が適していると思います。

結構「画像表示方法なんてどんなんでもいいじゃん！！」なんて思ったりもするのですが、この細かい一つ一つの設定が見やすさにつながるんですよねぇ…。

スマートフォンではあまりないと思いますが、タブレット端末を縦持ちから横持ちに切り替えた時に左端表示だと結構ぐるぐる画像位置が変わってしまいます。
真ん中表示の場合は移動自体はしますが比較的自然な動き方をしてくれるので、私は以前から画像表示は中央が好きです。

記事にもよりますが折角綺麗な画像を使用して「見てもらいたい！」と思っているならしっかり見やすい状態を作るのって大事だな…なんて思っていますがサイトデザインって難しい…。

でもこうやっていじってみて「見やすい！」って褒められると嬉しくなるので、カスタマイズって辞められなくなるんですよねぇｗ

⇑現在僕が使用しているサーバーです
使いやすくておオススメなのでよかったら参考に！