イヤホンレビューやガジェット系の記事を書いていると、「テーブル（表）」を使いたくなる時ってありますよね？あるよね？？？
今回は、はてなブログやワードプレスに表を入れる方法を書いてみます。
「んなもん知ってるよハゲ！」とか言われるかもしれませんが、ご存じない方がいたら役立ててもらえれば嬉しいです。
なぜテーブルを使うのか
イヤホンやスマホの仕様比較やスペック表、感想を並べたいときにテーブルはとても便利です。
ただ、はてなブログには専用のテーブル機能がなかったはず……少なくとも私が使っていた頃には見当たりませんでした。
ワードプレスには標準でテーブルを作る機能があると思います。
ですが、今回紹介する方法が簡単なので、私は今でもよく使っています。
テーブル作成手順
1.表計算ソフトで表を作る
エクセルなどの表計算ソフトでももちろんOKですが、オンラインで手軽に使える無料の「Googleスプレッドシート」をおススメします。
仕様や比較内容など、好きな情報を表に入力してくださいな。
表が完成したら、作成した内容をコピーして準備しておきましょ。
こんな感じ！
2. HTMLに変換する
こちらのサイト様の神ツールを使います──
👉 エクセルシートをHTMLテーブルに変換しちゃう君
このサイトは何と！エクセルシートをHTMLテーブルに変換しちゃうんです！！！
まずはコピーした表を一番上の窓に貼り付けします。
オプション部分で「1列目や1行目を有無」や「色の指定」を設定可能アルよ。
空白のセルを結合したり、どこのセルと繋げるかも選べるネ！
※CSSをカスタマイズしている場合、うまく色が反映されないこともあるかもネ、ワタシヨクワカラナイネ…
ソシタラ設定したら「変換」ボタンを押すネ！
完成した表のポップアップが出てくるネ！成功アル！
出力された HTMLコードをコピー！
これで下準備は完了です。
3. ブログに貼り付ける
A. はてなブログの場合
「HTML編集モード」に切り替えて、コピーしたHTMLコードを貼り付けます。
見たまま編集モードを使っている方は、あらかじめ「☆」などを入力しておくと、テーブルを差し込みたい場所の目印になって便利かも～。
貼り付けたら、見たまま編集モードに戻すと表が表示されます。
これで完了です！あとは通常通り記事を作成すればOKですねん。
はてなブログの記事では、こんな感じでテーブルを挿入することができます。
B. ワードプレスの場合
今回は、我らが「Cocoon」のテーマを使用した例です。
テーブルを表示したい部分に「カスタムHTML」ブロックを挿入し、コピーしたHTMLコードをペーストすれば完成です。
プレビューで完成したテーブルを確認することができます。
これで完了です！あとは通常通り記事を作成すればOKですねん。
この方法でテーブルを作るメリット
ちなみに、はてなブログではスプレッドシートをそのままコピー＆ペーストすればテーブルを挿入できます。
ですが、納得のいくクオリティにならなかったため、私はその方法はやめた記憶があります。
ワードプレスにはテーブル機能がありますが、行や列を追加して一つずつ入力する必要があるため、セルが多くなると意外と手間に感じます。
なんせ、エンターキー叩いても次のセルにいかないんやもん。
んで、この方法の最大のメリットは、スプレッドシート上にデータを残しておけることです。
後から修正や再利用が簡単にできるので、とても便利です。
また、慣れてしまえば簡単に操作できるので、パパっとテーブルを完成させることができます。
あとはいろいろ試行錯誤してみてくださいませ！
まあ、スプレッドシートのセルをコピーしてAIにHTMLを作らせれば済む話なんですけどね！
以上、sat03でした！
コメント