ワードプレス でブログを書いていると「 表 」の出番って結構ありますよね。
表はどうやって作っていますか？
テーブルで作りますか？
画像で作りますか？
WordPressでテーブルを構築するのは面倒だしレイアウトが上手くいかないこともある。
画像は楽だけどPC表示にあわせるとスマホで小さい。スマホ表示にあわせるとPCででかすぎる。
僕はGoogle スプレッドシート を利用しています。
ワードプレスの表はスプレッドシートをコピペが便利
ワードプレスでのテーブル作成は意外と手軽で便利です。
でも Google スプレッドシート を利用するともっと簡単で便利。
使い方は単純にコピー＆ペーストです。
スプレッドシート上で必要な部分をコピー。WordPressのビジュアルエディタにペーストすれば出来上がりです。
Google スプレッドシート とは？
googleアカウントは多くの人が持っていると思います。
Googleアカウントがあれば「スプレッドシート」が利用できます。Googleのサービスにある「ドキュメント」に「スプレッドシート」というものがあります。
スプレッドシートは、ほとんどExcelと同じような物です。Google製のExcel（表計算ソフト）がスプレッドシートという認識で大丈夫です。
Googleアカウントは無料です。作って損はありません。必ず作っておきましょう。
WordPressにスプレッドシートで表を作る実例
まずスプレッドシートで普通に表を作ります。
サンプルはスマホ比較の表
作ったらワードプレスに持って行きたい部分だけを選択してコピー。
ワードプレスのビジュアルエディタにペースト。
出来上がりは以下の通り。
出来上がりサンプル
簡単ですね！
ワードプレスのテーブル（スプレッドシート）をレスポンシブにする
さて表組みをワードプレスに挿入することはできたのですが、横に長い表だとおかしなことになりませんか？
表組みをワードプレスでレスポンシブ対応するにはいくつかの方法があります。個人的には表は横スクロールさせるのが一番スマートかつ見た目も崩れず項目の比較もしやすいのでベストだと思っています。
表が横長ではみ出るときの対処法
スプレッドシートをペーストしただけではスマホで表示した際に表組み部分だけ横幅が大きくなり、サイト全体が横スクロールするようになってしまうのでタグを少しだけ追加して表組み部分だけをスクロールするようにします。
<table> 〜 </table>
</div>
テキストエディタで表のタグ部分の上下に太字カラー部分を追加します。
これで表の部分だけが横スクロールするようになります。
表（テーブル）に変更がよくある場合はスプレッドシートの埋め込みが超便利
スプレッドシートは外部に埋め込むことができます。
もちろんワードプレスに埋め込むことも出来ます。
読み込みが発生するので、表示スピードは落ちますがスプレッドシートに変更を加えるとワードプレスに埋め込まれた表組みにも変更が反映されます。
定期的に記録を付け更新する場合などにはとても便利です。
詳細は省きますが手順は下記のような感じ。
貼り付けるタグには公開範囲なども設定できます。
表のサイズによってはスマホで見づらくなる場合もあるので、状況に応じてサイズの指定をしてください。
width=”600″ height=”950″
スプレッドシートの埋め込みを実際に使用しているページはこちら↓
リトルカブ の【 燃費 】驚異の燃費性能でもうクルマには乗れません！
クルマがあっても リトルカブ ばかり乗ってしまう、からあげ棒です。 追記：リトルカブの燃費を定期的に測定することにしました。すぐに表を見たい場合は目次からジャンプできます。 原付っていいですよね[…]
あとがき
スプレッドシートが便利なのは上記以外にも、表のデータを別で保存しておける。作った表をベースに他の表を作ることも簡単。という利点もあります。
スプレッドシートは無料で使用可能ですから利用しない手はありませんね！
