WordPressに営業時間などの簡単な表を入れる方法

営業時間や対応内容を、文章で並べると比べにくいことがあります。そんなときは2列程度の簡単な表が便利です。クラシックエディターで、下のHTMLを貼り付けて表を作り、文字を書き換える方法を紹介します。追加プラグインは使いません。

1．表のコードを本文に貼り付ける

1. 記事を開き、本文の「コード」に切り替えます。
2. 表を入れたい場所に、下のコードをまとめて貼り付けます。既存の文章を選択したまま貼り付けないようにします。
3. 「ビジュアル」に戻すと表になります。

<table><caption>営業時間の記載例（架空の店舗）</caption><thead><tr><th scope="col">曜日</th><th scope="col">営業時間</th></tr></thead><tbody><tr><th scope="row">平日</th><td>10:00〜18:00</td></tr><tr><th scope="row">土曜</th><td>10:00〜15:00</td></tr><tr><th scope="row">日曜・祝日</th><td>休み</td></tr></tbody></table>

この営業時間は架空の記載例です。ご自身の実際の営業内容へ書き換えてから公開してください。

2．表の文字を編集する

1. 表の中の文字をクリックし、曜日や時間を書き換えます。
2. 見出しの「曜日」「営業時間」も、表に合う項目名にします。
3. 下書きを保存し、プレビューで文章と表を確認します。

表の枠を作り直さなくても、セルの中の文字は本文と同じように編集できます。コード内の <tr> は行、<th> は見出し、<td> は内容です。閉じるタグを消すと形が崩れるため、まずは文字だけ変更しましょう。

表示例

3．スマホで読める表にする

列が多いほど、スマホでは一つの欄が狭くなります。最初は2〜3列に絞り、セルに長文を詰め込まず、補足は表の下に書きます。公開前に、見出しと値の対応、折り返し、横にはみ出していないかを確認してください。

見た目を合わせるための空白の連続や、表を撮影した画像で置き換える方法では、スマホで読みにくくなります。文字の表なら、読者が時間や条件をコピーすることもできます。

項目だけを並べるなら箇条書きと番号付きリストのほうが簡単です。最後は公開前チェックリストで確認しましょう。

これからWordPressのサイトを用意する方へ

この記事の操作はWordPressの編集機能です。すでにサイトがある方は契約し直す必要はありません。新しく始める方はサーバーとドメインの選び方で更新費用・バックアップ・サポートを確認しましょう。サーバーにドメインが含まれる場合もあるため、二重契約を避けます。