【はてなブログ】エクセルの表を貼ってソート機能を付ける方法

こんにちは、くらのすけです。

当ブログ、「くらのすけ調べ」とあるように情報を扱っているわけですが、

データや表を発表するうえで当然見やすくしたいと思っております。

その一環として、先日発表した記事の表にソート機能を付けてみました

www.kuranosukessk.com

今回ははてなブログに「ソート機能の付いた表」貼り付ける方法を書いてみたいと思います。

当方htmlは初心者であるため、表にソート機能を付けるのに割と苦戦してしまいました。

いろいろググったのですが、初心者にも分かりやすい説明が意外にも見つからなかったので、今回は誰でも分かるような説明を試みたいと思います。

表をはてなブログに貼り付ける

「表を貼り付け方がそもそも分からない」という方のための簡単な説明です。

Googleフォームで集めたデータの編集にはエクセルを使うことが多いです。

エクセルの表をブログに貼り付けるには

①画像化して貼り付ける

②pdf化して貼り付ける

③エクセルの表をブログ編集欄にコピペする（画像化してしまう場合も）

という方法があります（細かく言えば他にも分類できます）

簡単な表なら、エクセルで表を作り、セルを「見たまま編集」にコピーするだけで表になってくれます

試しに国別のフィールズ賞受賞者数、ノーベル賞受賞者数の表を作ってみました。

国	フィールズ受賞者数	ノーベル賞受賞者数
アメリカ	13	360
フランス	12	58
ロシア	9	20
イギリス	8	121

こんなかんじです。とっても簡単ですね。

これにソート機能を付けてみたいと思います。

表にソート機能を付けてみる

ここからはhtml編集を行う必要があります。

参考にしたのはこちらです。

www.stray-scrapbook.work

qiita.com

かなり分かりやすい記事なのですが、これだけでは全くの初心者的には「？」となってしまうと思います。ここではもう少し分かりやすい説明を試みます。

下の記事の中にあるコードの

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

から、最後の

</script>
</body>
</html>

までをコピーします。

そしてはてなブログの「デザイン」→「カスタマイズ」→「記事」→「記事上下のカスタマイズ」へと進み、「記事下」に貼り付けます。これで条件が整えば表にソート機能が付きます。

表のhtmlを編集する

記事のhtml編集で表の部分の部分を抜き出すと下記のようになります。

 <table width="362">
<tbody>
<tr>
<td width="70">国</td>
<td width="146">フィールズ受賞者数</td>
<td width="146">ノーベル賞受賞者数</td>
</tr>
<tr>
<td>アメリカ</td>
<td>13</td>
<td>360</td>
</tr>
<tr>
<td>フランス</td>
<td>12</td>
<td>58</td>
</tr>
<tr>
<td>ロシア</td>
<td>9</td>
<td>20</td>
</tr>
<tr>
<td>イギリス</td>
<td>8</td>
<td>121</td>
</tr>
</tbody>
</table>

記事のhtml編集で表の部分の部分を抜き出すと下記のようになります。

<table>と</table>で挟まれた部分は表全体を

<tbody>と</tbody>で挟まれた部分はボディを（ヘッダでもフッタでもない部分）

<th>と</th>で挟まれた部分は見出しセルを（ヘッダの中身です。ここにはありません）

<tr>と</tr>で挟まれた部分は行を

<td>と</td>で挟まれた部分はセルを表します。

ここで、表が<thead>（ヘッダにあたる部分）と<tbody>で構成されるように書き換えます。書き換えたものが以下です。

<table width="362">
<thead>
<tr>
<th width="70">国</th>
<th width="146">フィールズ受賞者数</th>
<th width="146">ノーベル賞受賞者数</th>
</tr>
</thead>
<tbody>
<tr>
<td>アメリカ</td>
<td>13</td>
<td>360</td>
</tr>
<tr>
<td>フランス</td>
<td>12</td>
<td>58</td>
</tr>
<tr>
<td>ロシア</td>
<td>9</td>
<td>20</td>
</tr>
<tr>
<td>イギリス</td>
<td>8</td>
<td>121</td>
</tr>
</tbody>
</table>

大事なのは黄色で示した部分です。これをhtml編集にぶち込むと

国	フィールズ受賞者数	ノーベル賞受賞者数
アメリカ	13	360
フランス	12	58
ロシア	9	20
イギリス	8	121

このような表の完成です。見事にソート機能がついています。

ヘッダの背景に色がついているのは、また別のコードです。

というわけで他のブログのお力もお借りしてですが、分かりやすく説明できたかなと思います。最後まで読んでいただきありがとうございました。