【table技法か】はてなブログのテーブル(表)記載法について【HTMLか】
さあ、今日も戯れ言《
テーブル(表)とは
Excel(エクセル)に代表される表計算ソフトのシートを思い浮かべてもらえばいい。
アスキーアート風に表現すれば、こうだ。
ーーーーーーーーーーーーーーーーーー
| 中身1 | 中身2 | 中身3 |
ーーーーーーーーーーーーーーーーーー
| データ | データ | データ |
ーーーーーーーーーーーーーーーーーー
| データ | データ | データ |
ーーーーーーーーーーーーーーーーーー
ダサ過ぎる(汗。むろん、こんな表ならば無い方がマシだ。
箇条書きを駆使して工夫するべきだろう。それか表そのものを画像データ化して、貼り付けてしまえば良い。それならば、PC表示・タブレット表示・スマホ表示にて、レスポンシブ対応的に困る事はなくなる。
こんな風に――
その反面、SEO的には好ましくない。
セルの中(データ)をGoogle神はデータとして認識してくれないからだ。
サクッと分かり易く解説している、優良な記事を紹介しよう。
HTMLモードで載せる場合
『エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)』にて、エクセルシートをHTMLコード化する、と『元IT土方の供述』で解説されているが、だったら、そのHTMLコードの標準形を雛形化してしまおうと思った。
「見たままモード」の「HTML編集」から「はてな記法モード」「Markdownモード」に編集画面を切り替えるのが面倒だからだ。
で、辿り着いたのが下のツール。
これで以下のコードを作成
<table style="border: 1px solid #CCC;border-collapse: collapse;width: 100%;">
<tr>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F4F8FF;font-weight: bold;padding: 5px;">データ1</td>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F4F8FF;font-weight: bold;padding: 5px;">データ2</td>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F4F8FF;font-weight: bold;padding: 5px;">データ3</td>
</tr>
<tr>
<td style="padding:10px;background-color: #F9FCFE;font-weight: bold;">中身1</td>
<td style="padding:10px;border: 1px solid #CCC;">中身2</td>
<td style="padding:10px;border: 1px solid #CCC;">中身3</td>
</tr>
<tr>
<td style="padding:10px;border: 1px solid #CCC;background-color: #F9FCFE;font-weight: bold;">詳細1</td>
<td style="padding:10px;border: 1px solid #CCC;">詳細2</td>
<td style="padding:10px;border: 1px solid #CCC;">詳細3</td>
</tr>
</table>
すると、こんな感じでシンプルな表(テーブル)が出来上がる。
データ1 | データ2 | データ3 |
中身1 | 中身2 | 中身3 |
詳細1 | 詳細2 | 詳細3 |
実際にカスタムしてみる
THMLを少し弄ってみる。
要素1 | 要素2 | 要素3 | |
タグ1 | データ1✕1 | データ1✕2 | データ1✕3 |
タグ2 | データ2✕1 | データ2✕2 | データ2✕3 |
タグ3 | データ3✕1 | データ3✕2 | データ3✕3 |
こうなった場合のコードは以下だ。
<table style="border: 1px solid #CCC; border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;"> </td>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;">要素1</td>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;">要素2</td>
<td style="padding: 5px; border: 1px solid #CCC; background-color: #f4f8ff; font-weight: bold;">要素3</td>
</tr>
<tr>
<td style="padding: 10px; background-color: #f9fcfe; font-weight: bold;">タグ1</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ1✕1</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ1✕2</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ1✕3</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe; font-weight: bold;">タグ2</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ2✕1</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ2✕2</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ2✕3</td>
</tr>
<tr>
<td style="padding: 10px; border: 1px solid #CCC; background-color: #f9fcfe; font-weight: bold;">タグ3</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ3✕1</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ3✕2</td>
<td style="padding: 10px; border: 1px solid #CCC;">データ3✕3</td>
</tr>
</tbody>
</table>
使用している「はてなテーマ」にもよるが、このHTMLコードを基本に弄っていけば、スタンダードな表ならば問題なく作れると思う。凝りたければ、CSSにコードを追記するしかない。
[ データ1✕1 ]この場所の記述を、通常のHTMLに沿って書き換えればKOだ。リンクや画像の挿入もそれでいける。
ここから更に実用の表にすると――
作品タイトル | 表紙 | 購入先 | 値段 |
顔の亡い堕天使 |
|
商品ページ | 400円+税 |
国立安楽死センター |
|
商品ページ | 400円+税 |
真夜中の解猟区 |
|
400円+税 |
ザッとこんな感じになる。
この記事が少しでも参考になってくれれば幸いだ。