紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

【はてなブログ】表の作り方を徹底的に解説【コピペもOK】

f:id:slash1196:20210630193828j:plain はてなブログで記事を書いているんだけど表を貼り付けたいなあ。でもどうやるのかな。表の使うときの注意点とかも教えてくれると嬉しいな。

 

こんなお悩みにお答えします。

 

 この記事でわかること

  • ブログの表を作る作り方
  • ブログで表を使うときの注意点 

 

こんにちわ、紅蓮です。

 

はてなブログで記事を書いているときに表を入れたくなったことはありませんか?

 

今回は、表の作り方を徹底解説します。

 

この記事を読むと表の作り方を理解でき、さらに使うときの注意点までわかっちゃいます。

 

この記事を書く僕はブログ歴は3年ほど。

アフィリエイトの収益は月に3000円ほど。

 

そんな僕も表の入れ方でめちゃ悩んだ経験が…。

そんな僕がうまくできるようになった方法を、一挙公開しちゃいます。

 

ぜひ最後までお読みいただいてやってみてくださいね。

 

ではさっそく行ってみましょう。

Here We Go!!

 

 

ブログの表を作る作り方

f:id:slash1196:20210630193810j:plain

ではさっそくブログの表を作る方法を解説していきましょう。

 

表を作る手順は、以下の通り。

 

  • 手順①:まず表を書き出す
  • 手順②:書き出した表をカスタマイズする

 

では見ていきましょう。

 

手順①:表を書き出す

一つ目の手順は表を書き出すことですね。

 

書き出す方法は、主に以下の5つ。

 

  • 方法①表計算アプリからコピペ
  • 方法②はてな記法で表を作る
  • 方法③マークダウン記法で作る
  • 方法④html記法を使う方法
  • 方法⑤ツールを使う方法

 

では詳しく見ていきましょう。

 

方法①表計算アプリからコピペ

表を作る方法の1つ目は、表計算アプリからコピペする方法ですね。

 

エクセルなどの表計算アプリで作った表を、そのままブログに貼り付ける方法ですね。

 

一番簡単な方法で、初心者でもコピペで簡単な方法です。

 

ただ列が多くなってしまうと、スマホでは見切れてしまう可能性が…。

 

さらにカスタマイズできないのでそれだけわかってもらっていたほうがいいですね。

 

 列が多いときには、、、

列が多い時には、写真にしてあげると非常にわかりやすいかと思います。

 

方法②はてな記法で表を作る

表を作る方法の2つ目は、はてな記法で作る方法ですね。

 

はてな記法ははてなブログの一つの記法ですね。

以下のような記述の仕方をすることで、表を付けることができます。

|*行った場所|*ハワイ島|*オーストラリア|*中国|*アメリカ|
|*行った年齢|15歳|16歳|22歳|20歳|
|*行った期間|3週間|1年半|半年|1年|

 

この方法のいいところは、表をイメージしながら、作れることができることですね。

カスタマイズで色付けしたいところは、|*|であらわし、残りの色付けしないところは||で囲うことで変更できます。


もちろん余白も入れれますし、わかりやすいですね。

 

方法③マークダウン記法で作る

表を作る方法の3つ目の方法は、マークダウン記法で作ることですね。

これもはてなブログの一つの記法ですね。

 

以下のような記述で、表を作ることができますね。

 

|行った場所|行った年齢|行った期間|
|---|---|---|
|ハワイ島|15歳|3週間|
|オーストラリア|16歳|1年半|
|中国|22歳|半年|
|アメリカ|20歳|1年|

 

||で囲うだけでできるのが何よりもイメージがしやすくて、簡単ですね。

 

ポイントは、表の言葉部分とデータの部分を分けるのに|---|という部分で分けることです。

 

ただカスタマイズするときには、一番上段にしか色付けすることができないので、ちょっと考えながら、作る必要がありますね。

 

方法④HTML記法を使う方法

表を作る方法の4つ目は、HTML記法を使う方法です。

HTML記法は万国共通なので、ほかのブログでも使える汎用性の高い方法ですね。

 

以下のように記述することで、表を作ることができます。

 

<table>
<thead>
<tr>
<th>行った場所</th><th>ハワイ島</th><th>オーストラリア</th><th>中国</th><th>アメリカ</th>
</tr>
</thead>
<tbody>
<tr>
<th>行った年齢</th>
<td>15歳</td><td>16歳</td><td>22歳</td><td>20歳</td>
</tr>
<tr>
<th>行った期間</th>
<td>3週間</td><td>1年半</td><td>半年</td><td>1年</td>
</tr>
</tbody>
</table>

 

コードの内容を整理

