【驚愕コピペでできちゃう！】WordPressで超簡単に表を作成する方法

偶然発見して腰が抜けそうになったのでシェアしたいと思います。

これまで、私はWordPressで表作成するときは、BBEditやmiなんてーエディターを使って、HTMLで書いてました。
こんな感じで。

もっと複雑な表になる場合は、表計算ソフトで表を作って、それをCSVファイルに変換保存して、そのファイルをインポートしてタグに変換してくれるウェブサイトとかを利用し、コピペしていました。

結構面倒くさかったので、このやり方を偶然発見した時は、「まじかー！」と一人で叫びましたよ。

今までの手間はなんだったんだと。
この記事をなにかの拍子でみつけられる人は少ない（笑）と思うんですが、ラッキーですね。
それともこれって、WordPress使ってる人にとって常識みたいなことなのかしら。わかんないけど、誰かの役に立つかもしれないから、書き留めておきます。

用意するもの

1. 表計算ソフト
2. WordPress（クラシック・エディター）

以上（笑）

私はMac使ってるので、最初からもれなくついてくるNumbers ナンバーズを使います。
そうでない方は、MacでもWindowsでも、エクセルでしょうか。
とにかく、それで、セルを埋めてください。

WordPressでどのバージョン以上からできるのかは検証していません。
私の環境は、現時点での最新バージョンであるWordPress 5.2.2です。

表作成の簡単なやり方

1. お好きな表計算ソフトで表を作成する。
   こんな感じですね。

   

2. で、必要な部分を選択し、コピーします。（Macだと、コマンドC。WindowsだとコントロールC）

   

3. それを、WordPressの投稿ページの「ビジュアル・エディター」にペーストします。

   投稿画面にあるタブの部分ね。これでビジュアルとテキストを行ったり来たりしながら書いてます。

   そしたらこんなんできるんです。

4. 	料理名	材料
   レシピ1	お好み焼き	キャベツ、小麦粉、卵、
   レシピ2	たこ焼き	タコ、小麦粉、卵、天かす、
   レシピ3	たい焼き	あんこ、小麦粉、牛乳、卵、

   コードを、テキスト・エディタで見てみるとこうなってた。

   <table style="height: 193px;" width="833" cellspacing="0" cellpadding="0">
   <tbody>
   <tr>
   <td valign="top"></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;"><b>料理名</b></span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;"><b>材料</b></span></td>
   </tr>
   <tr>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;"><b>レシピ1</b></span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">お好み焼き</span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">キャベツ、小麦粉、卵、</span></td>
   </tr>
   <tr>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;"><b>レシピ2</b></span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">たこ焼き</span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">タコ、小麦粉、卵、天かす、</span></td>
   </tr>
   <tr>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;"><b>レシピ3</b></span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">たい焼き</span></td>
   <td valign="top"><span style="color: #000000; font-family: Hiragino Kaku Gothic ProN; font-size: small;">あんこ、小麦粉、牛乳、卵、</span></td>
   </tr>
   </tbody>
   </table>

   セルの高さなどは勝手にはいっちゃってて、これだとレスポンシブにならないので、pxで指定部分は取りました。
   肝は、表計算ソフトからWordPressにコピペができるという驚愕の事実です。便利すぎる！！

まとめ

HTMLがわからなくても、もう表作成のためにプラグインを入れたりする必要はないですね。
プラグインって、いろいろいれると重くなってSEO的に良くないし、あちこちでアップデートされたり、放置されたりする度にコンフリクトが起きたりするし、個別に使い方も覚えないといけないし、身軽でシンプルなのが一番ね❤