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

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

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

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

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

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

表見本

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

用語の説明

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

赤:表 青:セル 緑:列 黄:行

 

プロパティの説明

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

表のプロパティ

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

【一般】/【詳細】

①表の幅:表全体の幅

②表の高さ:表全体の高さ

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

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

⑤枠線の色:枠線の色の変更

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

 

セルのプロパティ

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

【一般】/【詳細】

①セルの幅:セルの幅の変更

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

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

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

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

 

行のプロパティ

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

【一般】/【詳細】

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

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

③高さ:行の縦幅の変更

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

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

 

表の作成

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

表作成の流れは・・・

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

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

セルを決める

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

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

 

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

 

文章の入力

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

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

 

セルの結合

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

 

セルの結合方法

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

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

 

行・列の挿入

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

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

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

行の挿入の場合

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

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

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

列の挿入

行と同じ要領です。

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

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

 

画像の挿入

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

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

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

 

表全体に枠をつける

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

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

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

『一般』の設定

■ 枠線:線の太さを5としました。

■ 配置:中央を選択。表を記事の真ん中に位置させます。

 

『詳細』の設定

■ 枠線の色:グレー色で配色。

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

 

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

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

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

 

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

『一般』の設定

■ 幅:30%

(横幅全体を100%と考え、3頭分にしたかったので一つのセルの大きさを全体の約30%と指定しました。)

■ 高さ:50

■ 横配置:中央

■ 縦配置:Middle

 

『詳細』の設定

■ 枠線の色:グレーの配色に設定しました。

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

横の罫線

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

『詳細』の設定

枠線の色:グレー色を選択しました。

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

 

色を付ける

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

色付け

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

注意:色付けしたい場所が、セル、行、列のどこかをを間違えないようにしましょう(^^)

セルを二つ以上選択したら『行または列』になりますね。

 

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

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

 

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

『一般』の設定

■ 高さ:70に指定

■ 横配置:中央

■ 縦配置:Middle

 

『詳細』の設定

■ 枠線の色:グレー色に設定

■ 背景色:ピンクに設定しました。

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

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

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

出来ました(^^)☆

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

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

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

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

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

17年間ゼロ円の主婦が、月収40万円を達成するようになったのは、たった1通のメルマガ登録からでした。

無料メルマガには、ネットビジネス初心者の方に向けて、専業主婦だった私がブログで稼げるようになるまでを公開しています!

7日間の無料メール講座の登録はこちらをCLICK ↓

 

ただ今ブログ運営者を対象に、アクセスアップ・収益アップの無料ブログ添削を実施しています!

Rimのコンサルに興味がある方はコチラから↓

3 Comments

藤本

表の作成方法を知りたかったのですが、とても参考になります。
サイトを見ながら作成してみているのですが、セルの結合ができません。
クリックしながら範囲選択しているのですが・・・。(エクセルではできます。)

返信する
rim

藤本さん
表の作成ですが、セルを選択した状態で、テーブルアイコンのセルの結合をクリックすると結合されるのですが、いかがでしょう。
もう一度お試しください。

返信する

コメントを残す

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