たつブロ

アラフォーWebデザイナーの福岡のグルメや日々についての事など、いろいろ雑多なブログです。たまに阪神のことも...

これは便利!簡単にブログに表を設置する 「テーブルタグ作成ツール」

簡単にブログに表を設置どうも、たつとらです。

 

ブログを書いていると記事の内容によっては、表やリストを入れたいと思う事もありませんか?

 

ボクは、最近結構な頻度で入れているので表作成が欠かせません。


表・リスト作成にはエクセルというのが一般的だと思いますが、エクセルなんて普段仕事では使うことあっても、家庭で使っていなかったりとか更にはソフトを持っていない人もいると思います。

 

そんな中、ボクも普段使っていて簡単に表やリストが作れるツール「テーブルタグ作成ツール」を紹介しようと思います。

知っている人もいると思いますが、めっちゃ簡単に作れます。

 

箇条書きだと読みづらい

箇条書きで読みづらい

 

ブログの記事を読んでいると、文章だけの長いものだと余り最後まで読む気にもならない時もあります。(画像などあればそれなりに読み進めることができますが)

 

更には、せっかく調べた物を箇条書きで書いてしまい逆に読みにくくなったり、バランスが悪くなったりしませんか?

 

ボクも自分の記事を読み直した時、見づらい場合はリライト時に表にして書き直したりするときがあります。

 

そんな時、表やリストを入れるのが面倒だったらわざわざ書き直したりしないと思います。

 

はてなブログでは、「はてな記法」や「Markdown」で表を入れることもできますが、ボクは「見たままモード」で記事を書いていて、わざわざ表を作る時だけ記法を変えるのも更に面倒なので(結局、面倒なだけなんですが…)、ボクは、この「テーブルタグ作成ツール」を活用しています。

 

「はてな記法」や「Markdown」を使用している方はこちらの記事を参考にしたらいいと思います。

www.snow0303.com

スポンサーリンク

 

 

テーブルタグ作成ツール

では、さっそくこちらの「テーブルタグ作成ツール」ページに飛んでみます。

 

こんな風にページが表示

こんな風にページが表示され、(「デザイン一覧」は何故かクリックしても反応しませんが...)

 

「デザイン一覧」の下の「列を追加する」「行を追加する」ボタンを押す事で列や行が追加されます。

「列を追加する」「行を追加する」ボタン

 

逆に列や行を減らしたい時は「編集エリア」の欄で書いてあるようにダブルクリックすると列や行を削除できます。 (赤枠の部分)

ダブルクリックすると列や行を削除そして、編集エリアの枠内にマウスオーバーすると「ダブルクリックで編集」と出てくるので、ダブルクリックすれば、その枠内に文字が入力できます。

ダブルクリックで編集

 

試しに入力してみます。

試しに入力

 

全て入力したら下の「プレビュー」欄に実際に記事に入れた時の表示が出ます。(入力の途中でも確認できます)

「プレビュー」欄に実際に記事に入れた時の表示

 

その表示でOKであれば、「テーブルタグ」の欄にソースコードが表示されるので、それをそのままコピーして、

テーブルタグ

 

「はてなブログ」(「はてなブログ」を使用しているので「はてなブログ」で説明)の記事編集の「見たままモード」から「HTML編集」内の入れたい場所にソースコードをペーストしたら完了です。

「見たままモード」から「HTML編集」

 

上記のコードを入れるとこんな感じで表示されます。

曜日 英語
月曜日 Monday
火曜日 Tuesday
水曜日 Wednesday
木曜日 Thursday
金曜日 Friday
土曜日 Saturday
日曜日 Sunday

 

簡単ですね。これなら、エクセルやソースコードを使えない人でも簡単に表やリストを作ることができます。

 

背景や線、文字などの色を変えたい時は#に続く数字をカラーコードなどから好きな色を選んでコピーすれば変更できますよ。

www.colordic.org

最後に

以上、表・リストの簡単な作成ツールの紹介でした。

 

尚、一度作った表を再利用するときは「見たままモード」でテキスト部分を変更するだけで使えるので便利です。

 

記事の内容にもよると思いますが、明らかに表やリストを入れた方が見栄えも良くなるし、読者の方も読みやすくなるので、参考にしてみてはいかかでしょうか。

 

 

では、また。 

 

 

スポンサーリンク

 

  

アフィリエイト始めるなら

初心者でも安心のサポート!アフィリエイトを始めるならA8.net

 

もしもアフィリエイト

 

こちらも合わせてお読みください

www.tatsublo.net

www.tatsublo.net

www.tatsublo.net