WordPressで記事を作成するときに、明確に表で数値を表すと説得力が増す場合があります。ただ単に、文章で数値について書き連ねるよりも、視覚にダイレクトに飛び込んできます。そのため、表には見た目も重要なのです。しかし、WordPressをはじめたばかりだと、どのように表を作成すればいいのかわからない人もいるでしょう。この記事では、おしゃれでレスポンシブな表の作成方法を紹介します。おしゃれで見やすい表を導入して、サイトユーザーへ的確に情報を提供しましょう。

レスポンシブな表とは

「レスポンシブな表」とはどのような表なのか、よくわからない人も多いかもしれません。レスポンシブとは、パソコンやスマートフォン、タブレットなどのデバイスに合わせて、サイズやレイアウトを自動で調整する機能です。1つのHTMLをCSSで制御して、ユーザーのデバイスに合わせて調整して表示させます。つまり、レスポンシブな表とは、パソコンからのアクセスにはパソコン用の表を、スマートフォンにはスマートフォン用の表を、それぞれ1つのソースで提供することができるのです。

特に、スマートフォンでパソコンの表を表示させると、画面が小さいので、全ての表が画面に収まりません。せっかく作った表を、新たにスマートフォン用やタブレット用に作りかえるには、非常に手間がかかります。また、将来的に新たなデバイスが出てきたときに、表の改修作業に追われることにもなりかねません。その点、レスポンシブな表を作っておけば、デバイスに合わせて表を作り変える必要がなく、手間もかからないということです。そして、データ等を修正する際も全てのデバイスに対応しているので1つの工程で済みます。

スマートフォンの普及により、レスポンシブ対応の重要度は増しています。表が小さくて見にくかったり、画面からはみ出してしまったりしていると、訪問してくれたユーザーを逃してしまう恐れがあります。よって、レスポンシブな対応はアクセス数を増やすための必須事項となるでしょう。

記事内に表を挿入するメリット

表を作るのは、文章をただ入力していくよりも手間がかかりますが、その分メリットも多いのです。そのメリットの1つが、見やすさです。数字で統計などを表示したいときに表にすると、ユーザーにとって非常に見やすくなります。また、比較検討することが目的の場合には、その差が一目見ただけで理解できます。そして、文字を羅列するよりも直感的に情報を得られやすいことも大きなメリットです。ネットで情報を検索して記事を見つけたときに、その記事を上から下まで一言一句逃さずに読む人は少ないでしょう。

大半の人は、目的の情報が書かれている場所を探して、その部分だけ読んで情報を得ようとします。そんな流し見をしているユーザーにも、一目で分かる表は効果的です。さらに、おしゃれで分かりやすい表であれば目をひくでしょう。特に、アフィリエイトサイトにおいては、表を作成して記事の説得力を上げることが大事です。ユーザーを納得させることができれば、売り上げにもつながります。読んでもらいやすい記事を作るためにも、文章だけではなく表などを効果的に使用して、興味をひくことが重要になるのです。

記事内に表を挿入する方法

記事内に表を挿入する方法は4つあります。ここでは、それぞれの具体的な挿入方法を説明していきます。まず、1つ目がビジュアルエディタを拡張することです。WordPressのビジュアルエディタは機能が制限されているので、拡張できるプラグインをインストールします。プラグインを設定すると、ビジュアルモードのところに、ボタンが増えます。それらを使って、表を作成し挿入することができるのです。また、エディタから行や列の追加や削除も簡単に行えます。アイコンの表示に従って操作を行うと、スムーズに表を作成・編集することができるでしょう。

2つ目が、Microsoft Wordで作った表を使う方法です。Microsoft Wordで表を作り慣れている人はこちらの方法のほうが簡単でしょう。また、Microsoft Wordにすでに表や情報がある場合もこの方法が便利です。具体的な操作としては、まずMicrosoft Wordで表を作ります。そして、その表をコピーしてWordPressの挿入したい場所に貼り付けます。このときに、テキストモードではなく、ビジュアルモードになっていることを確認してください。そうすることによって、Microsoft Wordで作った表を簡単にWordPressに取り入れることができるのです。HTMLに馴染みのない人はこちらの方法のほうが、扱いやすいかもしれません。ただし、行や列の削除などを修正したい場合は、WordPressで修正することができないので、Microsoft Wordで編集し直して貼り付ける必要があります。

3つ目が、HTMLを記述する方法です。プログラミングの知識がないとHTMLの記述は難しく思われるかもしれませんが、簡単な表であれば専門的な知識がなくても表を作成することが可能です。具体的には、エディタのテキストモードを使って<table>～</table>タグで記述します。

さらに、<tr>～</tr>で囲まれた部分が行、<td>～</td>で囲まれた部分がセルとなり、<tr>～</tr>の中に、<td>～</td>を挿入するような形です。コードを直接記述していくので、行や列の追加や削除も簡単に行えます。

4つ目が、表計算ソフトで作った表を貼り付ける方法です。Microsoft ExcelやGoogleのスプレッドシートなどの表計算ソフトで表を作ることができるので、それをMicrosoft Wordと同じく、エディタのビジュアルモードで貼り付けるものです。もともと、表やグラフを作ることに特化したソフトなので、Microsoft ExcelやGoogleのスプレッドシートに慣れている人はこちらで作って貼り付ける方法が、1番簡単かもしれません。しかし、Microsoft Wordと同じように、表の修正を行う場合には表計算ソフトで作り直す必要があります。WordPress上で簡単に書き換えることができないのが難点です。

