WordPress比較表セレクタ デモ

比較記事の表から気になるサービスだけを選び、横に並べて見比べられるようにする仕組みのデモです。既存の表のHTMLに、CSSクラスをひとつ追加するだけで動作します。

このデモについて

下の4つの表は、比較記事によくある形の表を想定した架空のデータです。サービス名・料金・数値はすべて架空のもので、実在する製品ではありません。

表のHTMLに加えた変更は、CSSクラス「cmp-select」をひとつ追加しただけです。チェック欄や並び替えの見出しは、ページを開いたときにJavaScriptが後から追加しています。

このデモにはテーマ固有のCSSを含めていないため、実際のサイトに組み込んだときよりも見た目は簡素になっています。

使い方

  1. 比べたいサービスの行で、左端のチェック欄にチェックを入れます（最大4件まで選べます）
  2. 2件以上チェックすると画面下にバーが表示されるので、「比較表を見る」を押します
  3. 商品が横、比較項目が縦に入れ替わった表が、元の表の下に表示されます

表1：架空レンタルサーバー比較

サービス名 月額料金 契約期間 無料お試し 提供元
ホシノサーバー 1,480円 1年 ○ ホシノネット
アオバホスティング 980円 6ヶ月 ○ アオバ通信
ツバメクラウド 2,200円 3ヶ月 × ツバメ技研
コダマサーバー 550円 2週間 ○ コダマ工房
ヤマビコホスト 1,480円 1ヶ月 × ヤマビコ社
ミナモサーバー 3,300円 1年 ○ ミナモ計画

表2：架空動画配信サービス比較

サービス名 月額料金 無料期間 作品数 ダウンロード
ルミナTV
申し込む		 990円 31日 2.5万 ○
そよかぜシアター
申し込む		 1,980円 14日 1.2万 ○
ヨゾラプレイ
申し込む		 550円 なし 8,000 ×
ハナミチ動画
申し込む		 2,600円 30日 3万 ○
ツキカゲプラス
申し込む		 790円 7日 6,500 ×

表3：架空モバイル回線比較

サービス 月額料金 契約期間 5G対応 提供会社
ミカヅキ 2,970円 なし ○ ミカヅキ通信
アマオト 990円 1年 ○ アマオト回線
カワセミ 3,278円 なし ○ カワセミネット
ヒバリ 1,078円 2年 × ヒバリ通信
ユキグニ 2,178円 6ヶ月 ○ ユキグニ回線

表4：架空クラウドストレージ比較

サービス 月額料金 お試し期間 無料プラン 運営元
ソラハコ 264円 30日 ○ ソラハコ社
クモノス 1,320円 14日 × クモノス技研
フワリ 550円 7日 ○ フワリ計画
タナグモ 2,640円 1ヶ月 × タナグモ堂
ハコニワ 110円 なし ○ ハコニワ社

設計のポイント