今回は、エクセルで編集した表を手軽にWordpressで利用する方法を紹介したいと思います。
知ってる人も多いかもしれませんが、知らないよりは知っていた方が、Wordpressで表を利用するという心理的ハードルが、かなり下がると思います。
目次
エクセルの表をWordpressに
Microsoft OfficeのExcelの表を、Wordpressに貼り付けるには、エクセルのアドインを使用して、HTMLに変換するなんて方法もあります。
参考 ASCII.jp:Excel→HTMLをワンクリックで変換!
以下のような、WEBサービスを利用する方法もあります。
Windows Live Writerのような、ブログエディターでは、今回の方法を使用できないので、アドインや、WEBサービスを使用した方が良いと思います。
ただ、Wordpressエディターで編集している場合は、もっと簡単な方法があります。
今回は、その方法を紹介します。
エクセルの表をWordpressに貼り付ける方法
まず、表はエクセルで作成します。
WordPressで作成するより、エクセルで作成した方が、補完機能を利用できたり、関数を利用できたり、並び替えを利用できるので、エクセルでパパっと作ってしまいます。
例えば、エクセルで以下のような表を作ったとします。(体温と血圧表)
今回は、この表を例として、Wordpressエディターに貼り付ける方法を説明したいと思います。
WordPressエディターに貼り付ける
エディターに貼り付けるには、まずエクセルの表を以下のようにコピーします。
コピーしたら、Wordpressのビジュアルエディターを開いて、 Ctrl + V キーを押します。(通常の、「貼り付け」ではダメです。)
すると、以下のように自動的に表が貼り付けられます。これらの動作は、Chrome、Firefox、IEで確認しました。
これを、記事に表示させると、以下のようになります。
体温 | 血圧上 | 血圧下 | 脈拍 | |
2015/1/3 8:40 | 37.1 | 136 | 91 | 60 |
2015/1/5 9:26 | 36.8 | 139 | 95 | 62 |
2015/1/5 15:39 | 36.0 | 69 | 44 | 75 |
2015/1/6 9:09 | 37.0 | 158 | 96 | 57 |
2015/1/7 16:25 | 36.5 | 90 | 62 | 68 |
2015/1/8 9:24 | 36.7 | 139 | 90 | 65 |
2015/1/8 16:11 | 36.6 | 135 | 92 | 68 |
2015/1/9 8:52 | 36.7 | 162 | 107 | 58 |
2015/1/9 16:43 | 36.2 | 88 | 50 | 72 |
2015/1/10 8:56 | 36.4 | 157 | 97 | 58 |
2015/1/12 8:57 | 36.9 | 128 | 81 | 66 |
2015/1/13 8:56 | 36.8 | 130 | 82 | 55 |
2015/1/13 16:15 | 36.6 | 124 | 79 | 75 |
2015/1/14 9:04 | 36.9 | 131 | 89 | 59 |
2015/1/14 16:25 | 36.9 | 72 | 51 | 72 |
2015/1/15 9:04 | 36.5 | 149 | 93 | 56 |
2015/1/15 16:07 | 36.9 | 97 | 69 | 73 |
めちゃくちゃ簡単です。
見出しセル(ヘッダーセル)の作成
ただ、上記までの方法だと、すべてデータセル(td)になってしまいます。
見栄えのためにも、ヘッダーとなるセルはきちんと設定しておきたいです。
見出しセル(th)を手軽に設定するには、一つ一つ、セルを「td→th」に変更してももちろん良いです。ただそれだと面倒くさいので、TinyMCE Advancedというプラグインをインストールして手軽に行う方法を紹介したいと思います。
TinyMCE Advancedのインストール
まずは、Wordpress管理画面の「プラグイン→新規追加」から「TinyMCE Advanced」を検索してインストールし、有効化してください。
インストールが終了すると、以下のようにビジュアルエディターの投稿欄の上に、表編集用のメニューと、ツールボタンが表示されます。
データセル(td)→見出しセル(th)の変更
データセルを、見出しセルに変更するには、まずビジュアルエディターに貼り付けてあるテーブルの見出し部分を選択します。
次に、「テーブルメニュー/テーブルボタン」をクリックし、ドロップダウンリストから、「セル→セルのプロパティー」を選択します。
すると以下のような「セルのプロパティー」ダイアログが表示されます。
セルの種類を「ヘッダーセル(見出しセル)」に変更して「OK」ボタンを押してください。
すると、以下のように見出しセルの設定が行われます。
もちろん、縦にセルを選択して、先程と同じ手順で見出しを設定することもできます。
縦も見出しセルを設定できます。
これで、見出しセルの設定もできました。
あとは、Wordpressエディターで文字列の「右揃え」「左揃え」などを好みに合わせて設定します。
これまでの表を、実際に表示させると、以下のようになります。
体温 | 血圧上 | 血圧下 | 脈拍 | |
---|---|---|---|---|
2015/1/3 8:40 | 37.1 | 136 | 91 | 60 |
2015/1/5 9:26 | 36.8 | 139 | 95 | 62 |
2015/1/5 15:39 | 36.0 | 69 | 44 | 75 |
2015/1/6 9:09 | 37.0 | 158 | 96 | 57 |
2015/1/7 16:25 | 36.5 | 90 | 62 | 68 |
2015/1/8 9:24 | 36.7 | 139 | 90 | 65 |
2015/1/8 16:11 | 36.6 | 135 | 92 | 68 |
2015/1/9 8:52 | 36.7 | 162 | 107 | 58 |
2015/1/9 16:43 | 36.2 | 88 | 50 | 72 |
2015/1/10 8:56 | 36.4 | 157 | 97 | 58 |
2015/1/12 8:57 | 36.9 | 128 | 81 | 66 |
2015/1/13 8:56 | 36.8 | 130 | 82 | 55 |
2015/1/13 16:15 | 36.6 | 124 | 79 | 75 |
2015/1/14 9:04 | 36.9 | 131 | 89 | 59 |
2015/1/14 16:25 | 36.9 | 72 | 51 | 72 |
2015/1/15 9:04 | 36.5 | 149 | 93 | 56 |
2015/1/15 16:07 | 36.9 | 97 | 69 | 73 |
ちなみに、この表は、僕が血圧を測ったときにエクセルにつけているものです。起床したときと、午後から測ったときの血圧の波が、ちょっと激しいです。
注意点
この方法で、テーブルを挿入すると、幅などは自動的に設定されます。
ですので、レスポンシブのテーブルにはなりません。レスポンシブにするには、Wordpressテキストエディタから「 width=”318″」と書かれているような部分を削除する必要があります。
テーブルの幅と、列の数だけwidth属性を削除する必要があります。レスポンシブ対応するにはちょっと面倒くさい作業が必要です。
まとめ
このように、エクセルから、HTMLタグを直接編集することなく、手軽に表を作成することができます。
Windows Live Writerなどの、ブログエディターを使用している場合は、このようにして表を作成し、HTMLタグをコピーして、ブログエディター上に貼り付けても良いかもしれません。
こんにちは
エクセルで作った表をワードプレスに貼りつけたのですが
表形式になりませんでした。
文字だけが詰めて表示されます。
・ビジュアルシートに貼り付け
・CTR+Vで貼りつけました。
他に設定ありますか?
表が大きかったので、2行だけテストでやってみましたが同様でした。
先にプラグインの設定が必要とか制限があれば教えてください。
当方はOSはwin10でエクセルは2007です。
よろしくお願い致します。