WordPressで一番簡単なレスポンシブな表を作る方法

この記事では、WordPressでレスポンシブな表を作成する簡単な方法を書きたいと思います。

TinyMCE Advancedの導入

まずWordPressで記事投稿をする際のエディタでは、OfficeのWordのような表を挿入するボタンがありません。他にもYouTube 動画コードの挿入がボタン一つでできず、HTMLを書くことになります。ですが、「Tiny MCE Advanced」というプラグインを導入すると下図のように便利なショートカットアイコンが増えます。

TinyMCE Advancedで表の挿入

この中に表を挿入できるボタンがあります(赤い四角)。この赤い四角をクリックすると次のような画面が展開されます。

下図のような表を編集できる画面が出てくるので、投稿する記事の内容に合わせて文字を入力します。

このまま記事作成をすると、次のような状態になっていることが多いです。

このままでは、スマホで見たときに、見づらいサイトの表示になってしまいます。

レスポンシブな表に設定変更する

この表をレスポンシブな表にします。レスポンシブにするためには、作成途中の表にマウスポインタを合わせて、表のプロパティを選択します。

表示されたプロパティで、表の幅のところをクリアします。

再度、記事を確認すると次のようになり、表の幅が自動で調整されるようになります。

パソコン画面用に列の幅を調整したいと思う方がいるかもしれませんが、その説明は書きません。スマホで見る分には、調整してもしなくてもさほど見え方が変わらないです。幅を調整するよりもなるべく表の中の文字数を調整するほうが見やすくなります。スマホで見る分には、多くても４列、５列くらいが限界かなと思われます。

実際のサンプル

上記の手順で作成した表のサンプルを表示します。パソコンでご覧の方は、表の大きさが画面の幅に合わせて自動調節（レスポンシブ）されると思います。スマホでご覧の方は、違和感なく表示できていれば成功となります。

まとめ

WordPressで一番簡単なレスポンシブな表を作る方法を書きました。いくつかの方法を試しましたが、多分これが一番楽なやり方だと思います。