ワードプレス　''おしゃれ'' な表（テーブル）の作り方

ワードプレスで表（テーブル）って作るの難しそうだなぁ。。。

困っている人

Makito

私、ワードプレス初心者でしたが、きれいな表の作り方を知ってます！教えますよ！

ワードプレスでは、表のことを『テーブル』と言います。

普通にテーブルを作るとこのような見え方になります。

かなり、シンプルですよね。
枠線の太さや色、文字のサイズや色、セルの背景の色などを変えてアレンジすると・・

Makito

だいぶ見栄えが変わって、かっこよく見えますよね！！

１．まずは表（テーブル）をつくろう

では、さっそく、解説していきますね。

1-1.Advanced Editor Tools（旧：TinyMCE Advanced）をインストールする

はじめに準備するものですが、

①「WORDPRESSのテーマ」と②「プラグイン」それぞれひとつづつあればOKです。

Affinger（アフィンガー）はこの記事の後半で出てきます。

横スクロール機能の部分です。見栄えの段階ではAffingerは不要ですのでご安心ください。

1-2.ベースの表（テーブル）を作る

Makito

それでは、画像付きで解説していきますよ！

一緒に進めていけば、必ずできるので、一緒に作っていきましょう～

まず表（テーブルと言います）を作ります。

下記のような、こんな感じになると思います。↓

今回は、横に4コマと縦に5コマで作っていきます。

もちろん、後から自由に追加も削除もできますのでリラックスして始めてください。

1-3.テーブル表を完成させる

上の何の変哲もない表（テーブル）に必要事項を入力していきましょう！

２．表に装飾をする

作った表を装飾して、見栄えをよく・かっこよくしていきましょう。

2-1. ステップ１　表の外側の輪郭線（表の外側の部分）からです。

①テーブル表を全選択する

②「テーブルアイコン」をクリックする

③「表のプロパティ」を押す

2-2. ステップ２　表の外側の輪郭線の「太さ」と「色」をきめる

①プロパティ『画面の高度な設定』を押す

②スタイルの窓の文字を一回すべて消して、『border-collapse: collapse; width 100%; border: 4px solid;』

と入力しましょう！(このままコピペしてOK！）

③「枠線の色」の窓に好きな色（Webカラー）を入力する。この時は、ブルー「#0000ff」をコピペしました。

④入力が終わったら『OK』で画面を閉じます。

原色大辞典～メトロカラーまでありまして、すべての色に＃●●●●●●という文字（色コード）が指定されているので自分の好きな色を使ってみて下さい

パステルカラーの辺りは、色のグラデーションがきれいですよ！

ここで一度、どのようなテーブル（表）にかわったかプレビューで確認してみましょう。

プレビューでみた感じです。

こんな風に、外側の輪郭線がブルーになってます！

2-3. ステップ３：セルの色を変える

表の中のセルの色を変えていきます！

①背景色を設定したい『セル』を選択した状態（青い部分）で『テーブル』→『セル』→『セルのプロバティ』をクリックする。

プロパティの設定をします。

①『高度な設定』を押す
②『背景色』に好きな色のWebカラー（ 今回は #0000ff )をコピペする。
③『枠線の色』にカーソルを移すと、背景色の□がブルーになり、『スタイル』のところにbackground-color: #0000ff;　という文字ができます。
④最後に『OK』をクリック。

プレビューで確認するとこのようにセルの背景に色がつきました。

左側のセルも同様に色をつけました。

濃いブルーに黒文字だと、文字が見にくいので、次は文字を装飾していきますよ！

2-4. ステップ４：文字を装飾する

太文字にしたいので「B」をクリック。

文字の大きさは、「１５０％」にしてみました。

文字の色は、「白」にする。

そして、左のセルも同様にして、中央揃えにしたりして整えてみると、

Makito

だいぶ見栄えがよくなってきました～！！

一番上の段のセルは、2段にして文字を加えてみました。このやり方は、

①改行したい場所にマウスカーソルを合わせてクリック、そして『Shift』+『Enter』で改行

②それで、文字を打ち込みます。

ステップ３、４と同じやり方で文字の大きさ、色、セルの色を変えました。

2-5. ステップ５：表（テーブル）の中の罫線（けいせん）を装飾する

テーブル（表）を選択した状態で『テーブル』→『セル』にカーソルを合わせて『セルのプロパティ』をクリック。

少しめんどくさいのですが、ワードプレスでは、輪郭線と内部の線は別々に設定する必要があります。

ちょっと面倒くさいですよね・・ｗｗ

①『高度な設定』を押す
②スタイルの窓に『border: 2px solid;』と入力
③枠線の色の窓に好きな色（Webカラー）を入力　今回はグレー系　『#a9a9a9』
④最後の『OK』をクリック

再びプレビューで確認してみると、下のようにテーブル（表）の中の罫線がグレーの変わりました。

Makito

ちょっとかっこ良くなったと思いませんか！？

３．表を横スクロールできるようにする方法！

次は、ワードプレスのテーマ、Affinger６に備わっている機能を紹介していきます。

下のような表（テーブル）になってしまった・・・。

ちょっと、表として不格好ですよね？　そんな時の直し方を解説します。

テーブル（表）を選択した状態で、ワードプレスの画面をビジュアルエディターからテキストエディターに切り替えます。

そうすると、下のような暗号みたいな文字が現れます。

テーブル（表）の記述の冒頭に下記をコピペして入れてください！

<div class="scroll-box pc">

※必ず『pc』の前に『半角スペース』を入れてください

<div class="scroll-box pc">　下記のようにここの間に左記の文字をコピペして下さい！

『変更プレビュー』をクリックしてください。そうすると…

PCでもモバイルでも同様に横スクロールができるようになっていると思います！

４．表に画像を挿入したいとき

表（テーブル）を作成後、セルを選択して『メディアを追加』で画像の挿入ができます。

画像の挿入は、結構、かんたんなんです！

Makito

私は、NFTが好きなのでこんな表を作ったとします。

左上の『メディアを追加』をクリックします。

挿入したい画像を選んで、右下の『投稿に挿入』をクリック。

そうすると、表にこのように画像を挿入することができます。

上で解説した表を駆使して、表と画像を組み合わせるかっこいい表ができますよ！

お気に入りNFT1	お気に入りNFT２	お気に入りNFT３	お気に入りNFT４

大変お疲れ様でした。これで、見栄えの良い表が作れるようになったと思います。

５．まとめ

今回はAFFINGER6で表（テーブル）をかっこよく、見栄えがする作成する方法・カスタマイズ方法について解説しました。

表の作り方はプラグイン『TinyMCE Advanced』をインストールすると簡単につくれますよ！

文字だらけの文章だと、読みにくく感じてしまいます。

見栄えがよい表を活用して、見やすい、読みやすい記事にしていきましょう！

関連記事：