WordPress5.3で画像キャプションの位置を調整するCSS

2020 2/04

WordPress5.3では、なぜか画像キャプションの位置が変わってしまいました。

これまではWordPressのバージョンを下げることにより対策をしていましたが、バージョンを下げてももともと画像キャプションは気に食わなかった部分もあった為、CSSをいじることにしました。

画像キャプションとは?

↑の画像のような、「画像の下に説明文を書ける機能」のことです。

今回、良い感じの画像キャプションを作ることが出来たので、同じように画像キャプションの位置で悩んでいる方にどうぞ!

現在の私の環境
  • WordPress:5.3.2
  • JINテーマ:2.36
目次

WordPress5.3で画像キャプションが左寄り、文字サイズも大きくなってしまった

WordPress5.3へアップデートすることにより、画像の下にコメントが書ける「画像キャプション」の表示がおかしくなってしまいました。

今までは、画像キャプションの文字サイズは本文の文字サイズより小さく、中央揃えになっていましたが、WordPress5.3になってからは、文字サイズは本文と同じサイズ、文字は左寄りになってしまっています。これだと、普通に本文を書くのと変わらない感じになってしまいます。

 のアイコン画像 

ついでに色も変わってる気がします。
画像の説明なら、画像のすぐ下にコメントを書きたい。中央揃えだとよりキャプションぽいし、文字サイズは小さくしたいですね!

プラグインでWordPressのバージョンを下げれば戻すことは出来る

今回はCSSをいじりますが、CSSいじったりしたくないよという方はWordPressのバージョンを戻すプラグインを入れると良いかと思います。

実際に、私もこれまではこのプラグインを使ってバージョンを下げ、画像キャプションを元のとおりに表示させていました。

CSSで変更した方が思い通りの表示になる!

もともと画像キャプションの表示の仕方にはちょっと不満があったのです。

  • 文字を中央揃えにしたい
  • 文字の色を薄いグレーにしたい
  • 本文の文字よりも小さい文字サイズにしたい
  • キャプションを画像のなるべくすぐ下に表示して欲しい
  • 続けて画像を載せた時、前の画像キャプションと次の画像がくっついて見えないようにしたい

文字のサイズや色に関しては問題無かったのですが、文字の配置に問題がありました。(私の場合)
画像とキャプションの間が広すぎるし、画像を連続して貼った場合、次の画像との間が狭すぎます。

【改善】結果的にこうなりました

改善後の画像キャプション

クリック・タップで拡大できます。

画像とキャプション(文字)の位置が近いので、その画像の説明なんだとパッと見てすぐに分かります。
また、画像を連続で貼った場合に、次の画像との距離が空いているのでキャプションがあってもごちゃごちゃして見えません。

【CSSで解決】画像キャプションを見栄え良くする方法

WordPress5.3前の画像キャプションに戻したいだけなんだよ!という方は下記のCSSをどうぞ。コピペするだけで使えます。

今まで通りの画像キャプションに戻すCSS
.wp-block-image figcaption {
  text-align: center;
  font-size: 13px;
}

私のやったようなイメージにしたい場合は下記のCSSをどうぞ。コピペするだけで使えます。
主に余白部分をいじっています。

私と同じ画像キャプションにしたい人向けのCSS
.wp-block-image figcaption {
  text-align: center;
  font-size: 12px;
  margin-top: -1.9em;
  padding-bottom: 10px;
}

使っているテーマによって、margin-topやpadding-bottomの値が変わってくるはずです。私の場合はJINテーマを使用。
「このCSSそっくり貼ったけど思い通りにならないよ?」という方は、margin-topやpadding-bottomの値を微調整してみてください。

font-size: 【お好きな数値】px;
color: #【お好きな色コード】;

文字サイズや色はこの値をいじって変えられます。

JINテーマなら追加CSSで

JINテーマを使っているなら、WordPressのメニュー>外見>追加CSSで行うのがおすすめです。(他のテーマでもこの「追加CSS」の画面がある場合もあります。)他のテーマをお使いでもこの画面がある場合がありますのでチェックしてみてください。

画面右で、CSSが適用されたプレビューを見ることができるので、すぐに効果を実感できますよ。

まとめ

WordPress5.3から、画像キャプションのスタイルが消えてしまいました。今のバージョンは5.3.2ですが、未だにスタイルは消えたままです。

5.3以前のバージョンに戻せば今まで通りの画像キャプションスタイルになりますが、いっそのことCSSで直してしまったほうが良いと思います。(いつスタイルが直るのか更新のたびにドキドキしているよりは)
JINテーマでも画像キャプションのスタイル対応は今の所なさそうですし。

この記事が気に入ったら
フォローしてね!

目次
閉じる