WordPressで表作成！枠線・プロパティ・色付けを簡単解説！

WordPressでプラグイン【TinyMCE Advanced】を使った表作成方法をまとめます！

ブログを書いていると、表があると分かりやすいのになぁ・・・という時が出てきます。

使い方はとっても簡単なのですが、今日は、初めての方がつまづき安い部分を分かりやすくまとめたいと思います(^^)

表がはみ出て、画面から切れる！という方はコチラを参考にして下さいね⏬

⇒WordPressで表が切れる！はみ出ないようにレスポンシブにしよう！

表見本

例えばこの表の作成方法をご説明しながら解説していきます☆

用語の説明

まず、3✕3の表で、用語の説明をします⏬

 

プロパティの説明

後に使う【テーブルアイコン  】の内容詳細を記入しておくので、分からなくなったらここへ戻って確認してくださいね⏬

表のプロパティ

【テーブルアイコン】⇒『表のプロパティ』

【一般】／【詳細】

①表の幅：表全体の幅

②表の高さ：表全体の高さ

③枠線：表の外枠の線の太さ

④配置：ブログ内の表の位置

⑤枠線の色：枠線の色の変更

⑥背景色：表全体の背景色の変更

 

セルのプロパティ

【テーブルアイコン】⇒『表のプロパティ』

【一般】／【詳細】

①セルの幅：セルの幅の変更

②セルの高さ：セルの高さ変更

③セルの種類：特に設定せず『なし』で良いと思います。

④横配置：セル内での横の配置の変更

⑤縦配置：セル内での縦の配置の変更

 

行のプロパティ

【テーブルアイコン】⇒『行のプロパティ』

【一般】／【詳細】

①行の種類：特に設定せず『無し』で良いと思います。

②配置：行の中で『左寄せ』『中央』『右寄せ』の選択

③高さ：行の縦幅の変更

④枠線の色：行の枠線の色の変更

⑤背景色：行の背景色の変更

 

表の作成

では早速表を作成しましょう！

表作成の流れは・・・

セルの数を決める
　⇓
必要な文章を入力
　⇓
必要であればセルの結合や追加を行う
　⇓
色づけ、体裁を整える

こんな感じで進めますね☆

セルを決める

表見本の表を作成するなら、セルの数は横行3✕縦列6になります。

【テーブルアイコン】をクリックして、私の場合は、横行3✕縦列6を指定しました。

 

すると⏬このように表が挿入されます(^^)☆

 

文章の入力

文章を入力していきましょう！

画像が入る場所は空白のまま、セルの結合やセンタリングは後でするので気にしなくてOK！

 

セルの結合

私の表の場合は、赤枠の部分を『セルの結合』をして『一つのセル』にします。

 

セルの結合方法

セルを結合したい部分を範囲選択した状態で、【テーブルアイコン】の中の『セル』を選択し⇒『セルの結合』をクリック。

これでセルが結合されましたね(^^)

 

行・列の挿入

表を作成していると、行や列が足りない！！という状況も出てくると思います。

その場合、縦列でも横行でも後から挿入することが可能です。

まずは挿入したい場所を範囲指定します。

行の挿入の場合

行を範囲指定⇒『範囲指定した場所の上に挿入』又は『下に挿入』を選ぶことができます。

2行範囲指定していると、2行分挿入されます。

挿入したい行の数だけ範囲指定すると時短ですね(^^)！

列の挿入

行と同じ要領です。

列を範囲指定⇒『指定した場所の左に挿入』又は『右に挿入』を選ぶことができます。

2列範囲指定していると、2列分挿入されます。

 

画像の挿入

表の中に画像を入れることも可能です☆

入れたい場所にカーソルを置き、通常通り、【挿入】から『Add Media』に進み、お好みの画像を選択して下さい。

赤枠の部分で画像の大きさや、配置（センタリングなど）を設定して下さい。

 

表全体に枠をつける

表全体に外枠をつけます。

表全体を範囲指定します。

【テーブルアイコン】⇒『表のプロパティ』⇒

表の周りに枠ができました(^^)！

 

幅を揃え、センタリング、縦の罫線まで

次に赤枠の部分のセルの縦幅、横幅を指定していきます。

まず、赤枠部分を範囲指定します。

 

【テーブルアイコン】⇒『セル』⇒『セルのプロパティ』⇒

縦の線が等分割になり、縦の線が入り、文字はセンタリングになりました(^^)！

横の罫線

横の罫線を引きたい場所を範囲指定⇒【テーブルアイコン】⇒『行』⇒『行のプロパティ』

横にも罫線がハッキリと(^^)！

 

色を付ける

では最後に細かく体裁を整えていきましょう！

色付け

色付けしたい場所を選択し、【テーブルアイコン】をクリック。

 

赤枠の部分⏬を色付けします。

『行』かと思う方もいるかも知れませんが、セルの結合をして1セルになっているので、これは『セル』ですね。

 

【テーブルアイコン】をクリックし、『セル』⇒『セルのプロバティ』へと進みます。

フォント18、文字色は白で太字にしました(^^)！

同じ要領で他の場所の色を変更します。

行とセルに注意しながら色付け。

出来ました(^^)☆

表が使えるようになると、比較や商品の説明など、見やすさもアップしますし、読者にとって分かりやすい記事になりますね。

文章にメリハリも生まれますしオススメです。

是非チャレンジしてみましょう！

表がはみ出てお困りの方はこちらをどうぞ⏬

WordPressで表が切れる！はみ出ないようにレスポンシブにしよう！

 

Rimのプロフィールはこちら