ワードプレス記事に表は必須！簡単な作り方と使える編集方法

ワードプレスで記事を書く際、覚えておきたいスキルの1つは表を作ることです。

月額利用料金や機能・メリット・デメリットなど、複数のものを比較したい時にはとても役立ちます。

ダラダラと文字だけで説明していると、要点が伝わりづらく読者が離れてしまうことがありますが、表にすれば一目瞭然で比較がしやすくなるのです。

ここでは、ワードプレスで表を作る方法や編集・配置・色を変えるなど、より目を引く表を作るために役立つ情報をお伝えしていきます。

あなたのブログがグッと見やすくなるように、表を作るテクニックを身に付けていきましょう。

ワードプレスで表を作成する方法

さっそくワードプレスで表を作成する方法からお話していきます。

細かい方法はたくさんあるのですが、新・旧エディタで使える主な方法をお伝えしていきますね。

この方法を押さえておけば、表を作るのに困ることはありません。

それぞれの方法を比較し、ご自身でやりやすい方法をマスターしていきましょう。

１．旧エディタで表を作る方法

旧エディタでは、テキストエディタで挿入する方法とプラグインをインストールして表を作る方法があります。

表のプラグインをインストールして作った方が、ビジュアルですぐに確認できるので初心者向けです。

しかし、テキストとして表のhtmlを知っておくと便利なこともあります。

状況によって使い分けられるようにしておくと良いでしょう。

プラグインをインストールして作る

表を作るプラグインは多くありますが、ここでは「TinyMCE Advanced」を使った方法を紹介します。

始めに、プラグインをインストールしましょう。

ワードプレスを開き、左側の「プラグイン」を選びます。

「新規追加」をクリックして、TinyMCE Advancedを検索してください。

「インストール」をクリックし、有効化のボタンをクリックします。

プラグインが有効化されると、ビジュアルエディタで新しいアイコンが追加されます。

テーブルのアイコンをクリックし、「テーブル」にカーソルを合わせると行と列を選択できます。

必要な数の行と列をドラッグし、離すと自動的に挿入されます。

行と列の増減は簡単にできるので、始めから行や列の数を決めていなくても大丈夫ですよ。

テキストエディタで表を作る

旧エディタでは、htmlのテキストで表を挿入することも可能です。

htmlでは、表を<table>で表します。

<tr>が行、<td>で囲まれた箇所がセルです。

なので<tr></tr>の中に<td></td>があり、文字をセルの中に入れてください。

ビジュアルエディタで見ると以下のようになります。

htmlテキストで入力するのは、時間と手間がかかります。

しかし、知っておくだけでちょっとした修正などがすぐにできるので、便利です。

２．新エディタ（グーテンベルグ）で表を作る方法

次に、ワードプレスの新エディターであるグーテンベルグで表を作る方法です。

グーテンベルグは様々なブロック（機能）があり、表も簡単に挿入することができます。

表を作るためには「テーブル」というブロックを使います。

まずは新規ページを開き、表を作りたいところにカーソルを合わせましょう。

左上にある「＋」マークがブロック追加をするところです。

＋マークをクリックし、フォーマットの中からテーブルをクリックします。

列数と行数を選択する画面になるので、必要なカラム数（列）と行数を入力し、「表を作成」をクリックしてください。

これだけで表の挿入が完了します。

各セルに文字を入力し、表を完成させましょう。

３．新旧どちらもできる！表計算ソフトで表を作る方法

新・旧エディタどちらの場合でも表計算ソフトで表を作り、挿入することができます。

ワードプレス上で表を作るのではなく、別のところで作った表を挿入するということです。

ExcelやGoogleスプレッドシート・ナンバーズなどの表計算ソフトが有名どころで使いやすいでしょう。

それぞれの作成方法をみていきましょう。

旧エディタでの作成方法

表計算ソフトで表を作ったら、範囲指定しコピーします。

ワードプレスのビジュアルエディタでそのまま貼り付けましょう。

これで表の挿入が完了です。

新エディタでの作成方法

新エディタに貼り付けする場合も、表計算ソフトで作った表をコピーします。

