WordPressで綺麗な表(テーブル)を書いて、ライバルに差をつけろ!!

wp_table_eyecatch
The following two tabs change content below.
『人類は財産。友達は宝。出逢いは最高の贈り物』

人と人との出逢いは人生において最高の贈り物です。ぼくたちは誰と出逢うかで人生が大きく変わっていきます。ウェブもリアルもどちらも同じです。
ぼくは、起業家とお客さんの出逢いを最高の宝物にしたいと思っています。このブログでは、起業家とお客さんの出逢いを最高の宝物にする為の情報をコミPo!を使ってわかりやすく配信しています。
ぼくと友達になって下さい(^^)

こんちにわ。

ITが苦手な会社をITが活用できる会社に変える専門家、IT軍師のやまもと(@itka24office)です。

遂に完結した格安スマホ塾ですが、新発売されるスマホとかタブレットなども紹介していきたいと思っています。

さて、今日はちょっとした手間でWordpressに綺麗な表(テーブル)を書く方法をシェアしていきます。

相棒は見た目にはウルサい自称美人アンカーウーマンのカツヨです。

綺麗な表(テーブル)は好きですか?

カツヨ
昨日の「2016年4月オススメのMVNOとスマホ ベスト3」は評判良かった見たいね。
やまもと
うん。読んでくれた読者のお陰様ですよ。でね、読者の中で下の表(テーブル)に興味を持ってくれた人がいたんだ。
wp_table_01

これ

 

カツヨ
へ〜、どんなことに興味を持ってくれたの?
やまもと
綺麗で見やすいって(^^)
カツヨ
確かにそうね。でも。これって元のページにある表(テーブル)を真似ッコしただけじゃん・・・・

 

やまもと
まぁ〜、そうなんだけど・・・・。今日は、このテーブルの書き方をシェアしようって思ってさ。
カツヨ
それは良いわね。綺麗な表(テーブル)ってわかりやすさに直結するからね。

 

表(テーブル)のセルに背景色を設定するだけで見た目はここまで変わる

カツヨ
じゃぁ〜、早速、作り方をおしえて頂戴。
やまもと
オッケー。折角だから、上のテーブルを作ってみようね。

まずは、普通に表(テーブル)を書いてみるよ。編集画面で「テーブル」ボタンをクリック(1)して、「テーブルを挿入」をクリック(2)、そして挿入したい表(テーブル)の行と列をクリック(3)する。

wp_table_03

 

やまもと
行と列は、後で変更が出来るから大体で良いよ。ちなみに、行列の覚え方は下の図で、覚えてね。
wp_table_04

 

カツヨ
つまり、行が横、列が縦ね
やまもと
とりあえず、今回は3行3列から始めるよ。
wp_table_05

 

カツヨ
ちょっと、これじゃぁつぶれてて分からないじゃない。
やまもと
まあ〜、気にせず作って行けば大丈夫。まずは、左上のセルにカーソルを合わせるんだ。
wp_table_06

 

やまもと
合わせたら、矢印キーでカーソルが移動できるから、右に移動させて文字を入力する。
wp_table_07

 

やまもと
続けてカーソルを右に移動させて、次の文字を入力する。
wp_table_08

 

やまもと
次の文字を入力したいけど、列が足りないから列を挿入するよ。「テーブル」ボタンをクリック(1)して、「列」をクリック(2)、そして挿入したい列の場所を選んでクリック(3)する。
wp_table_09

 

カツヨ
ほんとだ。右側に列が追加されたわ。
wp_table_10
やまもと
続けて文字を入力するよ。
wp_table_11

 

やまもと
1行全て入力が完了したら、「tab」キーを押すんだ。そうすると、次の行の先頭行に移動してくれるよ。

じゃぁ〜、2行目を入力していくよ。

wp_table_12

 

カツヨ
あれ?「SMSなし」の右横に「SMSあり」を書いちゃうと、その上が「通話SIM」になるじゃない。どうしたら良いの?
やまもと
ここでも列の挿入を行うんだよ。「SMSなし」のセルにカーソルを合わせたまま、右側に列を挿入するんだ。
wp_table_13

 

カツヨ
あ、「データSIM」と「通話SIM」の間に列が増えた。やったー!!
やまもと
じゃぁ〜、続いて「SMSあり」って書いて・・・
wp_table_14

 

カツヨ
あ〜〜〜ん。今度は、「データSIM」と「通話SIM」の間に空白のセルが残ったままよ。
やまもと
追加したからね・・・。で今度は、「データSIM」と右横のセルを結合するんだ。「データSIM」と右横のセルを選択した状態にして・・・
wp_table_15

 

やまもと
「テーブル」ボタンをクリック(1)して、「セル」をクリック(2)、「セルの結合」をクリック(3)する。
wp_table_16

 

カツヨ
あ、くっついたわ。
wp_table_17

 

カツヨ
じゃぁ〜、「通話SIM」とその下のセル、「通信速度」とその下のセルもそれぞれ結合をすればいいわけね。
やまもと
その通りだよ。で、これが結合した状態ね。
wp_table_18

 

