「ギャラリー」ブロックのキャプションを画像の下に表示する方法

はじめに

「ギャラリー」ブロックのキャプションは画像の上に重なって表示されるため、文字が見づらくなることがあります（図1参照）。

そこで、キャプションを画像の下部に表示するように変更します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをstyle.cssに追加します。

.body .wp-block-gallery {
  figure.wp-block-image {
    &:has(figcaption)::before {
      content: none;
    }

    .wp-element-caption {
      background: none;
      color: #333;
      margin-top: 0.5em;
      padding: 0;
      position: static;
      text-shadow: none;
    }
  }
}

さいごに

今回紹介した方法を使えば、「ギャラリー」ブロックで画像の上に重なって見づらかったキャプションを、すっきりと画像の下部に移動させることができます。
デザインの視認性が向上し、ユーザーにとっても写真やイラストがより見やすい記事に仕上がります。