2024.4.12|テーマをVer4.1.5.5にアップデートしました
ブロックパーツ

比較表の作り方(1.スタンダードな比較表)

この記事は約4分で読めます。

完成形



VIERA TH-49GX850


VIERA TH-49GX750


VIERA TH-49GX500
メーカー
パナソニックパナソニックパナソニック
サイズ
49インチ49インチ49インチ
満足度
価格

¥132,800

¥107,800

¥86,634
1インチあたり

¥2,710

¥2,200

¥1,768
公式サイト公式サイト公式サイト

完成形(編集画面)

比較表の作成手順

STEP1. テーブルを挿入する

編集画面上にあるのアイコンをクリックしてテーブルを挿入します。

テーブルを挿入するとカラム数(列数)と行数の入力画面が表示されるので、作成したい表に合わせて数値を入力して表を作成をクリックします。

列と行は後から追加・削除できるので、作成時は適当で構いません。

表を作成をクリックすると以下のように編集画面内にテーブルが挿入されます。

STEP2. ヘッダーとフッターを追加する

今回作成する比較表は以下のように3つのエリア(ヘッダー・ボディ・フッター)で構成されています。

テーブル挿入時はボディのみの表示になりますので、右側の管理パネルにある「表の設定」でそれぞれのセクションを有効にします。

ヘッダーとフッターのセクションを有効にすると以下のようにそれぞれのエリアが追加されます。

STEP3. ヘッダーを作成する

ヘッダーにランキングのアイコンと商品画像、商品名をそれぞれ入力していきます。

ランキングのアイコンを挿入する

ランキングのアイコンはツールバーから挿入することができます。

ランキングの順位やサイズ変更については以下のページを参照ください。

画像を挿入する

テーブルに画像を挿入する場合はツールバーのインライン画像をクリック後、画像を選択して挿入します。

画像のサイズ調整

画像を挿入した後に画像を選択すると数値を入力する欄が表示されるので、適宜サイズを調整します。

商品名の入力

商品名は普通にテキストで入力します。

STEP4. ボディに値を入力する

ヘッダーを作成し終えたらボディに値を入力していきます。

行の追加(または削除)

テーブル作成時の行数から行を追加する場合はツールバーから適宜追加することができます。

ツールバーの操作で行だけでなく列の追加や削除もできます。

記号(マルバツ/評価数)を挿入する

記号はそれぞれショートコードを入力していきます。

ショートコードについて詳しくは以下のページを参照ください。

文字列を中央寄せにする

対象の列を選択してツールバーで「カラムを中央配置」を適用すると文字列を中央に配置することができます。

STEP5. フッターにボタンを配置する

フッターにボタンを配置する場合は以下の手順で配置します。

フッターにボタンを配置する手順
  • ボタンに表示するテキストを入力
  • テキストを選択してツールバーでボタンを適用する
  • リンクを挿入する

ボタンを適用した後に色を変更する場合

ボタンを適用した後に色を変更する場合は以下の手順で変更します。

ボタンを適用した後に色を変更する場合
  • ボタン化したテキストを選択する
  • 現在適用しているカラーを選択(ここで一旦リセットする)
  • 新たなボタンカラーを選択する

ボタンの文字列を太字にする

ボタンの文字列を太字にする場合は文字列を選択してツールバーのBをクリックします。

太字を元に戻したい場合は同様の操作でリセットすることができます。

フッターにボタンを追加する場合

ボタンを1つだけでなく複数設置したい場合はセル内で改行し、ボタンを配置する手順と同様の流れで追加します。

STEP6. スタイルを調整する

テーブルのスタイルは右側の管理パネルで調整することができます。

テーブルのスタイル

お手軽スタイル設定

テーブル全体のフォントサイズを設定する場合に使用します

ヘッダーを固定する

ページをスクロールした時にヘッダーを画面上部に固定します

比較表として使う

ヘッダーとフッターの背景色を透明にして画像やボタンを配置しても違和感のないスタイルを適用します

奇数行を見出し化する

テーブルボディの奇数行のセルを結合して見出し化します ※見出しは1列目に入力すること


このページの説明は以上です。