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

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

この記事でわかること

記事の信頼性

こんにちわ、Jouji(@jouji0720)です。現在僕は、webライター4年目で、フリーランスライターとして生活しています。

そんな僕が今回は、はてなブログで表の入れ方を徹底解説していきます。この記事を読むと表の作り方を理解でき、さらに使うときの注意点までわかっちゃいます。ぜひ最後までお読みいただいて、やってみてください。

【悲報】はてなブログには、表を入れるための機能がない

はてなブログのエディターには、表を入れるための機能が備わっていません。もともとWordpressのように、表を入れる機能があればいいのですが、はてなブログには存在しないです。

そのために、表を入れたいときには、自分で作るしかないわけです。

はてなブログの記事内に表を作る方法

はてなブログの記事内に表を作る手順は、以下の通りです。

それぞれ解説します

表を書き出す

はてなブログの記事内に表を入れる手順の1つ目は、表を書き出すことです。

表の書き出し方は、以下があります。

それぞれ解説します。

表計算アプリからコピペ

表の書きだし方の1つ目は、表計算アプリからコピペすることです。

エクセルなどの表計算ソフトやアプリなどで作った表をコピーして、記事中に貼り付ける方法です。一番簡単な方法で、コピペができれば事足りる方法です。

ただ問題点は表が大きくなると、見切れてしまう可能性があり、大きさの調整が難しいことです。そのために何回も調整をしないといけないので、注意が必要ですね。

列が多いときには、、、

列が多い時には、写真にするといいです。というのも画像は大きさを変えられるからです。

とはいえ、あまりにも列が多かったりすると、見にくくなるので、この方法は横が5列くらいまでと思うといいかもしれないです。

はてな記法で表を作る

表の書き出し方の2つ目は、はてな記法で作ることです。はてな記法は、はてなブログの記法の1つです。以下は、書き方の例です。

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

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

この書き方は、表を見た感じで書けることです。そのために初心者にも、表が書きやすいためにおすすめです。

マークダウン記法で作る

表の書き出し方の3つ目は、マークダウン記法で作ることです。これも、はてなブログの1つの記法です。以下は、書いたときの例です。

|行った場所|行った年齢|行った期間|
|---|---|---|
|ハワイ島|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>タグ

<table>タグは、表を作るときに使うタグです。表を作るよっという宣言をして表であることを示します。

<thead>タグ

<thead>タグは、表のヘッダ部分を定義するタグです。上記画像では、赤く囲まれた部分です。

このタグで挟むことによって、一番上の部分をグループ化することができます。

<tbody>タグ

<tbody>タグは、ボディ部分を定義するタグです。上記の画像では赤く囲まれた部分です。

このタグで挟むことで、ボディ部分をグループ化することができます。

<tr>タグ

<tr>タグは、表の行を指定するタグです。上記画像では、赤く囲まれているそれぞれの部分です。

このタグで挟むことで、各行のデータ部分をグループ化できます。

<td>タグ

<td>タグは、データ部分を定義するときに使うタグです。上記画像では、四角で囲まれたそれぞれのセルのデータ部分です。

このタグで囲むことで、それぞれのセルにデータを書き込むことができます。

<th>タグ

<th>タグは、見出し部分を定義するときに使うタグです。上記の表では、青くなっている部分に書かれている文字部分がそうです。

このタグで囲むことで、見出し部分を作ることができます。

書く時の順番

順番は以下の通り。

上記の通りです。

行を増やしたいとき

行を増やしたいときには、上記の手順の7と8を繰り返すと、行が増えます。

やってみてください。

ツールを使う

表の書き出し方の5つ目は、ツールを使うことです。

1つ目にご紹介したデータをそのまま張り付ける方法は、コピーしたデータがそのままブログに反映されてしまうデメリットがあります。そのためにフォントの種類が変わってしまったりします。

ツールを使うと、そのようなこともないですし、コピペができれば、使えるので初心者にも安心の方法です。

>>エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

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

使い方は以下の通り。

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

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

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

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

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

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

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

チェックし終わったら、「変換」を押します。
すると、以下のような画面になりますので、右上の×ボタンを押しましょう。

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

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

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

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

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

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

手順②：書き出した表を、CSSでカスタマイズする

手順の2つ目には書き出した表を、CSSでカスタマイズすることです。というのも書き出した表をそのまま使うと、スマホで見た際に表が見えなくなる場所があるからです。

カスタマイズは、以下の通り。

それぞれ解説します。

色付けするカスタマイズ

表を、色付けするカスタマイズです。

カスタマイズの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全体を挟みます。するとスクロールが完成します。

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

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

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

注意点は、以下の通り。

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

1つのセルに入れる文字数は少なくする

表を使うときの注意点の1つ目は、1つのセルに入れる文字数は少なくすることです。というのもブログを見るときにほとんどの人がスマホで見るからなんです。

スマホというのは画面が小さいので、非常に見にくく感じてしまいます。そのためになるべく一つのセルを小さくするために、文字を少なくするほうがいいですね。

横に長いものを作らない

表を使うときの注意点の2つ目は、横に長いものを作らないことです。というのもスマホで見た時に見切れてしまうからです。

スクロールを作ったとしても、正直スクロールしないといけないデータは読者にとってストレスでしかありません。だからなるべく画面に収まってかつ見やすいような表づくりを心がけましょう。

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

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

例えば、以下のような感じ。

どっちも同じように文章の証拠になりますし、使いやすいものですからおススメです。同じスマホで見るのでもスクロール化すると小さくなりますから、やりにくいです。

その点、画像だとある程度までは拡大できますし、リンクに関してはブログから離れますが見やすいです。代案を考えたほうが読者のためになりますから、考えておきましょう。

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

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

表の作り方を覚えておくと、読者の使い勝手は、めっちゃ上がります。ぜひ作ってみましょう。

今回は以上です。

次におすすめの記事