WordPressエディターにエクセルの表を貼り付けてテーブルを手軽に作成する方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

今回は、エクセルで編集した表を手軽にWordpressで利用する方法を紹介したいと思います。

知ってる人も多いかもしれませんが、知らないよりは知っていた方が、Wordpressで表を利用するという心理的ハードルが、かなり下がると思います。

スポンサーリンク
レクタングル(大)広告

エクセルの表をWordpressに

Microsoft OfficeのExcelの表を、Wordpressに貼り付けるには、エクセルのアドインを使用して、HTMLに変換するなんて方法もあります。

参考 ASCII.jp:Excel→HTMLをワンクリックで変換!

以下のような、WEBサービスを利用する方法もあります。

ブログへの表挿入に。エクセル表からHTMLテーブルを作ってくれるツールが便利すぎる
エクセルから表を作るのは簡単です。 そりゃ表計算ソフトって言われるくらいだから、表を作るのは朝飯前です。例えばこんな表ならものの1分も...

Windows Live Writerのような、ブログエディターでは、今回の方法を使用できないので、アドインや、WEBサービスを使用した方が良いと思います。

ただ、Wordpressエディターで編集している場合は、もっと簡単な方法があります。

今回は、その方法を紹介します。

エクセルの表をWordpressに貼り付ける方法

まず、表はエクセルで作成します。

WordPressで作成するより、エクセルで作成した方が、補完機能を利用できたり、関数を利用できたり、並び替えを利用できるので、エクセルでパパっと作ってしまいます。

例えば、エクセルで以下のような表を作ったとします。(体温と血圧表)

体温と血圧表

今回は、この表を例として、Wordpressエディターに貼り付ける方法を説明したいと思います。

WordPressエディターに貼り付ける

エディターに貼り付けるには、まずエクセルの表を以下のようにコピーします。

エクセルの表をコピー

コピーしたら、Wordpressのビジュアルエディターを開いて、 Ctrl + V キーを押します。(通常の、「貼り付け」ではダメです。)

ビジュアルエディターに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

めちゃくちゃ簡単です。

見出しセル(ヘッダーセル)の作成

TinyMCE Advanced

ただ、上記までの方法だと、すべてデータセル(td)になってしまいます。

見栄えのためにも、ヘッダーとなるセルはきちんと設定しておきたいです。

見出しセル(th)を手軽に設定するには、一つ一つ、セルを「td→th」に変更してももちろん良いです。ただそれだと面倒くさいので、TinyMCE Advancedというプラグインをインストールして手軽に行う方法を紹介したいと思います。

TinyMCE Advancedのインストール

まずは、Wordpress管理画面の「プラグイン→新規追加」から「TinyMCE Advanced」を検索してインストールし、有効化てください。

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タグをコピーして、ブログエディター上に貼り付けても良いかもしれません。

『WordPressエディターにエクセルの表を貼り付けてテーブルを手軽に作成する方法』へのコメント

  1. 名前:cyapu 投稿日:2016/06/19(日) 10:56:31 ID:7cf7e5cb8

    こんにちは
    エクセルで作った表をワードプレスに貼りつけたのですが
    表形式になりませんでした。
    文字だけが詰めて表示されます。
    ・ビジュアルシートに貼り付け
    ・CTR+Vで貼りつけました。
    他に設定ありますか?

    表が大きかったので、2行だけテストでやってみましたが同様でした。

    先にプラグインの設定が必要とか制限があれば教えてください。
    当方はOSはwin10でエクセルは2007です。

    よろしくお願い致します。

  2. わいひら 名前:わいひら 投稿日:2016/06/19(日) 17:43:58 ID:ac03e4f9b

    使用しているブラウザはなんでしょうか?
    そのブラウザで試してみようと思います。

    とりあえずFirefoxなら、貼り付けるだけなら問題なくできました。

  3. 名前:cyapu 投稿日:2016/06/19(日) 20:44:39 ID:7cf7e5cb8

    お世話になります。
    Google chromeで作業しました。
    ブラウザとは気づかなかったので、先程マイクロソフトのEdgeで試した結果、上手く貼りつきました。
    その後、Google chromeで確認してもOKでした。編集も出来ました。
    ブラウザとは思いもしなかったです。
    ありがとうございます。

  4. わいひら 名前:わいひら 投稿日:2016/06/20(月) 15:45:15 ID:1b0a3a9ae

    うまくいったようでよかったです。
    ChromeとEdgeでもうまくいくんですね。
    ご報告ありがとうございます。

  5. 名前:木田 祐典 投稿日:2016/10/17(月) 15:48:05 ID:fd94f0f35

    わいひらさん
    Word Pressにエクセル表を張り付ける方法を教えていただきありがとうございました。
    わいひらさんが寝たきりと知ってびっくりしましたが、そのような状態にもかかわらず大活躍されているようで、怠け者の私は頭が下がるとともにもっとがんばらなくてはと大いに励みになります。
    今後ともご活躍されることをお祈りいたします。

  6. わいひら 名前:わいひら 投稿日:2016/10/17(月) 17:19:10 ID:993a5b3d8

    いえいえ。
    僕自身も会社で働いていたときは「休みたい、休みたい、休みたい、サボりたい、休みたい」と常々思っていたのでかなりの怠け者です^^;
    けれど、寝てばかりであまりにも働いていないと、今度は逆に何かしていないと不安になってしまうのは不思議なものです。
    今後も、無理しない程度にブログを書いていけたらと思います。