カツヨ
じゃぁ〜、続いて3行目を入力していけばいいわけね。あれ、「tab」キーで次の行に移動できないわよ。
やまもと
そんな時は、矢印キーで移動すればOKだよ。
カツヨ
よし、3行目の入力完了。次は行を追加すれば良いのよね。
wp_table_19

 

やまもと
その通り。「テーブル」ボタンをクリック(1)して、「行」をクリック(2)、「行を下に挿入」をクリック(3)する。
wp_table_20

 

カツヨ
ちゃんと、下に挿入されたわね。
wp_table_21

 

やまもと
ちなみに、最終行に行を追加する場合は、最終行の一番右の列で「tab」キーを押すと、自動的に追加されるんだ。
カツヨ
そんな方法もあるのね。後は、頑張って表をつくるだけね。

カツヨ
できた〜〜〜。
wp_table_22

 

やまもと
じゃぁ〜、今できているところまでをプレビューで確認してみようね。
wp_table_23

 

カツヨ
ちょっと、素っ気ないわよね。
やまもと
そこで、これから装飾をしていくんだよ。まずは、セルに背景色を入れてみよう。
やまもと
背景色をつけたいセルを選んで、「テーブル」ボタンをクリック(1)して、「セル」をクリック(2)、「セルのプロパティ」をクリック(3)する。
wp_table_24

 

やまもと
詳細をクリック
wp_table_25

 

やまもと
背景色のパレットボタンをクリック
wp_table_26

 

やまもと
色を選択(1)して、OKをクリック(2)
wp_table_27

 

やまもと
背景色にコードが入っていることを確認して、OKをクリック
wp_table_28

 

カツヨ
お(^^) ちゃんと背景色が入ったわね。
wp_table_29

 

やまもと
あとは、必要なセルに背景色を入れていけばOKだよ。

カツヨ
できた〜〜〜
wp_table_30

 

カツヨ
背景色をつけたら、文字の見づらくなったわね。
やまもと
そうだね。次はフォントに色をつけて整えていこう。色をつけたい文字をマウスでなぞって(1)、「A」ボタンをクリック(2)、装飾したい色をクリック(3)
wp_table_31

 

カツヨ
良い感じね。見やすくなったわ。
wp_table_32

 

カツヨ
じゃぁ〜、残りも色をつけていくわね。
wp_table_33

 

やまもと
最後に一番上の行をヘッダーに変えて
wp_table_36

枠の中のセルをヘッダーに変更する。1つずつ作業をしてね。

 

wp_table_34

 

やまもと
一番左の列を太文字に変えれば、完成だね
wp_table_35

 

カツヨ
やった〜〜。できたわ(^^)
データSIM 通話SIM 通信速度
SMSなし SMSあり
ベーシックプラン 525円 645円 1250円 200Kbps
3.1GBプラン 900円 1020円 1600円 下り最大 225Mbps
上り最大 50Mbps
5GBプラン 1450円 1570円 2150円
10GBプラン 2260円 2380円 2960円

 

カツヨ
ところでさ~。通信速度欄の文字を、上に寄せたり、下に寄せたりできないの?
やまもと
もちろんできるよ。セルのプロパティを開いて、「縦位置」をクリック(1)、寄せたい位置を選んでクリック(2)する。
wp_table_37

 

カツヨ
ほんとだ~。下に寄ってるわ。
wp_table_38

 

やまもと
表(テーブル)は、データを見やすくする為にとても重要だから、一手間かけるだけで読者にとって断然見やすくなるからね。

 

 

やまもとの視点

表(テーブル)は、データを整理整頓して見せる為にはとても有効な手段だ。しかも、Wordpressなら簡単に作る事が出来る。

インターネット黎明期なら、HTML辞典を片手にタグを打ってつくっていたところだが、今では直感的につくれるようになっている。これを活用しない手はない。どんどんと活用して、読者にわかりやすい記事を書いて欲しい。

見やすい表(テーブル)のポイントは次の通り。

  • ヘッダー(見出し)必須
  • 値の位置を合わせる(右寄せ・中寄席・左寄せ)
  • 数字の桁区切り

 

 

 

スポンサーリンク

wp_table_eyecatch

面白いって思ったらシェアをお願いします

Web集客&収益化の仕組み作りをマンガ(コミPo!)で解説した小冊子を作成しました


簡単で、楽しく、わかりやすいと既に好評を頂いている小冊子、全部で6冊です。

是非、あなたのWeb集客&収益化にお役立て下さい。

また、何やらココでは言えない『超豪華特典』が付いています。

詳しくは、各小冊子の最後で。

ABOUTこの記事をかいた人

『人類は財産。友達は宝。出逢いは最高の贈り物』

人と人との出逢いは人生において最高の贈り物です。ぼくたちは誰と出逢うかで人生が大きく変わっていきます。ウェブもリアルもどちらも同じです。
ぼくは、起業家とお客さんの出逢いを最高の宝物にしたいと思っています。このブログでは、起業家とお客さんの出逢いを最高の宝物にする為の情報をコミPo!を使ってわかりやすく配信しています。
ぼくと友達になって下さい(^^)