そして、「＋」マークのブロック追加から「段落」を選択します。

そのままコピーした表を貼り付けましょう。

これで挿入完了です。

表の列や行を追加・削除する方法

続いて表の列や行を追加、削除する方法をご説明していきます。

表を作り進めていくと、「行が足りなくなってしまった！」なんてこともあるはずです。

また「あれ…この列は必要なかったな」と追加や削除が必要になる場面もあるでしょう。

こんな時追加と削除の方法が分からないと、また一から表を作らなければならず、手間がかかってしまいます。

行や列の追加・削除も覚えてしまえば簡単な操作でできるので、ぜひ習得してみてください。

旧エディタ（クラシックエディタ）で列や行を追加・削除する方法

「TinyMCE Advanced」をインストールした場合、表の編集がとても簡単です。

始めに基準となるセルを選択します。

上部にある表のアイコンもしくはテーブルをクリックしてみましょう。

クリックするとセル・行・列と選択項目があり、行・列をクリックしてください。

行を上に挿入を選ぶと、選択していたセルの上に行が挿入されます。

列の場合も同じように選択すれば、簡単に挿入や削除ができます。

テキストエディタで編集する場合は、<tr>で行を増やしましょう。

その際、<td>でセルの数を合わせることを忘れないでください。

これで行の挿入ができます。

削除する場合は、不要な箇所を削除すると良いでしょう。

新エディタ（グーテンベルグ）で列や行を追加・削除する方法

続いて新エディタで編集する方法をご紹介します。

表をクリックすると編集ブロックがでてきます。

そこで、「表の編集」をクリック。

すると、列と行の追加・削除するタブがでてきます。

行・列を上に挿入・下に挿入・削除から必要なものを選びクリックします。

これで、列や行が追加・削除が完了です。

表の行幅・列幅を変える方法

続いて表の行幅・列幅を変える方法をご説明します。

新エディタのテーブルブロックでは、幅を細かく設定することはできません。

細かい設定をしたい場合は、「ブロックを追加」からテキストの「クラシック」を選んでください。

すると、旧エディタのツールバーと同じものが出てくるので、同じように表の作成や編集ができます。

ここからは、旧エディタでの2つの編集方法をご紹介しますが、どちらも簡単に幅を変えることが可能です。

それでは、順にみていきましょう。

ドラッグで引っ張る方法

まずはドラッグで引っ張る方法です。

表の上でクリックをすると、全体が選択されます。

四隅に▢マークが表示されるか確認しましょう。

▢マークがでてくれば選択がきちんと出来ている証拠です。

▢の1つをクリックしたまま、ドラッグで引っ張ると、均等に行幅・列幅が広がっていきます。

行の幅を変えたいときは、全体を選択し行の下で↓が出るところをドラッグしながら上下にすると変わります。

列の場合も同様に全体を選択し、列の横で→が出るところをドラッグしながら左右にすると変わります。

表作りに慣れていない方におすすめの簡単な方法です。

ピクセルの数値を入れる方法

続いてピクセルの数値を入れる方法です。

ドラッグで引っ張る方法と同じく、表の上でクリックし、全体を選択します。

続いてテーブルをクリックし、表のプロパティを選択しましょう。

プロパティを開くと幅・高さを入力する画面になるので、お好みでピクセル数を入れます。

幅は列幅・高さは行幅のことです。

最後にOKボタンをクリックしましょう。

これで、幅の変更が適応されます。

表のテキストを中央寄せ・右寄せ・左寄せにする方法

テキストの配置換えをしたいこともありますよね。

セルに文字を入力した際、最初は左寄せになっているはずです。

中央寄せや右寄せの方が見やすい場合には、配置換えを行ってみましょう。

まず旧エディタで行う場合です。

配置換えをしたいセルをドラッグで範囲選択します。

上部にあるファイルなどが並ぶ下に編集バーがあります。

「中央寄せ」「右寄せ」のアイコンをクリックすると、範囲設定されたセルが適応されます。

次に新エディタで行う方法です。

セルをドラッグで範囲選択します。

