ハンバート友幸の庭

節約、ミニマリスト、商品レビューなどをするブログ

Excel to HTMLを使ってブログに簡単に表を挿入しよう

表計算ソフト

こんにちは友幸(@humberttomoyuki)です。

 

みなさんブログで表を使ってる?

 

わたしはたまにブログに表を挿入することがある。

しかし、はてなブログには標準で表を挿入する機能がないので自分で作らないといけない。

そのためにはHTMLのテーブルタグを使うのだが、HTMLの使い方がわからないわたしのような人間にはハードルが高い。

 

というわけで、今回は簡単にブログに表を入れる方法を紹介するよ。

HTMLの知識がなくても簡単、単純に誰でもできるから安心してほしい。

 

それではいってみよう。

 まずはブログに貼り付けたい表を作ろう

まずはExcelなどの表計算ソフトで表を作成しよう。

 

わたしの場合、パソコンにはOfficeソフトが入っていないので、Googleスプレッドシートを使って表を作成している。

 

Excelがパソコンに入ってない人は無料ソフトのLibreOffice(リブレオフィス)やGoogleスプレッドシートを使おう。

 

下記のような感じで表を作る。

Googleスプレッドシート

Excel to HTMLで表をHTMLに変換する

  1. 次にExcel to HTMLのサイトにアクセスする。
  2. そして先ほど作った表を「2 変換したいExcel表を貼り付けます」にコピペして貼り付ける。
  3. 「変換する」ボタンをクリックする。

Excel to HTML

すると2の下にHTMLのテーブルタグが表示される。

Excel to HTML

あとはこれをコピペしてブログに貼り付ければ完成だ。

 

はてなブログの場合、「見たままモード」で編集している場合、「見たままモード」の画面を見るとおかしな具合に表示される。

はてなブログの見たままモードのテーブルタグの表示

しかしプレビューで確認するとしっかり表示されているので安心してほしい。

テーブルタグのプレビュー表示

 

「1 見出し行や見出し列を含む表にするか選びます」で見出しをつけるか選択できる。

上の画像は見出し有りの場合だ。

 

見出しがある場合、見出しの部分の項目がグレーで表示される。

品目や比較項目を目立たせたい時に使おう。

見出しなしの場合

PV数 収益 1PVあたりの収益
1万PV ~1000円 0.1円
5万PV 3000~10000円 0.06~0.2円
10万PV 10000~50000円 0.1~0.5円
20万PV 50000~100000円 0.25~0.5円
30万PV 100000円~150000円 0.333~0.5円
40万PV 150000円~200000円 0.375~0.5円
50万PV 200000円~250000円 0.4~0.5円

少しわかりにくいが、見出しがないと全て同じ色で表示されているのがわかる。 

Excel to HTMLの注意点

Excel to HTMLは「,(コロン)」を入れると表が区切られてしまうので注意しよう。

数字が1,000のように「,」が入っている場合は表示形式を変更するなどして全て削除しておこう。

「,」が入っている場合の表示

PV数 収益 1PVあたりの収益
1万PV ~1 000円 0.1円
5万PV 3 000~10 000円 0.06~0.2円
10万PV 10 000~50 000円 0.1~0.5円
20万PV 50 000~100 000円 0.25~0.5円
30万PV 100 000円~150 000円 0.333~0.5円
40万PV 150 000円~200 000円 0.375~0.5円
50万PV 200 000円~250 000円 0.4~0.5円


表が変なところで分割されてしまっているのがわかる。

おかしな表示になったら一度コロンマークがないか確認しよう。 

画像で貼り付けるよりも表で貼り付ける理由

こんな面倒なことをしなくても「エクセルの表をスクリーンキャプチャで撮って貼り付ければいいじゃん」と意見があると思う。

確かにその方が早い。

 

わたしも毎月の家計簿を公開する時はマネーフォワードのキャプチャ画像を添付している。

 

しかし画像貼り付けには問題がある。

画像内部の文字情報をグーグルなどの検索サイトは読み込むことができないのだ。

 

例えば、いくつかの商品を比較してレビューする表を作ったとしよう。

この表をキャプチャ画像としてブログに貼ってしまうと、せっかく書いた中の文章が検索サイトに読み込まれないことになってしまう。

SEO的に非常にもったいないことになるのだ。

 

家計簿のようなほとんど数字の表はキャプチャ画像でも問題ないが、文字が中心となる表は画像ではなくそのままブログに載せた方がいいよ。

まとめ

いかがだったろうか。

表が入ると、文章の中に変化が生まれて読者が読みやすくなる。

途中で読者が飽きない工夫は必要になると思うので、試しに使ってみたらどうだろうか。

1回使えば、簡単にやり方をつかめるので、後で表を作りたい時に便利だよ。

 

1回でも経験があるというのは全然違うからね。

みなさんの参考になれば幸いです。