Wordpressの知識

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

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

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

画像キャプションってなに?

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

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

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

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

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

今までは、画像キャプションの文字サイズは本文の文字サイズより小さく、中央揃えになっていました。

こんな風になっちゃった・・・

WordPress5.3になってからは、文字サイズは本文と同じサイズ、文字は左寄りになってしまっています。これだと、普通に本文を書くのと変わらない感じになってしまいます。

クボヒロ

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

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

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

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

【Wordpress5.3】JINの画像キャプションが左寄りで大きくなるのを解決したよ クボヒロ こんにちは、クボヒロです。 (@Kubohiro7) Wordpress5.3が11月12日にリリースされました。...

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

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

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

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

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

改善させた画像キャプション

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

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

今まで通りの画像キャプションに戻すCSS

.wp-block-image figcaption {
  text-align: center;
  font-size: 13px;
}

WordPress5.3前の画像キャプションに戻したいだけなんだよ!という方はこちらのCSSを。

私と同じ画像キャプションにしたい人向けのCSS

.wp-block-image figcaption {
  text-align: center;
  font-size: 12px;
  margin-top: -1.9em;
  padding-bottom: 10px;
}

私のやったようなイメージにしたい場合はこちらのCSSをどうぞ。

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

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

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

JINテーマなら追加CSSで

JINテーマを使っているなら、WordPressのメニュー>外見>追加CSSで行うのがおすすめです。

画面右で、CSSが適用されたプレビューを見ることができるので、わざわざキャッシュ削除しなくて良くなります。

あとがき

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

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

関連する記事