WordPressでの表の挿入方法〜見やすくわかりやすいブログにするために〜

ブログの中に表を入れたいことってありますよね？

例えば、商品やサービスの価格を表示するとき。

りんご　　100円

バナナ　　50円

パイナップル　300円

とするより、

りんご	100円
バナナ	50円
パイナップル	300円

と表にする方が見やすいですよね？

わたしは、セミナーの案内時にも表を使っています。

こんな感じで↓↓

 

すっきり見やすくないですか？

見やすくわかりやすいブログを作るために知っておくと便利な「表」。

ワードプレスなら表は簡単に挿入できますので、その方法について書きたいと思います。

 

表の挿入

記事投稿画面で表を挿入したい場所にカーソルを置き、下記をクリックします。

※上記のマークが表示されていない方は、『TinyMCE Advanced』というプラグインを追加し有効化させてください。

 

「テーブル」という文字の上にカーソルを合わせると右側にマスが出てきます。

何列x何行の表を挿入するのか、マウスを動かして選択します。

2列x4行を選択しました。

これでOKでしたらマウスをクリックして確定させます。

表が挿入されました。

後はここに必要な項目を入力していけばOK！

簡単でしょ？

 

表の挿入で注意したいこと

一つ注意して欲しいことがあります。

それは、列の幅を調整しないで欲しいのです。

列の幅は、線の上にマウスを当てると矢印（↔︎）が表示されるので、その矢印を動かすことで簡単に変更ができるのですが、そうやって調整をすることで、スマホで見た時に表が全部表示されないことになってしまいます。

わかります？右側が切れているのです。

これは、線を動かすことでHTMLでセルの幅を指定してしまっているのですね。

そうすると横幅の狭いスマホで見た時も指定されたセルの幅が優先されてしまい、右側が切れた形で表示されてしまうのです。

幅を指定しなければ横幅は100%で表示されます。

ですのでPCで見た時もスマホで見た時もタブレットで見た時も、横幅の100%で表示されるので、右側が切れて見えないということがなくなるのです。

 

表のカスタマイズ

表自体は簡単に作れます。慣れてくると「ちょっと見た目にも工夫したいな〜」なんて思いも出てくることでしょう。

表の罫線に色をつけたり、背景に色をつけたり・・・

より見やすくするためのカスタマイズ方法を記載しますね。

その前に・・・

表は「列」「行」「セル」で表現されます。

これを事前に知っておいてくださいね。

 

罫線に色をつける

表をクリックし編集できる状態にする。

その状態で、テーブルボタンをクリックし、「表のプロパティ」を選択。

 

「枠線に「1」と入力。（数字が大きいほど太い線となります。）

 

詳細のタブをクリックして画面を切り替え、枠線の色を指定すると「スタイル」にHTMLコードが自動で表示されますのでOKをクリックします。

 

次に、表全体を選択します。

セルのプロパティをクリック。

詳細タブをクリックして枠線の色を指定します。（表のプロパティで指定した色と同じ色を指定してください）

はい！枠線の色が指定されました。

りんご	100円
みかん	200円
もも	300円
メロン	400円

 

セルに色をつける

セルに背景色をつける方法です。

例えば、項目を記載した行に色をつけたい場合は、行全体を選択し、「セルのプロパティ」をクリックします。

 

 

詳細タブをクリックし、背景色を指定ます。

 

OKボタンをクリックすると・・・

できました！

りんご	100円
みかん	200円
もも	300円
メロン	400円

 

枠線の色も指定して、背景色もつけたい場合は、一気にセルのプロパティで指定しちゃいましょう！

 

まとめ

ワードプレスに表を挿入する方法と簡単にできるカスタマイズ方法。

見やすいブログにするために、こういった一手間も必要ですよ〜。