メリット・デメリット比較ボックスの作り方｜標準ブロックとCSSの使い分け

メリット・デメリットの比較欄は、WordPress標準のカラムとリストから作れます。同じ入力欄と見た目を複数の記事で使い回したい場合に、この記事の配布例を検討してください。

• 「商品の良さと悪さを分かりやすく伝えたい…」
• 「テーマ標準のリストやボックス機能ではデザインが地味で弱い…」
• 「比較表を作るために重いショートコードプラグインは避けたい…」

比較欄の見た目を記事ごとに組み直さず、入力欄へ項目を入れて使い回せるようにした実装です。

完成デモ：良い点と注意点を同じ条件で並べる

メリットだけでなく、向かない使い方や追加費用も並べると、読者が自分に合うか判断しやすくなります。

Repeaterで項目を追加・削除します。数をそろえるために内容を増やすより、判断に関わる項目を優先しましょう。

項目数や文章の長さで全体の高さは変わります。長い説明を入れた場合は、スマホで列の対応を見失わないか確認してください。

1. スクロールに合わせたリッチなフェードインアニメーション

実装にはJavaScriptのIntersectionObserverを使っています。中身はこれだけです。

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('is-revealed');
      obs.unobserve(entry.target); // 一度発火したら監視をやめる
    }
  });
}, { threshold: 0.15 });

ポイントはthreshold: 0.15とobs.unobserve()の2つです。

threshold: 0.15は「ボックスが画面内に15%入った時点で発火する」という意味です。
0（少しでも見えたら）や1（完全に見えたら）だと感覚的に早すぎたり遅すぎたりしたので、実際に何度もスクロールして試した上でこの数値に落ち着きました。

unobserve()を呼んでいるのは、一度表示されたボックスに何度もイベントを発火させないための省エネ対策です。
スクロールのたびに判定するscrollイベント監視より、この書き方のほうが動作が軽いというのも採用した理由です。

2. 項目の追加方法と、配布JSONの動作条件

「リピーター（Repeater）」コントロールを使用しています。メリットやデメリットの数が3つでも5つでも、ブロックエディタ上から「＋」ボタンをクリックするだけで簡単に行を追加でき、コーディングの知識は一切不要です。

正直に書いておくと、このブロックが使っているコントロールはPanel・Repeater・Rich Text・Textの4種類だけです。
ただし、このうちPanelはPro版限定のコントロールでした。

以前ここに「このブロック単体を動かすだけならPro版のライセンスは不要です」と書いていました。これは誤りでした。訂正します。

理由は2つあります。ひとつは上のPanel。
もうひとつは、このボックスの配色やレイアウトを決めているCSSを、ブロック定義の「Styles & Scripts」欄に置いていることです。

無料版プラグインのソースを確認したところ、この欄の値を保存する処理はあるものの、ページへ出力する処理は無料版に存在しませんでした。
つまり無料版で読み込むと、箇条書きが2つ並ぶだけの見た目になります。

導入のハードルを実際より高く見せたくない、という気持ちで前回書き換えたのですが、確認が足りていませんでした。
正確には、このJSONをそのまま使うにはPro版が必要です。

（条件分岐やパネルでの整理など、Pro版があると編集画面まわりが快適になる話はLazy Blocks使い方完全ガイドにまとめています）

もう1つ、デモ画面だけでは気づきにくい仕様があります。

実はこのブロックにはbox_title（ボックス全体の見出し）・pros_label（メリット列の見出し文言）・cons_label（デメリット列の見出し文言）という3つのTextコントロールも用意されています。
デフォルトでは「メリット」「デメリット」という文言ですが、投稿編集画面の右サイドバー（インスペクター）からここを書き換えるだけで、「良い点」「気になる点」のように自分の言葉に変更できます。

3. スマホでの並び方と配色を確認する

PCでは左右に並ぶ2カラムですが、スマートフォン（画面幅767px以下）では自動で縦並びに切り替わるようCSSで調整しています。

ヘッダーとアイコンにはグラデーションを使い、マウスを乗せたときの動き（transform: translateX(8px)）も入れてあります。

「既存プラグイン」との差別化

標準のカラムとリストでも比較欄は作れます。複数記事で同じ入力欄と見た目をそろえたい場合に、この専用ブロックを検討します。

専用欄へ入力するとアイコン付きのリストを出力します。一項目に一つの判断材料を書くと、比較の軸が読み取りやすくなります。

さらにRich Textコントロールを採用しているため、リスト内の一部の単語だけ太字にするといった文字装飾も自由自在です。

実際のコードを覗いてみる

ダウンロードしたJSONをインポートすれば動きますが、中身がブラックボックスのままだと不安な方もいると思うので、フロント出力に使っているPHPコードをそのまま載せておきます。

