ブログにtableで作った表やコードを貼るのに便利な2つのTips

久しぶりに立て続けにエントリー。今度はブログにtableを貼る場合の便利なTips。今更感じもしなくもないけど今まで有効な方法を知らなかったので、自分へのメモを含めてエントリー。

tableで表を掲載したエントリーと言えばこのブログでは、例えば、「TAMRONから「SP AF70-200mm F/2.8 Di (Model A001)」が発表されていた！」というエントリーではレンズのスペック表を、「ブラウザのレンダリングモード切替スイッチ一覧」では一覧表をtableで作ったけど、これが結構大変だった。
まず一覧表をエクセル表で作り、内容を確認して、今度はそれをhtmlエディタでtableタグで書いて・・・・という具合。

いちいちtableを書くのも面倒だし、エクセル表も作っているので二度手間になってしまう。かと言っていきなりtalbeタグで表を書いてしまうと途中で表組みを変えたり、表をチェックするのにブラウザで開いたりしなければならず面倒だったりする。

そこでエクセル表からtableタグを生成し、それをFC2ブログに貼る方法を紹介する。
1.エクセル表からtableタグを生成する。
かねがねエクセル表からtableが作れれば楽で良いなと思っていたが、探しても中々見つからなかった。フリーソフトであることにはあるのだがちょっと使い勝手が悪い。
そこで見つけたのがそのものズバリ、エクセルでtableをそのまま作ってしまう方法。
詳しくは下のページをご覧あれ。説明を読むよりも論より証拠。サンプルとして公開されているエクセルファイルを見た方が直感的に分かりやすいと思います。

■テーブルタグをExcelで
http://www.relief.jp/itnote/archives/001808.php

元々は2chのスレが発祥元のようだが使い勝手は非常に良い。生成元となる「<td>」を「<th>」に変えたり、「style="～"」や「id="hogehoge"」を加えてスタイルを適用してしまうこともできる。「rowspan」や「colspan」を追加してセルを統合することも出来る。カスタマイズすればするほど使い勝手は上がるはず。

2.改行タグを無くす。
<ul>や<li>、<table>等のタグを使いたい場合、コードを見やすくするために<ul>や</tr>毎に改行したいと思うのが人情。コードを日々書く人だったらコードの可読性を高めるための習性になっているかもしれない。実際に俺はそういう習性があったりする。

ところが、FC2ブログの場合はタグとタグの間に挿入した改行がカウントされてしまい、リストや表がエントリーのずっと下の方に表示されるという困ったことになってしまう。

そこで改行を削除するためのツールを紹介。この他にも検索すると色々と見つかります。

■改行コード削除
http://sunafukey.fc2web.com/deletecrlf.html
「初心者にもやさしい 簡単HTML作成」にある「改行コード削除」というエントリー。htmlコードを入力し、「改行を削除」ボタンをクリックするだけで簡単に改行が削除できてしまう。

■改行を削除するスクリプト(JavaScript)
http://sohgetsu.blogspot.com/2007/08/javascript.html
itoさんが運営するブログ「Sohgetsu Blog」の記事。こちらも簡単に改行を削除してくれる。

上の方法でエクセルで内容を確認しながら表を作ると同時にtableタグを生成。最後に改行を削除すれば、ブログに貼るだけというお手軽手順。

エクセルソフトなんて持っていないよ！という方はオープンソースのオフィスソフト「Open office」を使っても同じことができる。
これで表を作る労力が軽減されることは間違いなし。オススメな方法です。

関連記事

• URLを正規化するcanonical属性をFC2ブログに導入してみた
• 日本の借金
• Amazonの商品をFlashで紹介！「amazie」
• Yahoogle!
• 「Patagonia Classic Retro-X」でググってみてビックリした！
• RSSリーダー「livedoor Reader」でフィードを登録する方法
• 無料版livedoorブログからFC2ブログへの引越し方法（データのバックアップや画像ファイルの再アップロード方法も！）
• F6ユーザのサイト「Nikon F6で・・・」を紹介してみる
• 究極のエンターテイメント「ゴルゴ13]GAME
• 「千代田図書館」が電子図書の貸し出しを26日試験運用開始

タグ（ブログ内検索もできます）：web ブログ FC2ブログ html