【おすすめプラグイン】1.Jetpack Markdown

ビジュアルエディタを拡張できるプラグインに、Jetpack Markdownがあります。Jetpack Markdownは複雑なHTMLの記述をすることなく、最低限の動作でマークアップできます。通常、HTMLの記述をしたり、見出しの変更のためにマウスを操作したり、それを反復することが多かったのですが、Jetpack Markdownでは、簡単な要素で入力することができるのです。例えば、「＃」と入力すると自動的に

タグなどに変換されて、見出しになります。

インストール方法としては、Jetpack Markdownをプラグインタブから検索する方法があります。また、プラグインのサイトからダウンロードすることも可能です。ここで注意しておきたいのが、Jetpack利用者のインストールです。すでに、Jetpackを利用している人がJetpack Markdownをインストールしようとすると、エラーが起きます。Jetpackがすでにインストールされているのであれば、インストール不要で同じような機能を使用することができます。

【おすすめプラグイン】2.TinyMCE Advanced

Jetpack Markdownに続いて、WordPressのビジュアルエディタを拡張できるプラグインとしておすすめなのが、TinyMCE Advancedです。TinyMCE Advancedの特徴として、数あるビジュアルエディタの拡張プラグインのなかでも特にカスタマイズ性に優れている点が挙げられます。WordPressのビジュアルエディタでは、使用できるボタンが限られていますが、TinyMCE Advancedを導入すると一気に使用できるボタンが増えます。Microsoft Wordやブログと同じようなカスタマイズができるボタンが増えるので、自由度が高くなります。

さらに、使用頻度の多いボタンを並べておけるので、作業効率もアップするでしょう。インストール方法は、管理画面からプラグインを検索する方法と、プラグイン公式サイトからダウンロードする方法があります。インストールしたら、管理画面を開いてみましょう。すると、たくさんのボタンが表示されます。このボタンはドラッグ＆ドロップで簡単に並び変えたり、削除したりすることが可能です。使うやすいようにカスタマイズができたら、「Save Changes」で変更を保存しましょう。

TinyMCE Advancedは管理画面が英語ですが、ボタンは日本語に対応しています。エディタでボタンにマウスオーバーすると、日本語で機能の説明がでてくるので安心して使うことができます。

【おすすめプラグイン】3.TablePress

WordPressのビジュアルエディタを拡張できるプラグインとして、TablePressもおすすめです。TablePressは、テーブルを作成し、挿入するためのプラグインです。HTMLの知識がない初心者でも簡単に表を作成できるので、コードに不慣れな人は導入するといいでしょう。TablePressは、WordPressの公式サイトからインストールすることができます。そして、有効化すると、管理画面にTablePressが表示されます。ここで、テーブルの新規追加を行い、表にしたい内容を入力して進めていきましょう。

データを入力する方法は、2つあります。1つは手動で入力する方法、もう1つはデータをインポートする方法です。手動で入力する場合は、テーブルの内容に沿って入力を進めていきます。もう1つのインポート機能は、Microsoft Excelなどでデータをあらかじめ作っている場合、それをコピーして貼り付けるだけで表が作れる機能です。そして作成したテーブルのショートコードをコピーして、挿入したい箇所に貼り付ければ完成です。セルの幅を変える場合も、ショートコードの編集で変更することができます。

また、見出しの位置を変更したり、枠線を追加したりすることもTablePressで可能です。ほかにも、TablePressでは、行や列を追加したり削除したりすることや、セルどうしを結合することもできます。日本語に対応しているので、HTMLの知識がなくても、見たまま入力を進めていけるでしょう。

WordPressで表を入れる方法2種類

WordPressで表を挿入する方法は、TablePressやElementorと呼ばれるプラグインを導入することです。TablePressは扱いやすく、直感的に操作することで簡単に表を作成することができます。また、Elementorでは、TablePressよりさらにテーブルのデザインがしやすくなっています。ElementorはWordPressのページビルダープラグインです。表を作成すること以外にも、レイアウトをページ単位で自由に変更できたり、テキストやアイコン、写真などのWordPressの要素を取り入れたりできるのです。さらに、Elementorはレスポンシブにも対応しています。

レスポンシブ対応になっていないと、デバイスによっては画面からはみ出したり、小さくなったりして、せっかく作った表が見にくくなってしまいます。また、デバイスに合わせて表を作り変える必要があり、工数がかかります。表には数値などの細かいデータがあるので、工数が多いと修正時のミスも起こりやすくなります。したがって、レスポンシブ対応になっているElementorがおすすめとなります。

まとめ

WordPressで記事を書くときに、表を入れることで見やすくなり、視覚的にユーザーに訴えかけることができます。そのため、おしゃれでレスポンシブな表をサイトに挿入するのがおすすめです。ユーザーにとって、見やすくて満足度の高いサイトにすることで、記事の内容を読んでもらいやすくなります。企業のホームページであれば、仕事の内容や企業情報をユーザーに知ってもらうことができ、さらに仕事の受注につながるかもしれません。また、アフィリエイトサイトであれば、説得力のある表を入れることで、紹介する商品の購入につながる可能性が高くなります。

WordPressには、表を作るのに効果的なプラグインがいくつかあります。初心者でも簡単に扱えるプラグインもあるので導入してみましょう。プラグインを検索したときに、英語での説明が多く、わからない場合があるかもしれません。