WordPress

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

投稿日:

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

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

りんご  100円

バナナ  50円

パイナップル 300円

とするより、

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

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

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

こんな感じで↓↓

表の挿入

 

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

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

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

 

表の挿入

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

ワードプレスに表を挿入する方法

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

 

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

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

ワードプレスに表を挿入する方法

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

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

表が挿入されました。

ワードプレスに表を挿入する方法

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

簡単でしょ?

 

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

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

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

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

ワードプレスに表を挿入する方法

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

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

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

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

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

ワードプレスに表を挿入する方法

スマホで見た時

ワードプレスに表を挿入する方法

PCで見た時

 

表のカスタマイズ

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

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

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

その前に・・・

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

ワードプレスに表を挿入する方法

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

 

罫線に色をつける

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

ワードプレスに表を挿入する方法

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

ワードプレスに表を挿入する方法

 

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

ワードプレスに表を挿入する方法

 

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

ワードプレスに表を挿入する方法

 

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

ワードプレスに表を挿入する方法

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

ワードプレスに表を挿入する方法

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

ワードプレスに表を挿入する方法

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

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

 

セルに色をつける

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

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

ワードプレスに表を挿入する方法

 

ワードプレスに表を挿入する方法

 

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

ワードプレスに表を挿入する方法

 

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

できました!

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

 

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

 

まとめ

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

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

投稿者プロフィール

七星 奈津子
七星 奈津子

ブログ集客プロデューサー/ライター/コラムニスト


読者(消費者)との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。


これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。


講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。


▶︎詳しいプロフィールはこちらから

この記事が気に入ったら
いいね ! しよう

Twitter で

-WordPress

Copyright© 7stars725.com , 2018 All Rights Reserved.