WordPressで簡単に見栄えの良い表(テーブル)を作る方法

本記事の内容

ブログ記事に表を入れることで、より読者にとって見やすい記事になります。

だらだらと長い文章で説明されるより、重要な所を抜粋して表でまとめると、より見やすくて、読まれる記事になるので、ぜひ試してみましょう。

それでは、ご紹介します。

WordPressの表の作り方

先ずはWordPressでの表の作り方です。

1. 　WordPressのテーブルを選びましょう

2.　カラム数と行数を決めて表を作成ボタンをクリックすれば表ができます
カラム数は表の列数です

3.　2列×4行の表ができました

4.　表を作った後にブロックスタイルで表のスタイルや文字色、背景色を変えることができます。
因みに私はブログテーマにAFFIMGER6を使用しています。

5.　表に色や背景色を付けてみました

しかし、この状態ではセル毎に枠の色や文字色等を変更することはできません。

より見栄えの良い表(テーブル)を作る為にはプラグインを導入する必要があります。

Toshi

おすすめのプラグインをご紹介します。

プラグイン：Advanced Editor Tools

このプラグインを導入することでクラシックエディタをより自分好みにカスタマイズできます。

ブログの記事作成をより効率化できますし、このプラグインを利用することで、エクセルのように表を編集することが可能となります。

・プラグイン新規追加画面でAdvanced Editor Toolsと検索し、ダウンロードしましょう。

・インストール完了後、設定で色々カスタマイズできますが、デフォルト設定でも十分使用できます。
因みにこのプラグインの旧名はTinyMCE Advancedとなっております。

見栄えの良い表の作り方

表の作り方、表の装飾、表の横スクロール化をそれぞれ順番に説明します。

Toshi

順を追って作成することでWordPressで簡単に見栄えの良い表が完成します。

表の作り方

クラシックエディタから下記画像のマス目となっている記号をクリックします。
テーブルから表のカラム数と列数を選びましょう。クリックすれば表が現れます。

表の装飾

1.　表の外枠線の太さ、色を変更してみましょう

表をすべて選択してから、表のプロパティをクリックしましょう。

2.　表のプロパティの高度な設定から線のスタイルや枠線の色を変更しましょう。

• スタイル内の文字の最後尾に『border: 5px solid;』と入力する
• 枠線の色に好きな色を選択 or 入力する

3.　青くて太い枠線ができました

4.　セルの装飾を行う

先ほどと同様の手順で、次は変更したいセルを選んでから、セルのプロパティをクリックしましょう。

5.　高度な設定で、スタイルに『border: 5px solid;』を入力

枠線の色や背景色も色々とアレンジできます。

6.こちらが完成例です

こちらは私が別記事にて装飾した表です。表の外枠、項目セルの色、各文字の色や背景色を装飾しています。

何も装飾していない表よりこちらの方が、何を注目してほしいのか表現することができますね。

表を横スクロール化

表のスクロール化をすることで表の形が自然な形となります。

未スクロール化の場合

横幅が固定されてしまうので縦に長い表となってしまいます。

スクロール化した場合

縦が固定されることで形の整った表になりました。
下側のスクロールバーで表を左右に動かして見ることが可能です。

　実際の表はこちら(横にスクロールすることが可能)

スクロール化の設定手順

1. 　HTMLとして編集をクリック

2.　HTML編集画面となるので、一番先頭に下記のコードを入力しましょう

<div class="scroll-box pc">

これで表のスクロール化完了となります。　

まとめ：見栄えの良い表(テーブル)を作りましょう

今回は、WordPressで簡単に表を作る方法・見栄えの良い装飾方法ついて解説しました。

ブログ記事に表を入れることで、より読者にとって見やすい記事になります。

見やすい記事を作ることにより読者の直帰率にも繋がりますし、最終的にはアクセス数増加となります。

ブログをより良く見せる別の手法としてブログカードがあります。

ブログカードを作る方法は、【AFFINGER6】 ブログカードを簡単に作成する方法にて、ご覧ください。

ブログカードを使用すれば、下記のように表現することができます。

今回は以上です。