AFFINGER5見やすい表の作り方【手順を全て解説】

AFFINGER5を使用して「見やすい表（テーブル）」を作る手順を解説していきます。

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

小豆

AFFINGER5を購入して、思い通りのブログデザインや記事装飾ができるようになった。
ただ、どうしても表だけが上手く作れない。
AFFINGERのデザインに負けないくらい見た目のいい表を作る方法を教えて！　

WordPressを使い始めて2年、AFFINGER5を使うこと1年。

ライバルに差をつける見やすい表を作る手順を、以前は表作成が大の苦手だった僕がわかりやすく解説します。

AFFINGER5には表を作る機能はついていない【準備しよう】

使いきれないほど豊富な記事装飾機能がついているAFFINGER5ですが、残念ながら表を作る機能はデフォルトではついていません。

というわけで、AFFINGERユーザー含めWordPressを使用している多くの人は【TablePress】という無料の表作成プラグインを使用しています。

ですが、ここで紹介する方法ではプラグイン【TablePress】は使用しません。

もっと簡単・手軽に初心者でも表を作る方法を紹介します。

プラグインのインストールと有効化をしておこう

表作成専用プラグインの【TablePress】は使用しませんが、ここでは【Advanced Editor Tools】（旧：TinyMCE Advanced）を使用します。

ちなみに大人気のプラグイン【Advanced Editor Tools】（旧：TinyMCE Advanced）は、AFFINGER5公式マニュアルでも「インストールしておきたい必須プラグイン」として紹介されています。

※WING公式マニュアルより抜粋（購入者だけが見れるページです）

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

こんな表を作る手順を解説します

プラグイン【Advanced Editor Tools】を使用して作った表がこれ。

小豆

お世辞にも見栄えが良いとは言えない・・。

デフォルトの状態ではなんだか「ぼってりした見た目」で残念な感じですよね。

というわけで、こんな感じの見た目にカスタマイズする方法を紹介していきます。

AFFINGERで見やすい表を作る手順【真似するだけでOK】

表の作成からカスタマイズまで、手順は全部で4つ。

小豆

うーん。項目が多くて難しそう。

文字にするとそう見えるけど、実際にやってみるとあっという間に終わるよ。

大福

step
1ベースとなる表を作る

テーブルボタンをクリックして、任意の大きさの表を作ります。

ここでは、行（横）4　×　列（縦）4に指定しました。

step
2セルの結合をする

結合したいセルを選択した状態で、表ボタン　→　セル　→　セルの結合をクリック

ここでは、同じ手順で3行目と4行目のセルの結合を行いました。

step
3文字の装飾とセルの背景色を決める

セル内に文字を入力したら、最後に表全体を選択して中央揃えボタンをクリックします。

1行目を選択した状態でテキスト色ボタンから白を選択

1行目を選択した状態で背景色ボタンに黒を設定

表ボタン　→　セル　→　セルのプロパティ　→　高度な設定　→　背景色にカラーコード「#000000」を入力

同じ要領で2～4行目にも背景色を設定していきます。

ここでは以下のように設定しました。

step
4セルの余白を設定する

最後は、セルの余白（大きさ）を変更して、よりスッキリした見た目にしてきます。

余白を調整したいセルを選択した状態で、表ボタン　→　セル　→　セルのプロパティ　→　高度な設定

（👆ここでは、2～4行目を選択）

スタイルにセルの余白を設定するコード「padding: 5px;」を入力します。

数字を大きくするほど余白は広く、数字を小さくするほど余白は狭くなります。

大福

これで完成です。お疲れさまでした♪

見やすい表が完成しました。

こんな場合はどうする？覚えておきたい表作成の応用編

覚えておくと便利ない応用編の紹介です。

列を任意の幅にするにはどうするの？

列幅は思い通りに変更ができます。

幅を選択したい列を選択　→　表ボタン　→　セル　→　セルのプロパティ　→　幅

幅に入力する数値は必ず「〇〇％」で入力します。

列や行を途中で追加する方法

表の作成途中でも、列や行を簡単に追加したり削除することができます。

列や行を追加したいセルを選択した状態で、表ボタン　→　列もしくは行　→　挿入

列や行は選択したセルの上や下、左や右に自由に追加で挿入することができます。

※削除の場合も方法は同じです。表ボタン→列もしくは行→削除

横長の表をスクロール表示させる方法

パソコンでは見やすい表も、縦長のスマホ画面では見づらい場合があります。

そんな場合は、表のスクロールを利用すると見やすくなります。

スタイル　→　テーブル　→　横スクロール

表に画像を挿入する方法

表内のセルに画像を挿入することも可能です。

画像を挿入したいセルをクリック　→　メディアを追加　をクリック

まとめ：表作成をマスターしてライバルに差を付けよう

商品やサービスの比較時、多くの項目をわかりやすく伝えたいときなどに表はすごく便利です。

表作成をマスターして、サイトを訪れてくれた人を満足させる表が作れるようになりたいですね。

小豆

表を作るのが苦手。

こんな人は、ぜひ今回紹介した方法を試してみて下さい。

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する