How To

WordPress【おしゃれな表は簡単に作れる】9つの手順を解説

2021年2月5日

WordPressおしゃれな表

WordPressで「おしゃれな表」を作る方法の紹介です。

必要な設定は9項目。

全ての手順をわかりやすく解説していきます。

 

こんな人のお役に立てる記事です。

小豆
WordPressで作った表の見た目が残念過ぎる。
簡単に表をおしゃれにする方法を教えて。

WordPressでおしゃれな表を作る【ビフォー&アフター】

WordPressで作った表って、なんだかパッとしないんですよね。

たとえば、何の設定も行わずに作った表がこちら。

ビフォー

比較表サンプル      
  人物A 人物B 人物C
サンプルテキスト テキスト テキスト テキスト
サンプルテキスト ×
サンプルテキスト 10,000円 20,000円 30,000円
サンプルテキスト テキスト テキスト テキスト
サンプルテキスト テキスト テキスト テキスト
小豆
うーん・・どうしても見た目が好きになれない。

確かに、お世辞にも「おしゃれ」とは全く言えないデザインですよね。

さらに言えば、見た目が悪いだけでなく、表自体が見づらいのも大問題です。

 

で、WordPressを使い続けること3年。

表作成が苦手だった僕も、現在ではこんな感じの表を作れるようになりました。

アフター

比較表サンプル
  大福100px画像 小豆100px画像 最中100px画像
サンプルテキスト テキスト テキスト テキスト
サンプルテキスト
サンプルテキスト 10,000円 20,000円 30,000円
サンプルテキスト テキスト テキスト テキスト
サンプルテキスト テキスト テキスト テキスト
小豆
おっ!いいねぇ。
オイラもこんな感じの表を作ってみたいけど、どうせ設定が難しいんでしょ?
それがそうでもないんだ。
簡単な設定をいくつかするだけで、ほんの数分でおしゃれな表が作れるよ。
大福

 

表の作成には【Advanced Editor Tools】を使用

今回紹介する方法では、表の作成にプラグイン【Advanced Editor Tools】(旧:TinyMCE Advanced)を使用します。

Advanced Editor Tools

 

【Advanced Editor Tools】は、WordPress プラグイン おすすめ 🔍 で検索すると、必ずと言っていいほど出てくる人気のプラグインです。

表の作成はもちろん、記事の装飾をとても簡単にしてくれる便利な機能が満載です。

 

というわけで、インストールがまだの人は、インストール → 有効化 を済ませておいてください。

大福
プラグインの利用は無料。
料金は一切かからないから安心して使えるよ。

おしゃれな表を作るための9項目の設定

おしゃれな表を作るために必要な設定は9項目。

表のカスタマイズ詳細

設定項目

  1. セルの結合
  2. セルの背景色
  3. テキストカラーの変更
  4. 記号・特殊文字の入力
  5. 画像の挿入
  6. 中央揃え
  7. セルの幅(列)の調整
  8. セルの高さ(行)の調整
  9. 枠線の色の変更
たくさんあって大変そうに思えるけど、全然そんなことはないよ。
ほんの数分でできちゃう簡単な設定なんだ。
大福

 

step
1
セルの結合

セルの結合

結合したいセルを選択 → テーブル → セル → セルの結合

 

step
2
セルの背景色

背景色背景色を変更したいセルを選択 → テーブル → セル → セルのプロパティ → 高度な設定 → 背景色を指定

 

step
3
テキストカラーの変更

テキストカラー

テキストを選択 → テキスト色

 

step
4
記号・特殊文字の挿入

記号特殊文字の入力

キーボードの Windows  +  .

Macの場合:Control + Command + スペースを同時にクリック

 

step
5
画像の挿入

画像の挿入

セルを指定 → メディアを追加

サイズの大きすぎる画像を挿入すると、表のデザインが崩れます。
100~300px四方の画像がおすすめです。

 

step
6
中央揃え

中央揃え

セルを選択 → 中央揃え

 

step
7
セルの幅(列)の調整

セルの幅(列)を調整

セルを選択 → テーブル → セル → セルのプロパティ → 一般 → 

レスポンシブに対応させるためには、セルの幅の値は「%」で入力します。

 

step
8
セルの高さ(行)の調整

セルの高さ(行)の設定

セルを選択 → テーブル → セル → 高度な設定 → スタイル

セルの高さ(余白)を調整するpadding:〇px;を入力

 

詳細な設定方法は、以下の記事内で詳しく解説しています。

参考【ワードプレスで表の高さが変わらない】をやっと解決できた方法

 

step
9
枠線の色を変更

枠線の色を変更

  1. 表の外枠の色を変更

    表全体を選択 → テーブル → 表のプロパティ → 高度な設定 → 枠線の色
  2. セルの枠線の色を変更

    セルを選択 → テーブル → セルのプロパティ → 高度な設定 → 枠線の色

見本の表同様、枠線を消したようなデザインにするには、以下のように設定します。
表の外枠の色:#ffffff セルの枠線の色:#ffffff

WordPressテーマとの組み合わせで表をさらにグレードアップ

WordPressには、無料・有料合わせて多くのテーマが存在しています。

ちなみにこのブログで使用しているのは、有料のAFFINGER5(アフィンガー)というテーマ。

こういったテーマ特有の記事装飾機能を利用することで、さらにおしゃれな表を作ることが可能です。

 

実際にやってみました。

WordPressの機能だけを利用して作った表

比較表サンプル
  大福100px画像 小豆100px画像 最中100px画像
サンプルテキスト テキスト テキスト テキスト
サンプルテキスト
サンプルテキスト 10,000円 20,000円 30,000円
サンプルテキスト テキスト テキスト テキスト
サンプルテキスト テキスト テキスト テキスト

有料テーマの記事装飾を併用して作った表

比較表サンプル
  大福100px画像 小豆100px画像 最中100px画像
サンプルテキスト Windows Windows Mac
サンプルテキスト
サンプルテキスト 10,000円 20,000円 30,000円
サンプルテキスト
サンプルテキスト 詳しくはコチラ 詳しくはコチラ 詳しくはコチラ

 

だいぶ見た目のデザインが変わりましたね。

WordPress有料テーマの多くには、こういった豊富な記事装飾機能が用意されています。

参考AFFINGER5【表作成時に相性のいい6つの記事装飾】使い方も

表のデザインもそうですが、記事全体をスタイリッシュに仕上げたい人におすすめです。

 

\ WordPressで人気の有料テーマ /

AFFINGER5の記事装飾を見てみる

このブログでも絶賛使用中♪

関連当ブログ限定AFFINGER5購入13大特典はこちら

 

まとめ:見やすい表を作ろう

記事内に表を設置することで、物事をわかりやすくユーザーに伝えることができます。

ただし、肝心のその表自体が見づらいのでは本末転倒ですよね。

今回紹介した9つの設定を行えば、誰でも簡単におしゃれな表を作ることが可能です。

ぜひ、自分のブログでも試してみて下さい。

 

  • 関連記事

こちらの記事もよく読まれています

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-How To

© 2021 大福日記