マーケティングで人生を変えよう

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

WRITER
 
この記事を書いている人 - WRITER -
「誰に」「何を」「どのように伝えるか」を徹底的に個別指導しています。集客はココさえできれば80%は成功したも同然です。と、まぁ~エラそうなことを書きましたが、ぼく自身もまだまだ勉強中です。一緒に成長していきましょう!
モットー『人類は財産。友達は宝。出逢いは最高の贈り物』
詳しいプロフィールはこちら

こんにとちは。

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

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

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

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

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

昨日の「2016年4月オススメのMVNOとスマホ ベスト3」は評判良かった見たいね。

カツヨ

うん。読んでくれた読者のお陰様ですよ。でね、読者の中で下の表(テーブル)に興味を持ってくれた人がいたんだ。

やまもと

wp_table_01

これ

 

へ〜、どんなことに興味を持ってくれたの?

カツヨ

綺麗で見やすいって(^^)

やまもと

確かにそうね。でも。これって元のページにある表(テーブル)を真似ッコしただけじゃん・・・・

カツヨ

 

まぁ〜、そうなんだけど・・・・。今日は、このテーブルの書き方をシェアしようって思ってさ。

やまもと

それは良いわね。綺麗な表(テーブル)ってわかりやすさに直結するからね。

カツヨ

 

実践!WordPressで綺麗な表(テーブル)を作るまでの全行程解説

表(テーブル)を挿入する方法

じゃぁ〜、早速、作り方をおしえて頂戴。

カツヨ

オッケー。折角だから、上のテーブルを作ってみようね。

まずは、普通に表(テーブル)を書いてみるよ。編集画面で「テーブル」ボタンをクリック(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で表(テーブル)を作る方法のまとめ

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

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

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

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

おしまい

この記事を書いている人 - WRITER -
「誰に」「何を」「どのように伝えるか」を徹底的に個別指導しています。集客はココさえできれば80%は成功したも同然です。と、まぁ~エラそうなことを書きましたが、ぼく自身もまだまだ勉強中です。一緒に成長していきましょう!
モットー『人類は財産。友達は宝。出逢いは最高の贈り物』
詳しいプロフィールはこちら

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Copyright© マーケティング・ヒーロー・アカデミー , 2016 All Rights Reserved.