WordPressのテーブルブロックを使うと、料金・機能・営業時間など、行と列の関係がある情報を表で整理できます。追加時に列数と行数を決め、見出しセルと本文セルへ入力します。スマートフォンでは横幅が狭くなるため、情報を詰め込みすぎず、公開前に横スクロールと読み順を確認することが大切です。
テーブルブロックに向く情報
表に向くのは、列ごとに同じ項目を比べられる情報です。たとえば「プラン名・月額料金・容量」「曜日・営業時間・受付終了」のように、見出しと値の対応が明確なものです。読者は同じ行や列を追って違いを確認できます。
長い説明文、手順、注意事項をセルへ詰めると読みにくくなります。操作の順番は番号付きリスト、特徴の説明は見出しと段落、単なる横並びはカラムブロックを使う方が適切です。
表を作る前に列と行を決める
編集画面を開く前に、表が答える質問を一つ決めます。「3プランの料金と容量を比べる」が目的なら、列をプラン、行を料金や容量にする方法があります。逆に、列を項目、行を各プランにする方法もあります。
スマートフォンでは列が増えるほど狭くなります。最初は3〜4列以内を目安にし、補足説明は表の下へ出します。単位も見出しへ「料金（月額・税込）」のように書くと、各セルで繰り返さずに済みます。
テーブルブロックを追加する手順
- 投稿または固定ページの編集画面を開きます。
- 表を置きたい場所の「＋」を押します。
- 検索欄へ「テーブル」と入力します。
- 「テーブル」ブロックを選びます。
- 列数と行数を入力します。
- 「表を作成」を押します。
- 各セルへ見出しと値を入力します。
- 右上の「下書き保存」を押します。
列と行を逆に入力しても後から修正できますが、内容を入れた後の移動は手間がかかります。小さな下書きを紙やメモで作り、左上のセルから右へ読む形が自然か確認してから作成します。
ヘッダー行を表示する
表全体を選び、右側の設定欄にある「表の設定」を開きます。「ヘッダーセクション」を有効にすると、表の一番上へ見出し用の行が追加されます。「プラン」「料金」「容量」など、下の値が何を表すか入力します。
見出し行は太字になるだけでなく、読み上げ環境が表の構造を理解する助けになります。最初の行を見た目だけ太字にするより、用意されたヘッダー機能を使います。テーマによって設定名や表示は異なります。
フッター行を使う場面
「フッターセクション」を有効にすると、表の末尾へフッター行を追加できます。合計、注記、集計結果など、すべての行に関わる短い情報へ使えます。ただし、長い注意書きを一つのセルへ押し込む用途には向きません。
料金表の適用条件や免責事項は、表の直後に通常の段落で書く方がスマホでも読みやすくなります。フッターが不要なら無理に表示しなくて構いません。
一番上の行を太字にすれば見出しになると思っていました。
ヘッダー機能を使う方が、表の役割も伝わりやすいんですね。
そのとおりです。
見た目だけでなく、どのセルが見出しか分かる構造にすることが大切です。
料金の条件はセルへ詰めず、表の下に文章で書いてみます。
表がすっきりして、スマホでも読みやすくなりそうです！
良い判断です。
比較に必要な値と、判断を補う説明を分けて配置しましょう。
行や列を追加する方法
- 追加したい位置に近いセルをクリックします。
- テーブルのツールバーにある編集メニューを開きます。
- 「前に行を挿入」「後に行を挿入」など目的の操作を選びます。
- 追加された空のセルへ値を入力します。
- 見出しと単位がほかの行・列と一致するか確認します。
列を増やす前に、スマホ幅へ収まるかを考えます。新しい情報が補足なら、表の下へ箇条書きで追加する方が読みやすい場合があります。
行や列を削除する方法
削除したい行または列のセルを選び、テーブル編集メニューから「行を削除」または「列を削除」を選びます。操作対象が選択中のセルを基準に決まるため、値を確認してから押します。
間違えて削除した直後は、編集画面上部の「元に戻す」を押します。保存後に気づいた場合はリビジョンも利用できますが、ほかの変更まで戻る可能性があります。まず直前の操作で戻せるか確認してください。
セル内の文字をそろえる
セルを選び、ツールバーから左寄せ、中央、右寄せを設定できる場合があります。文章は左寄せ、短い数値は右寄せや中央寄せなど、情報の種類に合わせます。同じ列の値は同じ配置へそろえると比較しやすくなります。
すべてを中央へ寄せると長い文章が読みにくくなります。見た目の対称性より、視線が同じ位置から読み始められることを優先します。
表のスタイルを変更する
テーブル全体を選び、右側の「スタイル」からデフォルトやストライプなどを選べる場合があります。ストライプは行ごとの背景色が交互になり、横へ値を追いやすくなることがあります。
背景色と文字色の差が小さいと読めません。テーマの標準スタイルを基準にし、独自色を使う場合はヘッダー、本文、リンクのすべてを確認します。色だけに意味を持たせず、「おすすめ」などの文字も添えます。
表にリンクを入れる方法
セル内のリンクにする文字を選択し、ツールバーのリンクアイコンからURLを設定します。「詳細を見る」のような同じ文言が並ぶ場合は、「ライトプランの詳細」のようにリンク単独でも行き先が分かる文字にします。
リンク設定後はプレビューで一件ずつ押し、正しいページへ移動するか確認します。料金や商品名を更新したときは、古いリンクだけ残っていないかも見直します。
スマートフォンで表を確認する
- 編集画面のプレビューでモバイル表示を選びます。
- 見出しが1文字ずつ折り返していないか見ます。
- 表が画面全体を横へ押し広げていないか確認します。
- 左右へスクロールする表なら、その操作が分かるか確認します。
- リンクやボタンを押せるか試します。
- 実際のスマートフォンで表の最初から最後まで読みます。
表だけが内部で横スクロールする設計はありますが、ページ全体に横スクロールが出る状態は修正が必要です。列を減らす、見出しを短くする、長いURLを表示しない、補足を表の外へ出す順に見直します。
複雑な表を作らない判断
セルの結合、固定列、並べ替え、検索などが必要な表は、標準のテーブルブロックだけでは扱いにくい場合があります。最初からプラグインを増やす前に、本当にその機能が読者の判断に必要かを確認します。
情報量を減らして複数の小さな表へ分ける、重要な3項目だけを本文へ出す方法もあります。プラグインを使う場合は更新状況、対応環境、スマホ表示を検証環境で確認します。
表が崩れたときの確認
列幅が極端に狭い
列数と長い見出しを減らします。固定幅を指定した場合は初期値へ戻し、テーマの自動調整で確認します。
追加した行の位置が違う
操作直後なら元に戻し、目的の行にあるセルを選んでから「前」「後」を確認して再追加します。
スマホでページ全体が横へ動く
長いURL、改行されない英数字、固定幅の指定を探します。独自CSSを足す前に、原因のセルを一つずつ短くして切り分けます。
公開画面へ変更が出ない
更新を押したか確認し、公開URLを再読み込みします。別ブラウザでも開き、キャッシュと保存内容を比較します。
表を大きくするほど親切だと思っていましたが、比べる項目を絞る方が分かりやすいんですね。
長い条件は表の下に分けます！
はい。
読者が同じ行や列を追って判断できることが、表を使う一番の目的です。
ヘッダーを設定して、リンクも一件ずつ押してみます。
スマホでページ全体が横へ動いたら、列と長い文字から見直せば安心ですね！
その順番で進めれば大丈夫です。
表の見た目だけでなく、表を読んだ後に判断できるかまで確認しましょう。
WordPressをこれから始める方へ
テーブルブロックを使って記事を作るには、WordPressを動かす環境が必要です。これからサイトを用意する方や、現在の管理環境を見直したい方は、WordPress導入機能があるサーバーを候補にできます。すでに現在の環境で安定して運用できている方は、この記事を理由に乗り換える必要はありません。
エックスサーバー
WordPressクイックスタートに対応し、契約とWordPress設定をまとめて進められます。料金、契約期間、キャンペーン条件は公式ページで最新情報を確認してください。
エックスサーバーの公式ページを確認するまとめ
テーブルブロックは、行と列の関係がある情報を整理する機能です。目的を一つ決めて少ない列から作り、ヘッダー行へ項目名を設定します。行・列の追加や削除は対象セルを確認して行い、間違えた直後は元に戻します。公開前にはリンク、スマホ幅、ページ全体の横スクロールを確認してください。
よくある質問
表のセルを結合できますか？
標準ブロックでは利用できる機能が限られます。複雑な結合が必要か再検討し、見出しや小さな表へ分ける方法を先に試します。
料金表へ消費税込みと書く場所はどこですか？
すべて同じ条件なら「料金（月額・税込）」のように見出しへ入れるか、表の直後に条件を明記します。
表とカラムはどう使い分けますか？
同じ項目を行や列で比較するなら表、画像や説明など独立した内容を横並びにするならカラムが向きます。