僕は【戯れ記事《ゴト》遣い】

「戯れ言遣い」ならぬ「戯れ記事遣い」を名乗るブロガーです。 雑記系ですが、読んで損したと憤慨されても困ります。 だってコレは「戯れ言」だから――

ヘッダー画像
  •   
  •   
 — 最 新 記 事 —

【table技法か】戯れ言――はてなブログのテーブル(表)記載法について【HTMLか】

【table技法か】戯れ言――はてなブログのテーブル(表)記載法について【HTMLか】

f:id:ayafumi-rennzaki:20180529140913j:plain

――【スポンサー検索】――

 

 

さあ、戯れ言 記事 ゴト を始めようか――

 

f:id:ayafumi-rennzaki:20190806001740j:plain

 

テーブル(表)とは

Excel(エクセル)に代表される表計算ソフトのシートを思い浮かべてもらえばいい。

アスキーアート風に表現すれば、こうだ。

 

ーーーーーーーーーーーーーーーーーー

| 中身1 | 中身2 | 中身3 | 

ーーーーーーーーーーーーーーーーーー

| データ | データ | データ | 

ーーーーーーーーーーーーーーーーーー

| データ | データ | データ | 

ーーーーーーーーーーーーーーーーーー

 

ダサ過ぎる(汗。むろん、こんな表ならば無い方がマシだ。

箇条書きを駆使して工夫するべきだろう。それか表そのものを画像データ化して、貼り付けてしまえば良い。それならば、PC表示・タブレット表示・スマホ表示にて、レスポンシブ対応的に困る事はなくなる。

こんな風に――

 

f:id:ayafumi-rennzaki:20190806060729j:plain

 

その反面、SEO的には好ましくない。

セルの中(データ)をGoogle神はデータとして認識してくれないからだ。

 

サクッと分かり易く解説している、優良な記事を紹介しよう。

www.itjigoku.com

HTMLモードで載せる場合

『エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)』にて、エクセルシートをHTMLコード化する、と『元IT土方の供述』で解説されているが、だったら、そのHTMLコードの標準形を雛形化してしまおうと思った。

「見たままモード」の「HTML編集」から「はてな記法モード」「Markdownモード」に編集画面を切り替えるのが面倒だからだ。

 

で、辿り着いたのが下のツール。

muryo-tool.net

これで以下のコードを作成

<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だ。リンクや画像の挿入もそれでいける。

 

ここから更に実用の表にすると――

 

作品タイトル 表紙 購入先 値段
顔の亡い堕天使

f:id:ayafumi-rennzaki:20190806012248j:plain

商品ページ 400円+税
国立安楽死センター

f:id:ayafumi-rennzaki:20190806012303j:plain

商品ページ 400円+税
真夜中の解猟区

f:id:ayafumi-rennzaki:20190806012432j:plain

商品ページ

400円+税

 

ザッとこんな感じになる。

この記事が少しでも参考になってくれれば幸いだ。

 

管理人による電子書籍はコチラ。

◆配信電子ストア◆