<?php
$title      = $attributes['box_title'] ?? '';
$pros       = $attributes['pros_list'] ?? [];
$cons       = $attributes['cons_list'] ?? [];
$pros_label = !empty($attributes['pros_label']) ? $attributes['pros_label'] : 'メリット';
$cons_label = !empty($attributes['cons_label']) ? $attributes['cons_label'] : 'デメリット';
?>

<div class="pcb-box pcb-reveal-hook">
    <?php if ( !empty($title) ) : ?>
        <div class="pcb-title"><?php echo esc_html($title); ?></div>
    <?php endif; ?>

    <div class="pcb-card">
        <div class="pcb-header">
            <div class="pcb-h-item"><?php echo esc_html($pros_label); ?></div>
            <div class="pcb-h-item"><?php echo esc_html($cons_label); ?></div>
        </div>
        <!-- pros/cons それぞれ foreach でリピーターの行を回してliを出力 -->
    </div>
</div>

見ての通り、特別な仕掛けはありません。

$attributes['box_title']のように、Controlsタブで設定したコントロールのnameが、そのまま連想配列のキーになって渡ってくるだけです。
ここが分かっていると、Lazy Blocksで自作ブロックを作るときの取っ掛かりになると思います。

コントロールの型ごとの詳しい仕様はLazy Blocks使い方完全ガイドにまとめています。

配色を自分のブログに合わせて変える

ヘッダーとカード背景のグラデーションは、CSSに直書きした固定値です。
編集画面から色を選ぶUIは用意していません。

変えたい場合は、Lazy Blocks管理画面でこのブロックを開き、「Style (Block)」タブ内の次の2箇所を書き換えてください。

.pcb-header { background: linear-gradient(90deg, #61b28f 0%, #61b28f 35%, #e07a7a 65%, #e07a7a 100%); }
.pcb-body { background: linear-gradient(90deg, #f0f9f6 0%, #f0f9f6 35%, #fff5f5 65%, #fff5f5 100%); }

#61b28f（緑寄り＝メリット側）と#e07a7a（赤寄り＝デメリット側）の2色を、サイトのテーマカラーに合わせて置き換えるだけです。

.pcb-body側は、同じ位置に薄い色（背景用）を置くのがコツです。
ここだけ濃い色にすると文字が読みにくくなるので注意してください。

試しに、緑・赤の配色を青×紫のグラデーションに変えてみたのが以下です。

CSSの2行を書き換えるだけで、雰囲気がここまで変わります。

現状の制限・非対応な点

導入前に、列数・アイコン・アニメーションの変更範囲を確認します。入力欄で変えられる項目と、PHPやCSSの修正が必要な項目を分けておくと運用しやすくなります。

• 列数は2列固定です。「メリット・デメリット・注意点」のような3列構成にしたい場合は、PHPのpcb-body内にもう1列分のマークアップを追記し、CSSの.pcb-header・.pcb-bodyのグラデーション区切り位置（35%/65%の数値）も3等分に調整し直す必要があります。
• アイコンの形（チェック/バツ）は固定です。インラインSVGで直書きしているため、形を変えたい場合はPHPコード内のSVGタグそのものを書き換える必要があります。
• フェードインアニメーションは1回きりです。先述の通り一度表示されたらunobserve()で監視を止めるため、ページ内を上下にスクロールし直しても再アニメーションはしません（意図的な仕様です）。

標準ブロックから作る、比較欄の最小構成

目的	選び方
2列で良い点と注意点を見せる	カラム内へ見出しとリストを置き、スマホは縦に読める形にする。
テーマにボックスがある	標準のボックスやレビュー欄を使い、背景・枠・文字色の設定から調整する。
複数記事で入力項目をそろえる	パターンや独自ブロックを比較。変更が他の記事にも反映されるかを確認する。

WordPressのカラムブロックへ二つの見出しとリストを入れれば、追加の購入なしで比較欄を試せます。装飾より先に内容を整え、同じ対象の良い点と制約を近くに置きましょう。

CSSで色を変える場合は、対象ボックス固有のクラスを使い、サイト全体のリストへ影響させないようにします。色だけで良否を表さず「良い点」「注意点」の文字を付け、文字と背景のコントラストを確認します。

公開前は空欄・長文・項目数の違い、スマホでの順序を確認します。左右を同じ件数にするために薄い内容を増やさず、「どんな利用条件でメリットになるか」まで一項目に書くと、読者が自分に当てはめやすくなります。

この配布版では配色をCSSで管理し、列数は2列です。テーマのボックス設定を変えても同じように反映されるとは限りません。装飾が変わらない時はCSSの管理場所、キャッシュ、優先順位を順に切り分けてください。

配布用JSONファイルダウンロード

JSONを読み込み、実際の比較対象で良い点と注意点を二つずつ入れてみてください。PCとスマホで読めることを確認してから、他の記事へ展開します。

入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。

配布データの動作条件と読み込み手順

この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。

CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。

• 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
• 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
• 見出し・本文・画像・URLを自分の内容へ置き換える。
• PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
• 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。

設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。