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

Cocoonカスタマイズ
この記事は約22分で読めます。
記事内に広告が含まれています。

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

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

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">本体価格:<span class="fz-20px"><span class="bold">150,000円</span></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 {"align":"center","className":"title"} -->
<p class="has-text-align-center title">★★★<br>スタンダード</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">本体価格:<span class="bold"><span class="fz-20px">250,000円</span></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>最大約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 {"align":"center","className":"title"} -->
<p class="has-text-align-center title">プレミアム</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">本体価格:<span class="bold"><span class="fz-20px">700,000円</span></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>最大約2410万画素</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

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

@media (width <=480px) {
  :root {
    --my-column: 1;
  }
  .my-price ul {
    display: none;
  }
}

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

.my-price .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;
}

.my-price .wp-block-column > *:not(ul) {
  padding: 0 10px;
}

.my-price .wp-block-column > * {
  margin-bottom: 0;
  width: 100%;
}

.my-price .wp-block-column:nth-child(2) {
  box-shadow: 0 0 0 3px var(--my-border-color);
  z-index: 1;
}

.my-price .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":"15px","bottom":"15px","left":"15px","right":"15px"}}}} -->
<div class="wp-block-columns my-price2" style="padding-top:15px;padding-right:15px;padding-bottom:15px;padding-left:15px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:table {"className":"is-style-stripes"} -->
<figure class="wp-block-table 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 {"className":"is-style-stripes"} -->
<figure class="wp-block-table 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 {"className":"is-style-stripes"} -->
<figure class="wp-block-table 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>
:root {
  --my-title-bgcolor2: #05384d;   /* タイトル背景カラー */
  --ribbon-bgcolor: #ff0000;      /* リボンカラー */
}

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

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

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

.my-price2 .wp-block-column:nth-child(2) {
  box-shadow: 0 0 0 3px var(--my-title-bgcolor2);
  z-index: 1;
}

.my-price2 .wp-block-column:nth-child(2) 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;
}

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

.my-price2 thead,
.my-price2 th,
.my-price2 td {
  border: 0!important;
}
</style>
<!-- /wp:html -->

はじめに

プラグイン「Easy Pricing Tables」などを使わずに、ブロックを利用して簡単に料金表を作成します。
この記事では、この方法について説明します。

完成イメージ

★
ベーシック

本体価格:150,000円

注文
  • CMOSセンサー
  • 最大約3250万画素

★★★
スタンダード

本体価格:250,000円

注文
  • フルサイズCMOSセンサー
  • 最大約2420万画素
  • 5軸対応、最大8.0段の手ブレ補正効果

プレミアム

本体価格:700,000円

注文
  • フルサイズ裏面照射積層CMOSセンサー
  • 最大約2410万画素

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

実装手順

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

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

    図1に示すように、4項目で構成されます。
    表1に、各追加CSSクラスを示します。
    各項目の文字サイズ、色などは、Gutenbergエディターで設定します。

    追加CSSクラス
    ブロック項目追加CSSクラス備考
    カラム料金表全体my-price図1①
    カラム　
    段落見出しtitle図1②
    段落料金
    ボタンボタン
    リスト説明
    スクロールできます
  • ラベル
    CSSを追加

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

    :root {
  --my-column: 3;                 /* 3列 */
  --my-row: 4;                    /* 4項目 */
  --my-title-bgcolor: #ffcc80;    /* タイトル背景カラー */
  --my-border-color: #ff9800;     /* 罫線カラー */
}

@media (width <=480px) {
  :root {
    --price: 1;
  }
  .my-price ul {
    display: none;
  }
}

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

.my-price .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;
}

.my-price .wp-block-column > *:not(ul) {
  padding: 0 10px;
}

.my-price .wp-block-column > * {
  margin-bottom: 0;
  width: 100%;
}

.my-price .wp-block-column:nth-child(2) {
  box-shadow: 0 0 0 3px var(--my-border-color);
  z-index: 1;
}

.my-price .title {
  background-color: var(--my-title-bgcolor);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

参考：「テーブル」ブロックを使用した例

タイトル
機能A
機能B
機能C
機能D
スクロールできます
スタンダード
おすすめ
機能A
機能B
機能C
機能D
スクロールできます
タイトル
機能A
機能B
機能C
機能D
スクロールできます
完成イメージ

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

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

}

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

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

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

.my-price .wp-block-column:nth-child(2) {
  box-shadow: 0 0 0 3px var(--my-title-bgcolor);
  z-index: 1;
}

.my-price .wp-block-column:nth-child(2) 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;
}

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

.my-price thead,
.my-price th,
.my-price td {
  border: 0!important;
}

さいごに

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

クリップボードにコピーしました

本スキンはメニューを選択するだけで簡単にSWELL風の見出しに変更できます。
また、サイトのカラー、SWELL風の動画ヘッダーも簡単に設定できるので、マニュアルを読んでくださいね。