1. TOP
  2. 素人同士だからわかり易い!WPの表のつくり方基礎講座。

素人同士だからわかり易い!WPの表のつくり方基礎講座。

プロローグ

ヨシヲは思う。

ぐっじょぶ!で情報を発信を始めて、幾度の困難を乗り越えてきた。

このぐっじょぶ!の投稿するツール「wordpress」はなかなかの強者だ。
簡単そうに見えて簡単ではない。一筋縄ではいかないwordpressの扱い方法についいてヨシヲなりに情報提供しようではないか!と。

そう、wordpressの初歩的な使い方を説明しているサイトは豊富にある!それはどれも、wordpressを使いこなしている超人たちだ!!そんな超人が超ド級初心者向けに説明していても、超人にはわからない初心者の苦しみを解決できることはすくないであろう。

まさにウィキペディア現象っっ!! 専門的すぎて何を言っているかわからない件。ってやつだ。

wayoshiwover

 

ここは、プロではないのヨシヲが超ド級素人の気持ちや素人ならではのミスを忘れる前に、超初心者向けにwordpressの使い方ノウハウを発信しなければならない!という使命感が舞い降りてきた。

 

wanonamisen

 

さぁ、趣味でwordpressを使ってブログをやろうとしているサラリーマン!副業でちょっくらひと稼ぎしたいと考えているサラリーマン!! そんなwordpress初心者サラリーマンのためにヨシヲは立ち上がるぞ!一緒に勉強しようではないか!

そんなわけで、今回は「表」のつくり方について紹介していこう!!

 

表全体の加工

名前 住所 電話番号 備考
ヨシヲ 東京都○○区○○ 090-○○○○-○○○○ 一人暮らし、彼女なし
高橋くん 東京都△△区△△ 080-○○○○-○○○○ イケメン

「表」と言われて想像するのは↑この形↑であろう。

ま、色合いや内容については、気にしていけない。

この表を作ってみたいと思わないか?そうか、思うか!

ということで今回ここでお伝えするのは

1、表の呼び出し方法
2、表の線に色を付ける方法
3、背景色を付ける方法
4、文字の位置を変える方法
5、文字の色を変える方法

この5つだ!!この工程を踏むことで上記のようなセンスの良い表を作ることができる!!

5つもかよっ!!とイラつくかもしれないが、めっちゃ基本的なことなので覚えておくとできるサラリーマンになれる!

 

 

1、表の呼び出し方法

表を呼び出すには加工する画面(ビジュアル)の上の方のツールバーにあるボタンを駆使して呼び出そう!!

 

te-burunodashikata

 

いやいや。そんなボタンないよ!という方に。確認してもらいたいのは・・・

・WordPressの投稿画面(記事を書く画面)はビジュアルモードになっているか?

・プラグイン『TinyMCE Advanced』はインストールされ有効化されているか?

を確認してくれな。

 

で、さっきのテーブルのボタンをポチっとし、「テーブルを挿入」にマウスを合わせると右側にパネルがでる。

te-buruwosounyuu

マウスで表にしたい「列」と「行」の数を指定しクリックをする。パネルの下部に「列数×行数」の数値が表示されているので確認してくれな。上の場合だと「4×2」なので4列が2行あるテーブルができるということになる。※「表」は「テーブル」とも呼ばれるので覚えておこう。

大きさを決めたらクリックをすると・・・

tiisakudetahyou

で、これだと加工しにくいので加工しやすい大きさにする。

mausudehixtuparu

あとは文字を入れていけばOKってわけ。 ↓こんな感じに仕上がるはずだ!

名前 住所 電話番号 備考
ヨシヲ 東京都○○区 090-○○○○-○○○○ 一人暮らし、彼女なし
高橋くん 東京都△△区 080ー○○○○-○○○○ イケメン

さぁ、ここまでできたらもう、できるサラリーマンになったも同然!

あとは小ワザを駆使して加工していけばいいぞ!普段エクセルなどを使っているサラリーマンには簡単すぎたかもしれんが、それでも参考になっていれば嬉しい。

 

2、表の線に色を付ける方法

表の罫線に色を付ける方法の説明をしよう。

