ナマケモノの日々

ズボラな主婦の楽する暮らし

【ブログ初心者】表を使って見やすい読みやすい分かりやすい記事作り【仕上がり比較付き】

f:id:na-make:20180604105816j:plain

先日書いたこの記事いまいち成分表が見づらい読みづらい分かりづらいの三拍子で気になっていました。※現在は修正しています。

f:id:na-make:20180601132517p:plain

  1. 色を多用しており目にうるさい
  2. 成分表と、成分の詳細が離れて表記されている為、目線を動かしながら確認しなければならない
  3. 無駄な余白がある

 

デザインの仕事をしている為、見せ方や見やすさはこだわりたい部分であります。なんせ、見づらいとちゃんと見て貰えない可能性が高いからです。

せっかくわかりやすく分析をしていても、良い物をおすすめしていても、テキストだけの表現では限界があります。ブログ初心者なりにいろいろ色分けしたりと工夫したんですが、やっぱり見づらい。

問題点を解決するためには表にする必要があるとかんじました。

が!全然作り方が分からない!ということで調べて作って比較してみました!

HTMLやCSSについては全くの初心者です。<tr>や<th>、<td>などのタグが並んだ様子を見て、おえ〜〜っと思う方向けのおすすめ作成方法を紹介します。仕上がりの比較の為に基本的には全て見た目が同じになるよう作ってみました。

その1 はてなブログの編集モードで作る方法

手順はこんなかんじです。

  1. 【設定】→【基本設定】→【編集モード】を見たままモードからはてな記法モードに変更する
  2. 【記事を書く】ではてな記法を使って入力する
  3. はてな記法についてはこちらから

はてな記法記入例

半角の【|】で文字を囲むと表になります。【*】を頭に付けると太字になるよう。

f:id:na-make:20180604100019p:plain

プレビューで表示されたものを貼り付けたものがこちら。

簡単な割に見た目にもキレイですね。

1ヶ月光熱費 1月 2月 3月
電気代 1,000円 1,000円 1,000円
ガス代 2,000円 2,000円 2,000円
水道代 0円 3,000円 0円

 が、いちいち編集モードを【見たままモード】から【はてな記法モード】に変更しなければなりません。このあたりが、めんどくさいかも。また、細かなレイアウトには対応していません。

手軽度★★ 仕上がり★★★★

 

その2 エクセルで作った物を貼り付ける方法

エクセルで作った物をそのまま貼り付けることも可能でした。が、ちょっとイケてない。エクセル貼りました感はどこからくるのだろう…

1ヶ月光熱費 1月 2月 3月
電気代 1,000円 1,000円 1,000円
ガス代 1,500円 1,500円 1,500円
水道代 0円 3,000円 0円

と考えて見ると、緑の部分の数字はセンター揃えにしているのできになりませんが…文字と枠が近すぎるという結論になりました。ということで、右枠の文字の頭を半角空けてみました。うん、マシになったがダサい。

1ヶ月光熱費  1月  2月  3月
電気代  1,000円  1,000円  1,000円
ガス代  1,500円  1,500円  1,500円
水道代  0円  3,000円  0円

手軽度★★★★★ 仕上がり★

 

その3 エクセルが無い人でも作れる、オンライン簡単作成サイト

表は【テーブルタグ】って名前なんですね。そこでテーブルタグ作成!でググってみるとオンラインで使える自動作成ツールがいくつか出てきましたので、早速チャレンジしてみました。

手始めにこちらのサイトを使ってみました。

Web便利ツール/テーブルタグ作成ツール - TAG index

 作ってみた表はコチラ!

1ヶ月光熱費 1月 2月 3月
電気代 1,000円 1,000円 1,000円
ガス代 3,000円 3,000円 3,000円
水道代 0円 3,000円 0円

表の形だけをサイトで作りました。細かな設定もできますが、一部だけ色を付けたい!というのは難しそう。ちょっと知識がある人ならキレイに作れそうですが、タグの知識が無いと、適当に枠を消せないのでちょっと手間だなと感じました。

手軽度★★ 仕上がり★★★★

 

イチオシはこちら!ソフト不要で知識不要

いろいろ試してみましたが、初心者の知識で作った作成時間や使用感、仕上がりを比較したところこちらのサイトがオススメできるなと感じました。

テーブルタグ作成ツール - 無料ツール.net

作った表はこちら。特に何も考えずに作っても仕上がりもキレイだと感じました。

1ヶ月光熱費 1月 2月 3月
電気代 1,000円 1,000円 1,000円
ガス代 1,500円 1,500円 1,500円
水道代 0円 3,000円 0円

簡単度 ★★★★ 仕上がり★★★★

f:id:na-make:20180604103048j:plain

こんなかんじで実際の表の形に合わせて入力するだけなので、初めてでしたが簡単にできました。短時間で作成でき修正もしやすかったです。サイトを開いたまま作業して、変えたくなったらサイトで微調整しながら仕上げ、作成後の調整はブログ上で!

 

見やすい読みやすい分かりやすい記事作りを目指して頑張ります〜