比較表を価格順に並べ替えるなら、表示する金額と計算用の数値を分けます。公開前に行を整える操作と、読者が表を操作するソートは別です。デモで並び順とスマホ表示を確認してから、自分のデータへ置き換えます。
この配布JSONのソート・横スクロール・固定列は、Styles & Scripts（Pro）にあるCSS・JavaScriptで実装しています。入力コントロールだけを無料版へ読み込んでも同じ動作にはならないため、既存環境の出力機能を確認してください。
まだLazy Blocksを使ったことがない方はLazy Blocks使い方完全ガイドから始めてみてください。
- 「複数の商品を比較して魅力を伝えきれない…」
- 「スマホで見ると表が崩れて読みにくい…」
- 「読者が知りたい順に並び替え（ソート）機能が欲しい…」
まずデモの価格見出しを押し、安い順・高い順の切り替えと、スマホでの横スクロールを確認してみてください。
完成デモ：並べ替えとスマホ表示を確認する
この表では、読者が重視する条件で商品を並べ替えられます。見た目を整える前に、料金の税込・税別や契約期間など、比較する数値の条件をそろえることが大切です。
月額と年額を混ぜたまま並べると、安い順でも正しい比較になりません。表示する金額の前提を表の近くに書いておきましょう。
| アイテム / 製品 | 主要機能・特徴 | 詳細・チェック | ||
|---|---|---|---|---|
|
おすすめ第1位
架空プラグインA
|
無料
基本機能は
すべて無料 |
|
公式サイトへ （架空プラグインA・新しいタブで開く） | |
|
コスパ最強
架空プラグインB
|
¥9,800
買い切り型
追加費用なし |
|
詳細を見る （架空プラグインB・新しいタブで開く） | |
|
注目機能あり
架空プラグインC
|
¥500 / 月
いつでも解約可能なサブスク
|
|
無料体験する （架空プラグインC・新しいタブで開く） |
1. 読者が自由に並び替えできる「ソート機能」
評価順や価格順など、読者が求める基準で瞬時に比較表を並び替えることが可能です。
見出しを押すと並び順が変わります。導入後は、数値が小さい順・大きい順に並ぶかをサンプルデータで確認してください。
2. スマホ対応＆1列目固定の「ユーザビリティ」
情報量が多くなりがちな比較表ですが、横スクロールに対応し、さらに1列目のアイテム名と画像をSticky機能で常に固定表示させています。
固定列は比較対象を追いやすくする補助です。スマホでは固定列が幅を取りすぎず、残りの条件も読めるかを実際の文章で確認します。
3. 比較結果の次に置くボタンと補足文
「おすすめ第1位」などを直感的にアピールできる3種類のバッジ（リボン、プライスタグ、グラス）や、自動で光るシャインアニメーション付きのCTAボタンを標準搭載。
また、読者の現在位置を明確にする「ホバーインジケーター」機能も搭載。
CTAには、遷移先で確認できる情報を記載します。ランキングや評価を載せる場合は、選定基準と確認日も本文に添えてください。
「既存プラグイン」との差別化
並べ替えを使わない小さな表なら、テーマ標準の表で足りる場合があります。項目数が多く、読者が条件を変えて比較する必要があるときに、この実装を選びます。
並べ替えでは、画面に見せる文字列と計算用の数値を分けるのがポイントです。
const aVal = parseFloat(aCol.getAttribute('data-sort-value')) || 0;
const bVal = parseFloat(bCol.getAttribute('data-sort-value')) || 0;
rows.sort((a, b) => (aVal > bVal ? 1 : -1) * direction);
rows.forEach(row => tbody.appendChild(row)); // 既存の行をそのまま並び替える「¥9,800」のような表示用の文字列をそのまま比較すると、桁数の違いで正しく並び替えられません。
このブロックは表示用テキストとは別にdata-sort-valueという数値専用の属性を持たせていて、そちらを基準にソートしています。
実際に「価格」の見出しをクリックすると、無料→¥500→¥9,800の順にきちんと並び替わります。
見出しはrole="button"とtabindexを付与し、Enterキーやスペースキーでも操作できるようにしてあります。
マウスを使わないユーザーにも配慮した作りです。
「横にスクロールできます」というヒント表示も、常に出すのではなくtable.scrollWidth > container.clientWidthを毎回チェックして、実際にはみ出しているときだけ表示する仕組みです。
編集時の並べ替えと、読者が操作するソートを分ける
| 目的 | 選び方 |
|---|---|
| 公開前に行を並べたい | 表の編集やスプレッドシートで順番を整えてから掲載する。 |
| 閲覧中に価格順を変えたい | JavaScriptなどで行を並べ替える機能が必要。この配布表は数値のソートを想定する。 |
| 条件に合う行だけを見せたい | 絞り込み機能が必要。並べ替えとは別に、条件と非表示の扱いを設計する。 |
最初に列名、単位、比較する期間、価格の税込・税別を統一します。表を作成後にCSSとJavaScriptを追加する方式もありますが、標準テーブルの内部HTMLだけを書き換えるとブロックの検証エラーにつながる場合があります。編集方式を途中で混ぜず、元の表を複製して試します。
このサンプルの数値処理は、値を読み取れない場合に0として扱います。そのため「要問い合わせ」や空欄をそのまま混ぜると、無料と同じ位置へ並ぶ可能性があります。欠損値を末尾に送るなどの仕様が必要なら、ソート処理を別途修正してください。
同じ価格の行、負の数、小数、桁の違う数値、文字列が混じる行を試します。表示用の「9,800円」と計算用の9800は分け、昇順と降順の両方で順番が正しいか確認します。文字順や日付順が必要なら、その形式に対応する実装を選ぶ必要があります。
スマホでは横スクロール、固定列の幅、見出しの対応を確認します。矢印や並び順の説明を付け、キーボードでも操作できるか、JavaScriptが動かない時も元の表を読めるかを点検します。絞り込みや大量行のページ分割が必要な場合は、対応する表ツールも比較してください。
配布用JSONファイルダウンロード
JSONを読み込んだら、無料・500円・9,800円などのテスト値で順番を確認します。確認後に実データへ置き換え、各ボタンの商品名と遷移先が一致するかを見てください。
入力欄やJSONの扱いが分からない場合は、ブロックの設定・インポート手順を参照してください。既存の環境に合うか、検証用ページで確かめてから使用します。
配布データの動作条件と読み込み手順
この記事のJSONは、記載した環境向けのブロック定義です。プラグイン本体のZIPとは別のファイルです。動作条件を確認し、バックアップを取ったうえで検証用ページへ読み込んでください。
CSS・JavaScriptをStyles & Scriptsで管理している配布物は、その出力機能が必要です。入力コントロールが無料版に含まれていても、同じ見た目や動作が再現できるとは限りません。条件が合わない場合は、標準ブロックや無料版向けの配布データを確認できます。
- 配布ページからJSONを保存し、ブロック管理画面のExport / Importで読み込む。
- 一覧に追加された定義を確認し、テスト記事へ一つ配置する。
- 見出し・本文・画像・URLを自分の内容へ置き換える。
- PC・スマホで長文、空欄、クリック、開閉などの動作を確認する。
- 問題がある場合は重ねてインポートせず、読み込み状態とCSS・JavaScriptの出力を確認する。
設定方法はブロック設定の技術ガイドにまとめています。配布物についての連絡はお問い合わせページをご利用ください。
