【The Thor】画像キャプションの縦書き(崩れ)を修正するCSS

The Thorはクラシックエディター推奨のWordPressテーマです。そのためか、ブロックエディター(Gutenberg)を使っていると、しばしばよく分からない動作をすることがあります。

そのひとつが「画像のキャプションが縦書きになる」という現象。
クラシックエディターであれば問題ないのですが、ブロックエディターで書くとこうなります。

縦書きになってしまう画像キャプション

この現象は以下の条件が重なった時に発生するようです。

・ブロックエディター(Gutenberg)の画像ブロックを使用している
・画像を中央揃えにしている

最悪クラシックエディターを使えば済む話なのですが、他のサイトではSWELLを使っていることもあり、できればブロックエディターで記事を書きたいのです。ということで、試行錯誤してこの現象を修正できたので、CSSを共有したいと思います。

目次

画像キャプションの縦書きを横書きに直すCSS

デベロッパーツールで調べたところ、縦書きになる原因は”display:table-caption;”というCSSのようです。それなら、このコードを上書きしてしまいましょう。

以下のコードを追加CSS、もしくは子テーマのスタイルシート(style-user.css)に貼り付けます。

.wp-block-image figcaption {
	display: block !important; /*縦書きの原因display:table-captionを上書き*/
}

※筆者はCSSに関して素人です。キャプションのデザインを弄るだけではありますが、くれぐれもご了承ください。

結果は以下の通りです↓

CSS適用後のThe Thorの画像キャプション

CSSに関しては原因である”table-caption”を”block”に上書きしただけ。”block”は普通のテキストの行みたいなものなので、深く考えなくて大丈夫です。

本当は親テーマを直接修正したいのですが、失敗した時のリスクやアップデートで元通りになることを考え、子テーマで上書きするという方法を取りました。

ということで以上です。お疲れさまでした!

あとがき

正直、CSSに精通している人であれば余裕で解決できることだし、なんならもっといい解決法があると思います。

かなり限定的な条件で起こる現象ですが、実際に私が悩んだのでとりあえず記事として残しておきます。末筆ではありますが、この記事が少しでも誰かのお役に立てば幸いです。

その他のThe Thorの関連記事

目次
目次
閉じる