ブロック設定の「カラムの配置を変更」をクリックします。

左寄せ、中央寄せ、右寄せの中から適切なものを選択しましょう。

これで、配置が変わります。

一括で列全体の配置が変えられるのは便利ですね。

注目度がアップ！表に色をつける方法

無色の表でも十分見やすくなりますが、どこか味気ないと感じることもあるかと思います。

そんな時は、表に色をつけてみましょう。

表に色をつけるとインパクトが増し、記事に留まる時間も長くなります。

特に注目して欲しいところに色をつけると、視覚的にアピールができます。

全てに色をつけるというよりは、ここがポイント！というところに絞って色をつけていくと注目度があがるでしょう。

表の色をつける箇所は、2種類あります。

どちらも同じ手順で色をつけることができます。

まずは、旧エディタで色をつける方法からご紹介します。

初期設定は、文字色と同じく黒い枠線、白背景です。

色を変えるには、まず変えたいセルの範囲設定をしましょう。

範囲設定ができたら、上部にあるテーブルアイコンの中のセルを選び、セルのプロパティに進みます。

セルのプロパティを開き、「高度な設定」を選びましょう。

枠線の色、背景色という項目の右端を見ると「▢」マークがありますね。

そちらをクリックすると、パレットが表示されます。

変えたい色のところまでカーソルを動かし、その上でクリックをしてください。

最後にOKボタンをクリックすると、枠線の色が選択した色に変わります。

色のコードが分かっていれば、そのままコードを入力しても大丈夫です。

同じ色で揃えたいときは、コードをメモっておくと良いでしょう。

一方、新エディタでは、旧エディタにはない「ストライプ」の表を作ることができます。

テーブルブロックを選択すると右側の「スタイル」から「ストライプ」を選ぶだけです。

また背景色も右側の「色設定」で色を変えることができます。

新エディタでは、背景全体の色を設定することしかできず、セルだけを変えることはできません。

表のセルを結合・分割する方法

セルの結合・分割する方法も覚えておくと便利です。

「ここは同じ内容だから結合したい」

「細かい違いがあるから分割したい」

という場合があるでしょう。

まずは、セルの結合方法をお話していきます。

結合したいセルをドラッグで範囲設定します。

テーブルアイコンをクリックしセルを選択から「セルの結合」を選びましょう。

これで範囲指定したセルが結合されます。

分割の方法も同じ手順でとても簡単です。

分割したいセルをドラッグで範囲設定します。

テーブルからセルを選択し、「テーブルセルを分割」をクリックしましょう。

これで範囲指定したセルが分割されます。

表をあっという間にリセットする方法

最後に表をリセットする方法をお伝えしておきます。

リセットとは、表を完全に削除することをいいます。

deleteキーを使って削除しようとすると、セルの中の文字は消えても、表が残ってしまうという状況になってしまいます。

リセット方法が分からずお悩みの方は、こちらのやり方をマスターしましょう。

まずは、旧エディタでのリセット方法です。

表の上でクリックをします。

四隅に「▢」マークが現れ、全体が範囲指定されたことを確認してください。

範囲指定した状態で、テーブルアイコンをクリック、「表を削除」をクリックします。

これで、表のリセット（削除）は完了です。

新エディタでは、ブロック設定から「ブロックを削除」をクリックすると表が削除されます。

一瞬で表全体が消えるため、知っていればなんてことない操作ですよね。

このように表の編集や削除は、様々なことがワンクリックで行えます。

まとめ

ワードプレスで表を作る方法をご紹介してきました。

新エディタ（グーテンベルグ）か旧エディタ（クラシックエディター）かによって、挿入方法に違いがあります。

新エディタは、細かい設定はできないですが、テーブルアイコンから一括して編集可能なので初心者でも簡単です。

行や列の追加・削除やセル幅を変えることも、ワンクリックほどの簡単な操作で編集ができます。

また、より効果的で注目してもらえる表にするには、色を変えることが重要です。

文字だけの記事よりも見やすく、読者もひかれやすくなるため、ぜひ表作りをマスターしてくださいね。