スポンサーリンク

wordpressで簡単に表を作る裏ワザ【bloggerとスプレッドシートを用意しよう】

bloggerからwordpressへ移行してから約2週間が経過。ブログの見た目が良くなったり、色々とカスタマイズ出来るなど、wordpressの満足度は高いですが、一点だけ非常に残念な点があります。

それは、表作成が難しいこと。

そこで今回は、bloggerとスプレッドシートを使ってwordpressで簡単に表を作れる裏ワザをご紹介します。

TablePressは装飾が面倒

wordpressにも表を作成する「TablePress」というプラグインがあります。

しかし、このプラグインは簡単な表は作成出来るのですが、セルや罫線を着色したり、セル同士を結合するためにはCSSをベタで記述しないといけません。

実際にこの作業をやってみたのですが、結構面倒くさい。

TablePressで作成できる表はせいぜいこんなものです

企業名ティッカー1972年PER現在のPER
フィリップモリスMO24.026.52
ファイザーPFE28.426.94
ペプシコPEP27.625.43
ゼネラルエレクトリックGE23.425.36
アンバイザーブッシュBUD31.599.07
ジョンソン&ジョンソンJNJ57.121.34
コカ・コーラKO46.431.81
P&GPG29.824.40
マクドナルドMCD71.026.43
アメリカンエクスプレスAXP37.714.03
3MMMM39.024.26
IBMIBM35.512.53

たったこれだけの表を作成するために、CSSを直接記述するなんて面倒くさいですね。

bloggerとスプレッドシートを用意しよう

そこで、bloggerとスプレッドシートの登場です。まずはこの2つを用意しましょう。どちらもグーグルのアカウントを保有していれば、簡単な設定で使えるようになります。

blogger

bloggerを知らない方もいると思いますので、簡単に紹介します。

bloggerとはグーグルが提供してる無料のブログサービスです。

詳しい導入手順と使い方はこちらをご覧下さい。

blogger以外の無料ブログサービスでも、bloggerと同じような方法で出来るかは検証していません。

スプレッドシート

スプレッドシートについても簡単に紹介します。

スプレッドシートとはエクセル同様、表を作成するアプリのことです。スプレッドシートはエクセルとは違い、オンライン(インターネット)上で表を作成します。

詳しい導入手順と使い方はこちらをご覧下さい。

実際に表を挿入してみよう

それでは、実際に表を挿入するまでの手順を紹介します。

bloggerとスプレッドシートはあらかじめ起動しておいて下さい。

手順は次のとおりです。

  1. スプレッドシートで表を作成しコピーする
  2. コピーしたシートをbloggerに貼り付ける
  3. bloggerに貼り付けた表のHTMLをコピーする
  4. コピーしたHTMLをwordpressのテキストエディタに貼り付ける

これら4つを順に説明します。

1.スプレッドシートで表を作成しコピーする

まず最初にスプレッドシートで表を作成します。今回は下の画像のとおり表を作成しました。

で、コピーしたい箇所(B2からG6)をドラッグして右クリックでコピーします。

エクセルと同じですね。

2.コピーしたシートをbloggerに貼り付ける

次にbloggerの管理画面から新しい投稿をクリックします。出てきた画面の左上にある作成ボタンをクリックし、そこにコピーしたスプレッドシートを貼り付けます。

こんな感じでwordpressのビジュアルエディタと同じように表が貼付けられます。

ちなみにwordpressで同じことをしても、このように色や罫線までコピーすることはできません。

3.bloggerに貼り付けた表のHTMLをコピーする

今度はbloggerのHTMLボタンをクリックします。すると、表のHTMLを表す言語が出てきますので、これを全部選択してコピーします。

4.コピーしたHTMLをwordpressのテキストエディタに貼り付ける

続いて、コピーしたHTMLを予め起動しておいたwordpressのテキストエディタに貼り付けます。

bloggerと全く同じHTMLをwordpressに貼り付けることが出来ました。

で、これをビジュアルエディタに切り替えると、bloggerと同じデータが表示されます。

注意点

この方法、とても便利なのですが何点か注意すべきことがあります。

wordpressでは非表示罫線が点線表示される

スプレッドシートで作成した表の罫線を非表示にしても、wordpressでは点線が表示されてしまいます(上の画像の弱・中・強の行)。

これを解決するためには、スプレッドシートの表の罫線の色を背景画面と同じ色にしておく必要があります。このブログは背景が白なので、罫線も白にしておきます。

網掛けのセル内は、網掛けと同じ色を指定します。

HTMLが乱雑

ブログに掲載するのであれば、見た目の装飾はCSSで整えた方が記述がスッキリします。

こんないい加減なブログであれば、乱雑なHTMLでもいいとは思いますが、商用サイトではあまりオススメできませんね。

データの並べ替えが出来ない

TablePressでは、見出し行からデータの並べ替えが可能ですが、この方法では、そのような機能を使用することは出来ません。

あくまでもユーザーに画面を見せるだけのものです。

まとめ

このページだけを見ると大変そうに感じますが、慣れてしまうととても便利です。

注意点もありますので、あくまでも補助的な位置づけでこの方法を使用して下さい。

スポンサーリンク

フォローする