senwoakanisuruhouhou

 

wanonamisen

 

まずは、色をつけたい表を選択するのだが、注意が必要。

 

■悪い例■
keisenirodukewaruirei2

■良い例■

senhenoirodukeiirei2

 

全体が水色になっているのと、文字だけが水色になっているという違いだ!!

 

wanonamisen

 

良い例と同じように選択ができたら、

「表のアイコン」をクリックしよう!

kore

 

次に、「セル」⇒「セルのプロパティ」をクリック。

 

seruserunopuropatexi

 

セルのプロパティの「詳細」のタブを開く。

 

keisennoiropuropatexi

 

あとは、好みの色を選ぶだけ。マウスを動かして好きな色に設定してくれな。ちなみにカラーコードで色を決めることもできる。カラーコードで設定する場合は「#」の脇にコードを入力してくれな。

iro

 

※カラーコードとは色のコード。ヨシヲが作った今回の赤は#eb0e37青は#1d33f5という色になる。真っ白だと「#ffffff」。緑だと「#008000」深緑で「#006400」などなど色によって異なるからググってみると面白い。ヨシヲも便利なカラーコード一覧をみんなにそのうち提供できたらいい・・・・なんて野望もあるので楽しみにしていてくれな。

 

んで、できたのがコレ↓↓

名前 住所 電話番号 備考
ヨシヲ 東京都○○区 090-○○○○-○○○○ 一人暮らし、彼女なし
高橋くん 東京都△△区 080ー○○○○-○○○○ イケメン

表の枠線が赤になったのがわかるだろう!!色を付ける事によって表が見やすくなるぜ!やってみてくれな。

 

 

3、背景色を付ける方法

表の背景に色を付ける方法の説明をしよう。

一番上の表にある「名前」「住所」「電話番号」「備考」の部分の青色の付け方だ。色は選べるので無理に青にしなくても大丈夫。好みの色でセンスのよい表を作ってくれな。

irotukenosetumei

 

wanonamisen

 

まず、色をつけたい場所を選択する。選択するのは「列」でも「行」でも可能。また一つのセルのみなど、好みで色を付けることができる!

選択をする時の注意点として良い例と悪い例を確認してくれな。

■悪い例■

damenarei2

これをこのまま背景色の設定を行うと・・・・

waruireikextuka

↑こんなふうに、「名前」の部分しか色がつかなくなるので注意だ!!!

 

■良い例■

yoirei2

 

wanonamisen

 

正しく選択ができたら、その選択をキープしたままで、表を作るときに押したあのアイコン!

表マークをクリック。

kore

 

そしたら、

「セル」⇒「セルのプロパティ」をクリック

seruserunopuropatexi

セルのプロパティの「詳細」のタブを開き、背景色の右側にある四角をクリック。

serunopuropatexi

 

 

んで、完成したのがコレ↓↓

名前 住所 電話番号 備考
ヨシヲ 東京都○○区 090-○○○○-○○○○ 一人暮らし、彼女なし
高橋くん 東京都△△区 080ー○○○○-○○○○ イケメン

だんだん完成に近づいてきたであろう!ここまでくればあとは文字の加工だけになる!その前に注意点等を以下にまとめたので目を通してくれな。

 

 

「2、表の線に色を付ける方法」と「3、背景色を付ける方法」 まとめ

基本的な動作は同じで「セルのプロパティ」で枠線の色、背景色が設定できる。

 

で、ちなみにだが、この工程の2と3を逆にすると悲しい出来事がおこる。

こんな風に↓↓

名前 住所 電話番号 備考
ヨシヲ 東京都○○区 090-○○○○-○○○○ 一人暮らし、彼女なし
高橋くん 東京都△△区 080ー○○○○-○○○○ イケメン

 

これ、一列目のセルのプロパティは枠線の色と背景色が設定されていていいのだが、

二列目は枠線の色のみが設定されていないといけない。枠線の色を設定する際に表の全てを選択するともともと一列目に背景色を設定したものが反映されてしまうというシステム。ヨシヲも初めてやったときは上のようになって悶絶した。

 

puropatexinotigai

 