実はこのコードは、以下の6つのタグでできています。

 

  • タグ①<table>タグ
  • タグ②<thead>タグ
  • タグ③<tr>タグ
  • タグ④<tbody>タグ
  • タグ⑤<td>タグ
  • タグ⑥<th>タグ

 

説明していきましょう。

 

 タグ①<table>タグ

f:id:slash1196:20210630155052j:plain

<table>タグは、表を作るときに必要なタグですね。

 

 タグ②<thead>タグ

f:id:slash1196:20210630155125j:plain

<thead>タグは、表のヘッダ部分を定義するタグですね。

表には二つの部分があって

 

 タグ③<tbody>タグ

f:id:slash1196:20210630155143j:plain

<tbody>タグは、表のボディ部分を定義するタグのことですね。

この上記の表では2~3行目を意味します

 

 タグ④<tr>タグ

f:id:slash1196:20210630155216j:plain

<tr>タグは、表の横の行を意味します。

上記の表でいう1行目の行った場所からアメリカまでを一つの塊と考えるときに使います。

 

 タグ⑤<td>タグ

f:id:slash1196:20210630155347j:plain

<td>タグは、データ部分を定義するときに使います。

上記の表では、15歳から1年と書かれた部分がその場所になります。

 

 タグ⑥<th>タグ

f:id:slash1196:20210630155250j:plain

<th>タグは、見出し部分を定義するときに使いますね。

上記の表では、青くなっている部分がそうなりますね。

 

コードの解説

上から順に、一行ずつ書かれているがポイントですね。

 

まず一行目の青い部分ですね。

 

この表もヘッダ部分とボディ部分に分けてあります。

 

で、青くしたい見出し部分を<th>タグで囲み、白いデータの部分を<td>タグで囲んであります。

 

横一列をひと固まりとして考えるために、<tr>タグを使っていますね。

 

行を増やしたいとき

行を増やしたいときには、以下の手順が必要です。

 

 手順①<thead>内の<th>タグで増やしたいものを書き出す。

まず<thead>内の<th>タグを増やして列を増やしましょう。

例えばカナダと入れる感じですね。

f:id:slash1196:20210630155705j:plain

f:id:slash1196:20210630155737j:plain

 

 手順②そのあと以下のコードを使った行を増やす。

でそのあと、<td>タグで書くべき内容を増やしていきます。

f:id:slash1196:20210630155737j:plain

 

方法⑤ツールを使う方法

例えばエクセルなどの表計算アプリを持っていない場合には、クラウドの表計算ソフトを使うことがあると思います。


しかし、作った表をそのまま使うと、実は見切れてしまうんです。

というのも書かれているHTMLがはてなブログに対応したものではないから。

 

その場合には、ひと手間必要でして、ツールで変換してからHTMLで書きだしましょう。


使うツールは、エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)がおススメですね。

 

このツールは、作った表をその場でHTMLに書き出してくれるツールです。

 

エクセルシートをHTMLテーブルに変換しちゃう君の使い方

使い方を一応説明しておきます。

 

 STEP0.エクセルシートをHTMLテーブルに変換しちゃう君にアクセス

まずエクセルシートをHTMLテーブルに変換しちゃう君 (ββ)にアクセスします

 

 STEP1. エクセルとかからCSV (TSV)をコピーしてを貼り付け

まず一番最初にSTEP1と書いてある下の欄にコピーした表を貼り付けましょう。

f:id:slash1196:20210630162821j:plain

 

 STEP2. オプションを選択して変換
次にオプションを選択して変換をします。

f:id:slash1196:20210630162932j:plain

 

今回色付きのところは1列目と1行目、両方だったので両方に数値を入れていますが、横の一列目がない場合は0を入れましょう。

 

次にCSSを入れるかどうかの確認があります。もしCSSの記述をするとカスタマイズがうまくいかなくなるので、「CSSの出力をしない」にチェックを入れておきましょう。

 

チェックし終わったら、「変換」を押します。

 

すると、以下のような画面になりますので、右上の×ボタンを押しましょう。

f:id:slash1196:20210630163559j:plain

 

 STEP3. HTMLタグをコピーします

f:id:slash1196:20210630163632j:plain

次に上記の部分にHTMLが書き出されます。

それをコピーしましょう。

 

 STEP4.ブログのHTML編集で貼り付け

次にブログのHTML編集にて、貼り付けを行いましょう。

f:id:slash1196:20210630163811j:plain

プレビューにて確認していい感じなら一度下書き保存をしておきましょう。

 

手順②:書き出した表をカスタマイズする

手順の2つ目には書き出した表をカスタマイズすることです。

 

