簡単に、ブロックを使用して料金表を作成する方法

はじめに

プラグイン「Easy Pricing Tables」などを使わずに、WordPress標準のブロックを利用して簡単に料金表を作成します。

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

ダウンロード

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

<!-- wp:columns {"className":"my-price"} -->
<div class="wp-block-columns my-price"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"title","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center title">★<br>ベーシック</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center">本体価格:<span class="fz-20px"><strong>150,000円</strong></span></p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"注文","align":"center","width":"50"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="" class="btn has-custom-width cocoon-block-button__width-50" target="_self" rel="noopener">注文</a></div>
<!-- /wp:cocoon-blocks/button-1 -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>CMOSセンサー</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>最大約3250万画素</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"title","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center title">★★★<br>スタンダード</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center">本体価格:<strong><span class="fz-20px">250,000円</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"注文","align":"center","width":"50"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="" class="btn has-custom-width cocoon-block-button__width-50" target="_self" rel="noopener">注文</a></div>
<!-- /wp:cocoon-blocks/button-1 -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>フルサイズCMOSセンサー</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>最大約2420万画素</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>5軸対応、最大8.0段の手ブレ補正効果</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"className":"title","style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center title">プレミアム</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"typography":{"textAlign":"center"}}} -->
<p class="has-text-align-center">本体価格:<strong><span class="fz-20px">700,000円</span></strong></p>
<!-- /wp:paragraph -->

<!-- wp:cocoon-blocks/button-1 {"content":"注文","align":"center","width":"50"} -->
<div class="wp-block-cocoon-blocks-button-1 aligncenter button-block"><a href="" class="btn has-custom-width cocoon-block-button__width-50" target="_self" rel="noopener">注文</a></div>
<!-- /wp:cocoon-blocks/button-1 -->

<!-- wp:list -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>フルサイズ裏面照射積層CMOSセンサー</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>最大約2410万画素</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:html -->
<style data-wp-block-html="css">
:root {
  --my-column: 3;                 /* 3列 */
  --my-row: 4;                    /* 4項目 */
  --my-title-bgcolor: #ffcc80;    /* タイトル背景カラー */
  --my-border-color: #ff9800;     /* 罫線カラー */
}

@media (max-width: 480px) {
  :root {
    --my-column: 1;
  }
}

