Web集客無料メール講座

ウェブ集客に関するメール講座を期間限定で無料購読できます。

詳細はこちら

【WordPress】HTMLが分からなくても大丈夫!記事に表(テーブル)を挿入する3つの方法

コンテンツの作りこみ

WordPressで投稿・固定ページに投稿する際、記事の中に比較表や料金表等といった表(テーブル)を挿入したいという事があると思います。

WordPressで構築したサイトに表を挿入する方法はいくつかありますが、今回はHTMLを使わなくても簡単に表を作成する3つの方法をご紹介したいと思います。

TinyMCE Advancedをインストールして、表(テーブル)作成機能を追加する

通常のビジュアルエディタには表(テーブル)作成機能はありませんが、ビジュアルエディタを強化するプラグイン「TinyMCE Advanced」をインストールすると、表を作成する機能を追加する事が出来ます。

TinyMCE Advancedのインストール

ダッシュボード>プラグイン>新規追加 を選択します。

プラグイン検索窓に「TinyMCE Advanced」と入力するとプラグインが表示されますので、「今すぐインストール」をクリックします。インストール終了後「有効化」をクリックして、プラグインを有効化します。

メニューの「設定」項目をクリックすると、「TinyMCE Advanced」という名称でプラグインが追加されたことが確認できます。

TinyMCE Advancedの設定

表(テーブル)を作成する機能をビジュアルエディタのツールバーに追加し、表(テーブル)を作成できるように設定します。

ダッシュボード>設定>TinyMCE Advanced を選択します。

エディター設定画面が表示されますので、使用しないボタンの中にある「テーブル」を上部のツールバーにドラッグします。

最近では、プラグインをインストールしただけでテーブルが追加されていたりすることがありますが、一応確認してみて、ツールバーに無かったらドラッグして追加して下さい。

ツールバーにドラッグしたら、「変更を保存」します。

これでTinyMCE Advancedの設定は完了です

TinyMCE Advancedのビジュアルエディタで表(テーブル)を追加する方法(投稿・固定ページ共通)

それでは、TinyMCE Advancedのビジュアルエディタを使って表を作成したいと思います。

記事作成画面のツールバーに追加したテーブルのボタンをクリックすると、テーブル作成メニューが表示されます。

テーブル作成メニューの「テーブル」にマウスオーバーすると、任意の列・行を選択する事ができます。

試しに、「4列(縦)× 3行(横)」の日程表を作ってみたいと思います。

「テーブル」から4×3の場所をマウスオーバーして、クリックします。

記事の中に表が挿入されました。

各セルの中に必要事項を入力して表(テーブル)を作っていきます。

このように、簡単に作成する事が出来ます。

ただ、このままだと素っ気ないので、見やすくするために細かい部分を修正したいと思います。

表(テーブル)の項目を左・右・中央揃えにする

一番上の行の項目を中央揃えにしたいと思います。

一番上の行の項目をドラッグし、「テーブル」メニューを開きます。メニューの行を選択し、「行のプロパティ」をクリックします。

「配置」の項目から①「中央」を選択し、②「OK」をクリックします。

一番上の行が全て中央に揃える事が出来ました。

右に寄せたい場合は「配置」の項目から「右」を選択すれば、右に寄せる事ができます。

枠線・セルの背景の編集

表(テーブル)の枠線の太・色、セルのパディングなどの編集を行います。

表全体をドラッグし、「テーブル」メニューを開き、「表のプロパティ」をクリックします。

表のプロパティが表示されますので、ここで細かい部分を設定します。

「一般」タブ

「一般」のタブではテーブルの幅、枠線の太さ、セルのパディングやスペース等を設定することができます。

「詳細」タブ

「詳細」のタブでは枠線の色や背景色、Border style(線のデザイン)を設定することができます。試しに、カラーを追加してみます。

赤枠内をクリックするとカラーピッカーが開き、自由に色を選ぶ事が出来ます。

変更後、「OK」をクリックします。

下記のように枠線の太さや枠線の色、背景色を変更する事が出来ました。

配色のセンスがダサいですが、お試しで作成したものなのでご容赦ください。

 

テーブル作成プラグインを使って表(テーブル)を作成する方法

テーブル作成プラグイン「TablePress」を使うと、簡単に表(テーブル)を作成する事が出来ます。

TablePressの詳しい情報、使い方等については下記ページに記載していますので、プラグインを使って表(テーブル)を作成したいという方は、下記ページをご覧ください、

テーブル(表)作成プラグイン「TablePress」を使って簡単にテーブル作成。使い方と設定方法を解説

 

Wordファイル・Googleドキュメントで作成した表をコピペして作成する方法

Microsoft Wordファイルや、Googleドキュメントで作成した表を、WordPressの記事にコピペして挿入することができます。

試しに、Wordファイルで作成した表を挿入したいと思います。表全体を選択してコピーします。

コピーした表を、WordPressの記事編集画面にコピペします。

「ビジュアル」になっていることをご確認下さい。

たったこれだけで表を作成する事が出来ます。

ただ、ご覧いただいたとおり、コピーした表(テーブル)は装飾の無い状態でコピーされますので、枠の太さや背景色まではコピーできません。

表(テーブル)の見栄えを変更したい方は、ビジュアルエディタのテーブル機能を使って装飾して下さい。

 

まとめ

以上、HTMLを使わずに記事の中に表(テーブル)を挿入する方法を3つご紹介させて頂きました。HTMLは分からないけど、手軽に表(テーブル)を作成したいという方は、是非、参考にしてみて下さい。

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
無料メール講座
集客に強いWordPressを活用してあなたのファンを引き寄せる「Web集客無料メール講座」

今なら無料で下記ノウハウが手に入ります。

WordPressでビジネスサイトを構築するマニュアル
売り込まなくても楽に売れるWeb集客ノウハウ
あなたの商品・サービスを必要としている人に届ける方法

期間限定2大プレゼント「WordPressでビジネスサイトを構築するマニュアル」&「Web集客無料メール講座」

PROFILE
この記事を書いた人
瀬間 隆司

上野を拠点に中小企業の資金繰り・事業再生コンサルタントとして活動しています。
最近は自分でウェブサイトを作りたいという企業や、独立された方、独立を考えている方等にWordPressを活用したウェブサイト作り方をレクチャーしています。

他にも、チャットボットを作ったり、業務効率化のためにRPAを研究したり、目新しいものに飛びつく傾向があります。

フォローする
コンテンツの作りこみ
クリエイトエクスプレス