Appism

Be a DayDream Believer

ブログで表を作るなら「Table Generator」が便利!Htmlにも対応してます

http://www.flickr.com/photos/67651678@N00/2370352162

photo by M@ndy

ブログで表を使いたいなぁ...と思うことが多くなってきました。ということで、色々方法を調べてみたのですが、その中でも「Table Generator」というWebサービスがなかなか使いやすかったので紹介しようと思います。

はてな記法もいいけど...

はてなブログでは、はてな記法を使うことで表を作ることが出来ます。ただ、僕は普段見たまま記法を使っていますし、はてな記法を一度試したところかなりめんどくさかったので他の方法を探すことに。

参考:はてな記法を使うと表組み(TABLEタグ)が簡単にできたり、ウクレレ譜面が書けたりします(^^)v - マネー報道 MoneyReport

(参考までに、はてな記法で表を作るにはマネーさんの記事が分かりやすいです)

ネットで探すこと数十分、ようやく良さそうな方法を見つけました。

「Table Generator」が便利過ぎた

Create LaTeX tables online

見つけたのがこちらの「Table Generator」というWebサービス。無料で使うことが出来ます。はてブが37もついていることを考えると、結構知っている人も多いのかもしれません。

それでは、この「Table Generator」を使ってブログで使える表を作る方法を簡単に説明していきます。

ExcelやらNumbersやらで表を作る

まずは、使いたい表をExcelなどのソフトで作ります。僕はMacを使っているので、Numbersで作成しましたが問題なく利用できています。

f:id:tarapple:20150721202431p:plain

ここでスプラトゥーン&WiiUを最安値で買う方法を探してみたで使った記事を例に進めていきます。

作った表をコピー&ペースト!

f:id:tarapple:20150721202657p:plain

表が完成したら、使いたい部分を選択して「コピー」します。

f:id:tarapple:20150721202851p:plain

その後、Table Generatorにアクセスして「File→Paste table date」を選択します。

f:id:tarapple:20150721203051p:plain

先ほどコピーした表を貼付けます。この時点では、表示が崩れているように見えても放置して大丈夫です。貼付けたら「Load」をクリック!

微調整して完成!

f:id:tarapple:20150721203241p:plain

すると、こんな感じの画面になるかと思います。この画面では、表の項目を修正したり文字を太字にしたり色を変えたりと、とにかく色々なことが出来ます。

f:id:tarapple:20150721203601p:plain

例えば、「ベーシックセット」の表記を修正したい場合は、選択して・・・

f:id:tarapple:20150721203639p:plain

フツーに入力するだけでOK!すぐに反映されるところがありがたいですね〜。

f:id:tarapple:20150721203720p:plain

その他にも、太字や斜文字を選択することも出来ます。ワンクリックで出来るので超楽です。

f:id:tarapple:20150721203929p:plain

最後に、画面上部にある「◯◯Tables」の中から希望の形式を選択します。僕の場合は、HTML Tablesを選択しています。

f:id:tarapple:20150721204045p:plain

後は、出来たコードをコピーしてブログの編集画面に貼付けるだけ!参考までに、完成した表を貼っておきます。

 ベーシックセット

プレミアムセット

マリオカート8セット スポーツPセット
Amazon ¥32,000 ¥31,515 ¥35,091 ¥36,170
価格.com ¥31,999 ¥30,419 ¥33,190 ¥32,400
ヨドバシ.com 販売終了 予定数の販売を終了 ¥35,420 販売終了
楽天市場 ¥33,500 ¥31,320 ¥32,800 ¥35,900

もちろん、モバイル表示にも対応しています。スマホから確認して頂くと分かるのですが、表の部分だけ横スクロールすることが出来るようになっています。

まとめ

マジで便利な神Webサービス!!無料で提供してくれている開発者の方々に感謝です!