カスタマイズには主に2種類あり、以下の通り。

 

  • 色付けするカスタマイズ
  • スクロールを入れるカスタマイズ

 

では行ってみましょう。

 

色付けするカスタマイズ

まずは色付けするカスタマイズですね。

カスタマイズのCSSコードは、以下の通り。

 

.entry-content table{
width:auto;
}
.entry-content table th{
background:#b0dfff;
text-align:center
}
.entry-content table td,.entry-content table th{
border:1px solid #000;
padding:.5em;
font-size:16px;
text-align:center;
}

 

 表のCSSコードの解説
まず.entry-content tableの部分でパソコンとスマホの時の表示方法を決めていますね。

width:をautoにすることによって、スマホで見切れなくなります。

 

.entry-content table thで青い部分の背景色と、文字の場所を変更していますね。

 

.entry-content table td,.entry-content table thで中に入る文字の大きさや周りの線の太さや色を決めている感じですね。

 

スクロールボックスをつくりたい場合

文字数が多かったり、列を増やしたい場合もありますよね。

 

そんな時にはスクロールボックスを作ってしまいましょう。

 

 スクロールボックスのCSS

#scroll1{
box-sizing: border-box; /* スクロール用の箱 */
overflow-x: scroll; /* 横スクロール */
-webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}

 

 HTMLコード

<div id="scroll1">表のhtml全体</div>

上記のコードで表のHTML全体を挟みます。

 

するとスクロールが完成します。

 

以上が、表の作り方になりますね。

 

ブログで表を使うときの注意点 

f:id:slash1196:20210614212320j:plain

ここでは、ブログで表を使うときの注意点をお話ししましょう。

 

注意点は、以下の通り。

 

  • 注意点①なるべく1つのセルに入れる文字数は少なくする
  • 注意点②横に長いものを作らないこと
  • 注意点③横に長くなった時には代案を考えること

 

では詳しく見ていきましょう。

 

注意点①なるべく1つのセルに入れる文字数は少なくする

表を使うときの注意点の1つ目は、なるべく1つのセルに入れる文字数は少なくすることです。

 

というのもブログを見るときにほとんどの人がスマホで見るからなんです。

 

スマホというのは画面が小さいので、非常に見にくく感じてしまいます。

 

そのためになるべく一つのセルを小さくするために、文字を少なくするほうがいいですね。

 

注意点②横に長いものを作らないこと

表を使うときの注意点の2つ目は、横に長いものを作らないことです。

 

というのもスマホから見るからですね。

 

スクロールを作ったとしても、正直スクロールしないといけないのは読者にとってはあまりよくないですよね。

 

だからなるべく画面に収まってかつ見やすいような表づくりを心がけましょう。

 

注意点③横に長くなった時には代案を考えること

表を使うときの注意点の3つ目は、横に長くなった時には代案を考えることですね。

 

例えば代案は以下のような感じ。

 

  • 代案①:画像化する
  • 代案②:リンクを貼り付けて直接見てもらう

 

どっちも同じように文章の証拠になりますし、使いやすいものですからかなりおススメです。

 

同じスマホで見るのでもスクロール化すると小さくなりますから、やりにくいですよね。

 

その点、画像だとある程度までは拡大できますし、リンクに関してはブログから離れないといけないですが、見やすさでは断然です。

 

そう考えると代案を考えたほうが読者のためになりますから、考えておきましょう。

 

まとめ|表の作り方を知って文章を信頼性のあるものに

お疲れさまでした。

ここまではてなブログの表の作り方と表を作るときの注意点をお話してきました。

 

まとめると、以下のようになります。

まとめ
  • 表の作り方は以下の通り。
    • 手順①:まず表を書き出す
      • 方法的にはいかの5つがあるが個人的には方法⑤がおすすめ。
      • 方法①表計算アプリからコピペ
      • 方法②はてな記法で表を作る
      • 方法③マークダウン記法で作る
      • 方法④HTML記法を使う方法
      • 方法⑤ツールを使う方法
    • 手順②:書き出した表をカスタマイズする
      • カスタマイズには以下の二つがある
      • 色付けするカスタマイズ
      • スクロールを入れるカスタマイズ
  • ブログで表を使うときの注意点は、以下の3つ。
    • 注意点①なるべく1つのセルに入れる文字数は少なくする
    • 注意点②横に長いものを作らないこと
    • 注意点③横に長くなった時には代案を考えること

 

表の作り方を覚えておくと、読者のユーザビリティは飛躍的にアップします。

ですからぜひ作ってみてはいかがでしょうか。

 

読者数もアップしますしぜひやってみましょうね。

 

ってことで今回はこの辺で。

また次回に。