簡単に、ブロックを使用してメニュー表を作成する方法

はじめに

ブロックを利用して簡単にメニュー表を作成します。

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

ダウンロード

以下のデータをコピーし、そのまま「段落」ブロックに貼り付けます。

<!-- wp:group {"className":"my-price","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group my-price"><!-- wp:paragraph -->
<p>アイテム</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>料金</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:html -->
<style data-wp-block-html="css">
.body {
  .my-price {
    & > * {
      margin: 0;
    }

    hr {
      border-color: #ccc;
      border-style: dotted;
      border-width: 1px 0 0 0;
      flex-grow: 1;
    }
  }
}
</style>
<!-- /wp:html -->

完成イメージ

実装手順

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

参考：間隔の調整ができる点線について

完成イメージ

ドットの間隔を調整した点線に変更します。

間隔の調整ができる点線・破線を作ろう！ | TECK-TOPPA

こんにちは！Office163スタッフのあべちゃんです！今回は間隔の調整ができる点線や破線の作り方について共有したいと思います！この点線の間隔を広げたいのに、一緒にドットも大きくなっちゃう...違うそうじゃない...となったことのある方にお

tecktoppa.com

実装手順

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

.body {
  .my-price {
    & > * {
      margin: 0;
    }

    hr {
      background-image: radial-gradient(circle farthest-side, #ccc, #ccc 20%, transparent 20%, transparent);
      background-repeat: repeat-x;
      background-size: 10px 10px;
      border: 0;
      flex-grow: 1;
      height: 10px;
    }
  }
}

さいごに

今回紹介した方法を使えば、ブロックを活用して簡単にメニュー表を作成することができます。
Gutenbergエディターの操作に慣れれば、このようなデザインも手軽に作成できるでしょう。
また、作成したメニュー表をパターンとして登録しておけば、何度でも再利用できるため、効率的なサイト運営にも大いに役立ちます。