.my-price {
  column-gap: 0;
  display: grid !important;
  grid-template-columns: repeat(var(--my-column), 1fr);
  row-gap: 30px;

  @media (max-width: 480px) {
    ul {
      display: none;
    }
  }

  .wp-block-column {
    background-color: #fff;
    box-shadow: 0 0 0 1px var(--my-border-color);
    display: grid !important;
    grid-row: span var(--my-row);
    grid-template-rows: subgrid;
    position: relative;

    & > * {
      margin-bottom: 0;
      width: 100%;

      &:not(ul) {
        padding: 0 10px;
      }
    }

    &:nth-child(2) {
      box-shadow: 0 0 0 3px var(--my-border-color);
      z-index: 1;
    }
  }

  .title {
    background-color: var(--my-title-bgcolor);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}
</style>
<!-- /wp:html -->

<!-- wp:columns {"className":"my-price2","style":{"spacing":{"padding":{"top":"0px","bottom":"0px","left":"0px","right":"0px"}}}} -->
<div class="wp-block-columns my-price2" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:table {"hasFixedLayout":false,"align":"full","className":"is-style-stripes"} -->
<figure class="wp-block-table alignfull is-style-stripes"><table><thead><tr><th class="has-text-align-center" data-align="center">タイトル</th></tr></thead><tbody><tr><td class="has-text-align-center" data-align="center">機能A</td></tr><tr><td class="has-text-align-center" data-align="center">機能B</td></tr><tr><td class="has-text-align-center" data-align="center">機能C</td></tr><tr><td class="has-text-align-center" data-align="center">機能D</td></tr></tbody></table></figure>
<!-- /wp:table --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:table {"hasFixedLayout":false,"align":"full","className":"is-style-stripes"} -->
<figure class="wp-block-table alignfull is-style-stripes"><table><thead><tr><th class="has-text-align-center" data-align="center">スタンダード<br>おすすめ</th></tr></thead><tbody><tr><td class="has-text-align-center" data-align="center">機能A</td></tr><tr><td class="has-text-align-center" data-align="center">機能B</td></tr><tr><td class="has-text-align-center" data-align="center">機能C</td></tr><tr><td class="has-text-align-center" data-align="center">機能D</td></tr></tbody></table></figure>
<!-- /wp:table --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:table {"hasFixedLayout":false,"align":"full","className":"is-style-stripes"} -->
<figure class="wp-block-table alignfull is-style-stripes"><table><thead><tr><th class="has-text-align-center" data-align="center">タイトル</th></tr></thead><tbody><tr><td class="has-text-align-center" data-align="center">機能A</td></tr><tr><td class="has-text-align-center" data-align="center">機能B</td></tr><tr><td class="has-text-align-center" data-align="center">機能C</td></tr><tr><td class="has-text-align-center" data-align="center">機能D</td></tr></tbody></table></figure>
<!-- /wp:table --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:html -->
<style data-wp-block-html="css">
:root {
  --my-title-bgcolor2: #05384d;   /* タイトル背景カラー */
  --ribbon-bgcolor2: #ff0000;     /* リボン背景カラー */
}

.my-price2 {
  align-items: flex-end !important;
  column-gap: 0;
  row-gap: 30px;

  thead,
  th,
  td {
    border: 0 !important;
  }

  .wp-block-column {
    background-color: #fff;
    box-shadow: 0 0 0 1px #f0f0f0;

    &:nth-child(2) {
      box-shadow: 0 0 0 3px var(--my-title-bgcolor2);
      z-index: 1;

      th::before {
        background-color: var(--ribbon-bgcolor2);
        color: #fff;
        content: 'リボン';
        display: block;
        font-size: 10px;
        position: absolute;
        right: -33px;
        text-align: center;
        top: 10px;
        transform: rotate(45deg);
        width: 100px;
      }
    }
  }
}

.body .my-price2 th {
  background-color: var(--my-title-bgcolor2) !important;
  border: 0;
  color: #fff !important;
  overflow: hidden;
  position: relative;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #f0f0f0 !important;
}
</style>
<!-- /wp:html -->

完成イメージ

カラム数が4以上のとき、3列で折り返し表示となります。
画面幅が480px以下のとき、リストが非表示となります。また、3→1列表示となります。

実装手順

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

参考：「テーブル」ブロックによる実装方法

各カラムに「テーブル」ブロックを使用した例を示します。
この場合、各カラムの行が揃うように、工夫が必要です。
画面幅が781px以下の場合、3→1列表示となります。

完成イメージ

実装手順

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

:root {
  --my-title-bgcolor: #05384d;   /* タイトル背景カラー */
  --ribbon-bgcolor: #ff0000;     /* リボン背景カラー */
}

.my-price {
  align-items: flex-end !important;
  column-gap: 0;
  row-gap: 30px;

  thead,
  th,
  td {
    border: 0 !important;
  }

  .wp-block-column {
    background-color: #fff;
    box-shadow: 0 0 0 1px #f0f0f0;

    &:nth-child(2) {
      box-shadow: 0 0 0 3px var(--my-title-bgcolor);
      z-index: 1;

      th::before {
        background-color: var(--ribbon-bgcolor);
        color: #fff;
        content: 'リボン';
        display: block;
        font-size: 10px;
        position: absolute;
        right: -33px;
        text-align: center;
        top: 10px;
        transform: rotate(45deg);
        width: 100px;
      }
    }
  }
}

.body .my-price th {
  background-color: var(--my-title-bgcolor) !important;
  border: 0;
  color: #fff !important;
  overflow: hidden;
  position: relative;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: #f0f0f0 !important;
}

さいごに

今回紹介した方法を使えば、プラグインなしでGutenbergエディターを活用し、シンプルで見栄えの良い料金表を作成することができます。
この方法はWordPressの標準機能を活用しているため、他のテーマでも利用可能です。