ブログの中に表を入れたいことってありますよね？
例えば、商品やサービスの価格を表示するとき。
りんご 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年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。
これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。
講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。
最新の投稿
ブログ2019.03.21ものを選ぶ基準は「とりあえず」ではなく、「好き」「気持ちいい」がいい
ブログ2019.03.21フローチャートの書き方＜覚書＞
ブログ2019.03.20春はすぐそこ！春待ち散歩in大阪城公園
ブログ2019.03.17自分の機嫌をあげる小さなできごと