WordPress 誰でもできる簡単な表の作り方！[初心者向け]

ブログを始めてWordPressに少し慣れてくると、もう少し記事を見やすくしてみたいな～って思ってきますよね。

　

ただ文字をずらずらと打ち込んで並べるよりも、表(テーブル)があった方がだいぶ見やすくなるんです。

　

しかし実際にやってみようとすると、表を作成するボタンがない・・・。

もちろんコードで書くことができれば解決なんですが、今回は誰にでも簡単にできる表の作り方ということで、プラグインを使った方法を説明したいと思います。

　

目次

• 1. TinyMCE advancedの導入のやり方
• 2. TinyMCE advancedを使った表(テーブル)作成
  • 2.1. 表の挿入のやり方
  • 2.2. 行と列について
  • 2.3. 行と列の挿入と削除
    • 2.3.1. ★行の挿入
    • 2.3.2. ★行の削除
    • 2.3.3. ★列の挿入
    • 2.3.4. ★列の削除
  • 2.4. 枠線の付け方
• 3. まとめ

TinyMCE advancedの導入のやり方

WordPressで表を作るには、プラグインを導入する必要があります。

導入と言っても、とっても簡単にできるので安心してください。

では、プラグイン導入のやり方から説明していきます。

　

左側の[プラグイン]から、[新規追加]をクリックして、プラグイン追加の画面を開きます。

右上の[キーワード]の所に、[TinyMEC advanced]と入力します。

途中まで入力すれば検索で出てくるので、[tinymce]とだけ入れれば大丈夫です。

　

検索結果に出てきたら、[今すぐインストール]をクリックしてインストールをします。

インストールが完了したら、[有効化]をクリックします。

有効化をしたらプラグインの導入は完了です。簡単ですね♪

　

TinyMCE advancedを使った表(テーブル)作成

それではさっそく表を作っていきます。

表の挿入のやり方

TinyMCE advancedを入れると、右側に[Classic Paragraphの追加]というボタンが出てくるので、それをクリックします。

[Classic Paragraphの追加]を押すと、このような画面が出てくるようになります。

そうしたらテーブルのマーク(矢印)の所をクリックして、テーブルを選択すると右側に四角の枠が出てきます。

ここで青く表示されている分だけ表ができるので、必要な分だけを選択してクリックしてください。

今回は行3マス、列3マスの3×3の表を作ってみようと思います。

クリックすると、ブロックの中に表が出てきます。

先ほど選択した通り、3×3の表が完成しました。

行と列について

行と列の違いについて説明します。

もうすでに理解しているよ。という人はここは飛ばしてもらって大丈夫です。

まず、行について説明します。

行は横を指します。イメージとしてはこんな感じですね。

続いて列の説明です。

列は縦を指します。イメージとしてはこんな感じです。

でも、これは一度頭で理解しても時々どっちがどっちだかわからなくなるときがあるんですよね。

私も何度も経験があります。でも安心してください。

そんなときに簡単に思い出せる方法がありますので紹介します。

この行と列という文字をよく見て下さい。これにヒントが隠されているんです。

行という字は横に線が2本あります。

列という字は縦に線が2本あります。

ペイントで頑張って書いたのですごい下手ですが、これでもう忘れないですね！？わからなくなったら行と列の文字を見て思い出しましょう！

行と列の挿入と削除

行と列の違いを理解できたので、次は行と列の挿入と削除のやり方についての説明です。

　

わかりやすくするためにあらかじめ表には文字を入れておきました。

★行の挿入

まずは行の挿入について見ていきます！

行を挿入したいセルを最初にクリックしておき(今回はうの所にカーソルを置いています)、先ほどと同じようにテーブルのマークをクリックします。

次に、行のところにカーソルを持っていくと右にページが開きます。

最初は[行の上に挿入]をやってみたいと思いますので、一番上の[行の上に挿入]をクリックします。

そうすると、クリックしておいたセル(うのセル)の上に行が挿入されました。

次はうの下に行を挿入してみたいと思います。

テーブルのマークから行を選び、[行を下に挿入]をクリックします。

うの下に行を追加することができました。

★行の削除

次は行の削除をやっていきます。

うのセルが入っている行を削除したいと思います。

うのセルをクリックして、テーブルのマークから行を選び、[行を削除]をクリックします。

うのセルが入っている行が削除されました。

★列の挿入

続いて列の挿入のやり方です。これも行とやり方はほぼ同じなので簡単です。

まずは[あ]のセルをクリックして、テーブルのマークから列を選び、[列を左に挿入]をクリックします。

そうすると[あ]のセルの左に列が挿入されました。

次も同じように[あ]のセルをクリックして、テーブルのマークから列を選択し、[列を右に挿入]をクリックします。

[あ]と[い]のセルの間に列が一つ追加されました。

★列の削除

次は、列の削除をしていきたいと思います。

[あ]のセルをクリックして、テーブルのマークから列を選択し、[列の削除]をクリックします。

そうすると、[あ]のセルが入った列が削除されました。

枠線の付け方

表は枠線があった方が見やすいので、最後に枠線を付けるやり方です。

まずは枠線を付けたい所をドラッグして選択します。青くなっていれば大丈夫です。今回は全体に一気に枠線を付けます。

テーブルのマークのセルから[セルのプロパティ]をクリックします。

セルのプロパティのタブ[高度な設定]を開き、枠線の色の赤丸の部分をクリックします。

枠線の色を選択することができます。黒の場合はそのままOKを選択します。

次は枠線のスタイルを決めます。

Border styleからSolidを選択して、OKをクリックします。

表に枠線を引くことができました。

もしうまくいかない場合はこちらもご覧ください。

WordPress プラグイン[TinyMCE Advanced]でセルの結合ができない時の解決法と表の編集の仕方

応用編で、セルの結合や表の色の付け方も載せています。

　

まとめ

プラグインを使用することで、コードを書かなくても誰でも簡単に表を作ることができますね。

　

表があるのと無いのとでは、見やすさもだいぶ変わってくると思います。

TinyMCE advancedを上手に使いこなして、読みやすいブログを目指していきましょう♪