簡単に、Arkhe風の写真フレームを作る方法

はじめに
完成イメージ
実装手順
さいごに

はじめに

以下をCocoonで実現します。

このページでは、「Arkhe Blocks Pro」によって追加される、コアブロックに対する拡張機能について解説していきます。 Arkhe Blocksでは、カスタムブロックを追加するだけでなく、ブロックエディターの基本的な機能も拡張してい

Gutenbergエディターでは「画像」ブロックや「テ－ブル」ブロックに、キャプション（<figcaption>タグ）を追加できます。
これらのキャプションを、Arkhe風のフレーム表示にカスタマイズします。

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

完成イメージ

実装手順

以下の手順で実装します。

ラベル
Gutenbergエディターでの設定
Gutenbergエディター

以下の手順で作成します。
1. 「画像」ブロックを選択し、画像を入力します。
2. 「キャプションを追加」をクリックします。
3. キャプションを入力します。
4. 高度な設定→追加CSSクラスにmy-captionと入力します。

ラベル

CSSを追加

以下のコードをstyle.cssに追加します。
width: fit-content;を用いるため、最大幅にはならず、コンテンツの幅に基づきます。

.wp-block-image.my-caption {
  background-color: #fff;
  border: 10px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  display: block;
  width: fit-content;

  figcaption {
    display: block;
    padding: 10px 0 0;
    text-align: center;
  }

  img {
    margin: 0 auto;
  }
}

さいごに

今回紹介した方法を使えば、Arkhe風のおしゃれな写真フレームを簡単に作成できます。
この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。