比較表の縦横切替

この機能の概要

項目内容
できること比較表を「縦型(カードが横に並ぶ形)」と「横型(行が並ぶ表形式)」のどちらで表示するか、ページごとに選べる
管理画面の場所比較表用の固定ページ編集画面の右サイド、メタボックス「比較表の表示形式」
作業する人比較表を作成・編集する人

縦型と横型の違い

種類見た目向いている用途
縦型商品ごとのカードが横方向に並ぶ(1商品=1枚のカード)商品数が少なく、写真や説明を大きく見せたいとき
横型商品ごとの行が縦に並ぶ、通常の表形式比較項目が多く、一覧性を重視したいとき(横スクロールで見る)

設定手順

  1. WordPress管理画面 →「固定ページ」→ 対象の比較表ページ(ranktable または ranktable01〜05)を開く
  2. 本文にブロックを挿入 →「パターン」→「比較表」から比較表(縦)と比較表(横)の両方を追加する(すでに両方入っている場合はこの手順は不要)
  3. 編集画面右サイドの「比較表の表示形式」というボックスを探す
  4. 「縦」または「横」のどちらかを選ぶ
  5. 「更新」を押して保存する

保存すると、フロント(表に見えるサイト側)には選んだ方だけが表示されます。選ばなかった方は非表示になりますが、本文からは削除されません(あとでいつでも切り替え直せます)。

注意点

本文に片方しか入っていない場合、この設定は効きません。

「比較表(縦)」と「比較表(横)」の両方が本文にそろって初めて、ラジオボタンでの切り替えが機能します。片方しか無い場合は、入っている方がそのまま表示されます。

ブロックの中身は編集画面でそのまま編集できます。

縦型・横型どちらのパターンも、通常のブロック(見出し・画像・段落)でできているため、商品名や画像、比較項目のテキストは編集画面上で直接書き換えられます。


困ったときの確認先

症状まず確認すること
「縦」「横」を切り替えても表示が変わらない本文に「比較表(縦)」「比較表(横)」の両方が入っているか確認する
矢印やドットで送るスライド表示にしたい現時点では未実装の機能です。制作担当に相談してください
横型が画面からはみ出す横スクロールで見る仕様です(別途、詰めて表示するかスクロールにするかは「サイト表示設定」側の設定を確認)

上記で解決しない場合は、「どのページで」「何をしたら」「どうなったか」の3点を添えて制作担当に連絡してください。