記事の中に表を入れる場合、<td>とか<th>といったHTMLタグを入力してかなければいけないのですが、これが結構面倒ですよね。
なんか便利な方法があるだろうと、調べてみたらやっぱりありました!!
みなさん、結構困っていて、解決してくれる方がいるんですね。
私がやってみてこれは便利!簡単!と思った方法をご紹介します。
エクセルで作成した表を直接エディターに貼り付ける
これが一番簡単な方法だと思います。
- 作成した表をコピーしてエディターに貼り付ける
- 表の体裁を整える
作成した表をコピーしてエディターに貼り付ける
エクセルで作成した表をコピーして、エディターに貼り付けます。
例として以下の表をエクセルで作成しました。
これを普通に右クリックでコピーします。
エディターで記事にエクセルで作成した表を貼り付けます。
貼り付けるときの注意点として、右クリックの貼り付けではなく、Ctrl+Vキーを押して貼り付けます。
これで表が貼り付けられました。
こんな感じに表示されます。
曜日 | 営業時間 |
月曜日 | 10時~20時 |
火曜日 | 10時~21時 |
水曜日 | 10時~22時 |
木曜日 | 定休日 |
金曜日 | 10時~24時 |
土曜日 | 10時~25時 |
日曜日 | 10時~26時 |
表の体裁を整える
上の表示でオッケーならばこれで終了ですが、すべてデータセル(<td>タグ)になりますし、見出しもはっきりとしませんので、必要に応じて体裁を整えます。
体裁を整えるには記事作成画面をテキストに変更して、HTMLタグを調整しても良いのですが、結構面倒ですので、「TinyMCE Advanced」というプラグインを利用して体裁を整える方法をおススメします。
「TinyMCE Advanced」をインストールするには、WordPress管理画面から「プラグイン」を選択し、「新規追加」より「TinyMCE Advanded」を検索して、インストールし、有効化します。
有効化が完了すると、エディターのメニュー欄に編集メニューとボタンが表示されます。
これを利用して、データセルから見出しセルに変更したり、セルを結合したり、等の調整が簡単に行うことが出来ます。
簡単な表でしたらこれで十分かと思います。
「TinyMCE Advanced」をインストールすると、投稿画面からCocoonの「スタイル」ボタンが消えてしまいます。
その場合は、管理画面の左側メニューの「プラグイン」から、「「TinyMCE Advanced」の設定を選択し、「スタイル」ボタンをドラッグして表示するようにします。
任意の場所に表示できるようにしたら、忘れずに変更を保存をクリックします。
Webサイトを利用して表をHTMLに変換する
これもなかなか簡単で、見出しの範囲や背景色、文字色、セルの結合なども設定することが出来ます。
Webサイトの名前は「エクセルシートをHTMLテーブルに変換しちゃう君(ββ)」です。
- エクセルの表をコピーしてサイトに貼り付け
- オプションを選択して変換
- HTMLタグをコピーしてエディターに貼り付け
これで完成しちゃいます。
エクセルの表をコピーして貼り付け
エクセルの表部分をコピーし、サイト上部の「STEP.1エクセルとかからCSV(TSV)をコピーして貼り付け」欄に貼り付けます。
サイト中段の「STEP2.オプションを選択して変換」にて設定を行い「▼変換▼」をクリックします。
「▼変換▼」を実行すると、変換後の表イメージを確認することができます。
イメージ通りに表示されていれば、サイト下段の「STEP3.HTMLタグをコピーして使う」欄に表示されたHTMLタグをコピーしてエディターの記事画面に貼り付けて完了です。
こんな感じで記事に反映されます。
曜日 | 営業時間 |
---|---|
月曜日 | 10時~20時 |
火曜日 | 10時~21時 |
水曜日 | 10時~22時 |
木曜日 | 定休日 |
金曜日 | 10時~24時 |
土曜日 | 10時~25時 |
日曜日 | 10時~26時 |
まとめ
いかがでしたでしょうか。
表の作成は面倒なので私は文章で表現したり、以前はエクセルの表を画像にして貼り付けていたりしました。
これらの方法であれば簡単にHTMLで表が作成できるので見やすい記事なる様、積極的に表を作成していきたいと思います。
コメント