なので細かい設定のちの全体設定。 が基本になる。

 

表内の文字の加工

次は表の中に入る文字の加工にチャレンジしてみよう。

今回は「位置」「色」の設定方法だ!
やり方はめっちゃ簡単で通常の文字加工となんら変わりがないのでさっくり説明するぜ!
hyonomojikakou

 

4、文字の位置を変える方法

位置を変えたい文字を選択する。

今回は例として高橋くんの備考欄「イケメン」の文字のみを動かしてみよう。

mojinoiti

 

選択をしたまま、加工画面のツールバーの文字位置変更のボタンをおす!

 

mojiititu-ruba

 

今回は「中央揃え」をさせたいので真ん中のボタンをポチっ!

sentaringu

 

中央以外に、右寄せ、左寄せのボタンで好みの場所に動く。そんでもって、全体的に動かしたい場合は選択する場所を増やせばいいので簡単だろう。普段仕事で使っているエクセルやワードなどと同じ感じで対応できる。

 

5、文字の色を変える方法

ここまでくれば、文字の色を変えるのも想像がつきやすいだろう。

まずは文字の色を変更したい箇所を選択する。

 

mojiirohenkou

んで、ツールバーのテキスト色のボタンを押せば、好きな色に変更ができるってわけ。

tekisutoiro

んで、これが完成形!!だ!

名前 住所 電話番号 備考
ヨシヲ 東京都○○区○○ 090-○○○○-○○○○ 一人暮らし、彼女なし
高橋くん 東京都△△区△△ 080-○○○○-○○○○ イケメン

こんなふうに、加工していくと最初に紹介したセンスのいい表が作れるので、チャレンジしてみてくれな。

「4、文字の位置を変える方」と「5、文字の色を変える方法」のまとめ

ここで勘の良いサラリーマンなら気がつくはずだ!!

文字を選択して「位置」や「色」が変更できるのなら、「太字」「イタリック」「背景色」「書体の変更」等もできるのではないか?と。

そう!正解だ!表の中の文字を選択して文字の加工は色々とできるので試してみるといい。ちなみにリンクも付けられるぞ! 通常の文章と変わりない加工ができるってことになる。

その方法は加工する文字を選択して、ツールバーから好みの加工方法を選ぶだけ!

と簡単になっている!

 

センスの良い表を作って、ワードプレスで自分の伝えたい情報をより見やすく!わかりやすく!楽しく! してくれな。

仕事でワードプレスを使う人も。趣味で使う人も!!  同士よ!

yoshiwo

グッジョブ!!

\ SNSでシェアしよう! /

ぐっじょぶ!|失敗しない副業・起業の道しるべの注目記事を受け取ろう

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

ぐっじょぶ!|失敗しない副業・起業の道しるべの人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介

ヨシヲ

ヨシヲ

都内某企業に勤めて3年目のヨシヲです。地方から上京したての頃は都会に馴染めず、社会の輪にも入れず、職場の人間関係などに悩みまくっていました。ようやく都会の生活にも慣れてようやく同僚や上司ともうまくやっていけるようになり、サラリーマン生活を謳歌できるようになってきました!そんな僕が、日々楽しく毎日過ごせるように見つけたワザをここで紹介していきたいと思います。

この人が書いた記事

  • 素人同士だからわかり易い!表に画像を入れる方法。

  • 素人同士だからわかり易い!WPの表のつくり方基礎講座。

  • やっぱり人気神社に初詣?「俺」だけの初詣先を見つけ出す方法。

  • 「神頼みしたい!」悩めるサラリーマンに贈る。神社のお参りマナー講座

関連記事

  • 催促メールはこう書けばOK!【保存版】実務で役立つテンプレート付き

  • 素人同士だからわかり易い!表に画像を入れる方法。

  • 気まずい沈黙とサヨナラ!雑談力をグンと上げる11のコツ

  • 断り、催促、謝罪…言いにくいことを上手に伝える便利なフレーズ

  • お詫びメールの書き方、注意点【保存版】謝罪文テンプレート付き

  • その「無料テンプレート」本当に大丈夫?正しいテンプレートを選ぶには。