今回は、ワードプレスで表を作成する方法を、プラグインありとなしの2つに分けて解説していきます。

HTMLが苦手な方は参考にしてみてください。

 

TinyMCE Advancedで作成する

プラグインを使う方法でもっともおすすめなのは、TinyMCE Advancedというプラグインを使う方法です。

これはビジュアルエディタの機能を拡張させることができ、表を作成すること以外にも役立ちます。

tinymce-advanced

TinyMCE Advancedをインストールして有効化すると、ビジュアルエディタにテーブルが追加され、上の画像のように、表の範囲を指定することが可能になります。

tinymce-advanced2

デフォルトだと、縦につぶれたような表になっています。

そこで、カーソルを合わせて横に広げると、下の画像のように表が横に大きくなりました。

tinymce-advanced3

この空白に文字を入れれば、簡単に表が完成します。

TablePressで作成する

TablePressで表を作成するには、TablePressの「新しいテーブルを追加」をクリック

tablepress

テーブルの名前を入力して、「テーブルの追加」をクリックします。

tablepress2

すると、上のような画面が表示されるので、表を埋めていきます。

tablepress3

表が完成したら、管理画面の上にある「変更を保存」をクリック

tablepress4

最後に、管理画面右上のショートコードをコピーして、テキストエディタに貼り付ければOKです。

プラグインなしで作成する

プラグインを使えば簡単に表を作成できますが、プラグインに頼りすぎると、サイトに負担がかかりますので、なるべくプラグインを使わない方法を推奨します。

もっとも手っ取り早いのは、エクセルで表を作成して、ワードプレスのビジュアルエディタで貼り付けるというやり方です。

ただ、この方法だと、例えば下のような表をそのままビジュアルエディタに貼り付けます。

%e8%a1%a8

HTMLにすると以下のようになり、結構複雑になります。

<table width=”216″>
<tbody>
<tr>
<td style=”font-weight: 400;” width=”72″>1</td>
<td style=”font-weight: 400;” width=”72″>2</td>
<td style=”font-weight: 400;” width=”72″>3</td>
</tr>
<tr>
<td style=”font-weight: 400;” width=”72″>4</td>
<td style=”font-weight: 400;” width=”72″>5</td>
<td style=”font-weight: 400;” width=”72″>6</td>
</tr>
<tr>
<td style=”font-weight: 400;” width=”72″>7</td>
<td style=”font-weight: 400;” width=”72″>8</td>
<td style=”font-weight: 400;” width=”72″>9</td>
</tr>
</tbody>
</table>

これがSEOに影響するかどうかは分かりませんが、HTMLの構造はシンプルなほうがSEO的にもいいと思うので、そのまま貼り付けるのはおすすめできません。

そこで、私がよくやっているのは、エクセルで表を作成して、それをエクセルシートをHTMLテーブルに変換しちゃう君 (ββ)というサイトでHTMLに変換して、貼り付けする方法です。

このサイトのいいところは、セルの結合にも対応していて、文字の色も変えることができます。

下の表は、エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)で作成したものです。

月の名称
1月 睦月
2月 如月
3月 弥生
4月 卯月
5月 皐月
6月 水無月
7月 文月
8月 葉月
9月 長月
10月 神無月
11月 霜月
12月 師走

コピーペーストだけの作業なので、作成には1分もかかっていません。

%e5%a4%89%e6%8f%9b%e3%83%97%e3%83%ac%e3%83%93%e3%83%a5%e3%83%bc

プレビューも見ることができるのでとても便利です。

ちなみに、エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)で変換されたタグは、下の画像のように縦に長く表示されます。

html%e8%a1%a8%e7%a4%ba

気にならない人はそのままでもOKですが、気になる場合、一度ビジュアルエディタに変えて、もう一度テキストエディタに戻せば、タグを整えることができます。

この記事が気に入ったら
いいね ! しよう

Twitter で