ブログに表を作るには
データを表示したり、比較や一覧を表示するとき、表にしたら見やすいですよね。
はてな記法で表が作れるみたいなので試しに作ってみたら文字が縦書きになったり、
変なところで改行されたりととんでもないことに…
どうやら横幅に合わせて調整されてしまうみたいですね。
これじゃあ使えないなと思っていたら、調整を無視して、
スクロールさせて表示する方法があるみたいです！
これできちんと見られる表ができる！
漆うしる (id:UrushiUshiru)様の
の記事を参考にさせていただきました。
CSSを追加する
表をまともに表示するにはCSSと言うのを追加しなければいけません。
CSS (Cascading Style Sheets) は、ウェブページのスタイルを設定するコードです。
なんじゃそりゃ？って感じですね…
画面にこんな感じで表示してねって言う指示みたいなものでしょうか。
とりあえず、そう言うのがあるよってことだけ覚えておけば大丈夫！
はてなブログの管理画面にアクセスして、
デザイン→スパナマーク→デザインCSSと移動し、
下記のコードをそれぞれ貼り付けます。
ここで注意して欲しいのですが、デザインCSSは右クリックで貼り付けができません。
キーボードのCtrlを押しながらVを押して貼り付けましょう。
ちなみにCtrlを押しながらCを押すとコピーです。
貼り付けたら変更を保存をクリックして設定を保存します。
・表をカスタマイズするCSS
/* 表 */ .entry-content table { width:auto; /* 大きさを自動に */ } .entry-content table caption{ /* タイトル */ font-size: 17px; /* 文字の大きさ */ padding: 0.5px; /* 文字周りの余白 */ } .entry-content table th { /* 見出しセル */ border: 1px solid #000000; /* 線の太さ・種類・色コード */ background: #B0DFFF; /* 背景色 */ text-align: center; /* 中央揃え */ padding: 0.5em; /* 文字周りの余白 */ width:auto;/* 大きさを自動に */ white-space:nowrap; /* 文字を折り返さない */ } .entry-content table td { /* 普通のセル */ border: 1px solid #000000; /* 線の太さ・種類・色コード */ padding: 0.5em; /* 文字周りの余白 */ width:auto;/* 大きさを自動に */ white-space:nowrap; /* 文字を折り返さない */ }
レスポンシブデザインでない場合、
スマホでも表示するにはスマホ用にも追加しなければいけません。
はてなブログの管理画面にアクセスしてデザイン→スマホマーク→ヘッダのタイトル下に
上記のCSSを<style type="text/css"><style>で囲って貼り付けます。
ただ、タイトル下ははてなブログProじゃないと変更できません。
スマートフォン用にHTMLを設定するにチェックが入っているか確認しましょう。
こちらも、貼り付けたら変更を保存をクリックして設定を保存します。
これだけだと横に長い表の場合画面から思いっきりはみ出ます(笑)
なので、次のCSSも同じようにデザインCSSに貼り付けましょう。
こちらはスマホ用は不要です。
・表をスクロールさせるCSS
/* スクロール */ #scroll01 { box-sizing: border-box; /* スクロール用の箱*/ overflow-x: scroll; /* 横スクロール */ -webkit-overflow-scrolling: touch; border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */ }
#table-scroll01の英数字は他のとかぶらなければ何でもいいです。
でも、表を表示する時に必要になるので覚えておきましょう。
これで準備は整いました。
実際に表を作ってみましょう。
ブログに表を作成する
CSSを追加したら次は記事内に表を作成します。
表を作成する方法はいくつかありますが、3通りの方法を紹介します。
はてな記法で作る
はてな記法では|で囲むだけで簡単に表が作れます。
同じ行の場合は続けて|で囲んで入力、
行を変える場合は改行して同じように|で囲んで入力していきます。
でも、はてな記法ってくらいだからはてな記法でしか使えないのかな？
試しに表を作ってみました！
| 商品名 | 販売場所 | 価格 | 画像 | 備考 |
|---|---|---|---|---|
| お散歩すんこマグカップ | SUZURI オリラボ |
1890円 |
 |
オリラボのは電子レンジ不可 |
| のぞき見すんこトートバッグ | SUZURI | 白、ナチュラル2230円 その他の色2730円 |
 |
特になし |
| 不思議の国のすんこ手帳型アンドロイドケース | オリラボ | 3000円 |
 |
スマホ貼り付け型 内側に鏡がついています。 |
<div id="scroll01">五反田すんこオリジナルグッズ |*商品名|*販売場所|*価格|*画像|*備考| |お散歩すんこマグカップ|SUZURI<br>オリラボ|<div align="right">1890円</div>|画像のアドレス|説明| |のぞき見すんこトートバッグ|SUZURI|<div align="right">白、ナチュラル2230円<br>その他の色2730円</div>|画像のアドレス|説明| |不思議の国のすんこ手帳型アンドロイドケース|オリラボ|<div align="right">2770円</div>|画像のアドレス|説明<p>説明| </div>
こんな感じで入力しています。
<div id="設定したid名（表をスクロールさせるCSSの#の横のやつ">
表データ
</div>
ですね。
表データを<div>で挟むときは改行してください。
そのままつなげるとできません。
表のタイトルはそのままつなげても大丈夫です。
| 〇 | <div id="設定したid名"> 表データ </div> |
| 〇 | <div id="設定したid名">表のタイトル 表データ </div> |
| × | <div id="設定したid名">表データ </div> |
| × | <div id="設定したid名"> 表データ</div> |
| × | <div id="設定したid名">表データ</div> |
表の項目の前に*をつけることで、
見出しとして設定した色のセルにすることができます。
<div align="rightまたはleftまたはcenter"></div>で囲むことで
文字をそれぞれ右揃え、左揃え、中央揃えに設定でき、
<br>や<p>を使って改行することもできます。
また、通常のやり方で画像のアドレスを入力して画像を貼り付けたり、
リンクを貼ったりもできます。
画像は自動で縮小され、クリックするとオリジナルの画像が表示されるので
サイズがバラバラでもなんとかなりそうです。
ちなみに私ははてな記法でリアルタイムプレビューを使用して記事を書いているのですが、
リアルタイムプレビュー画面では表はスクロールはおろか、表示もひどいです…
プレビュー画面で確認しましょう。
タグを使って作る
これが本来のやり方なのかな？
| タグ | 説明 | はてな記法の場合 |
|---|---|---|
| <table></table> | 挟まれた範囲を表にする | |で囲む |
| <caption></caption> | 表のタイトルを表の真ん中に表示する | 表の上に文字入力 |
| <tr></tr> | 挟まれた範囲を行で表示する | 改行せずに|で囲む |
| <th></th> | 見出しのセルにする | 文字の前に*をつける |
| <td></td> | 普通のセルにする | |で囲む |
これらのタグを使って表を作成していきます。
はてな記法の時とは違ってちょっと複雑ですね。
先ほどはてな記法で作った表をタグを使って作ってみました。
| 商品名 | 販売場所 | 価格 | 画像 | 備考 |
|---|---|---|---|---|
| お散歩すんこマグカップ | SUZURI オリラボ |
1890円 |
|
オリラボのは電子レンジ不可 |
| のぞき見すんこトートバッグ | SUZURI | 白、ナチュラル2230円 その他の色2730円 |
|
特になし |
| 不思議の国のすんこ手帳型アンドロイドケース | オリラボ | 2770円 |
|
スマホ貼り付け型 内側に鏡がついています。 |
こちらはこんな感じで入力しています。
<div id="scroll01"> <table> <caption><span style="color: #ff0000"><div align="left">五反田すんこオリジナルグッズ</div></span></caption> <tr> <th>商品名</th> <th>販売場所</th> <th>価格</th> <th>画像</th> <th>備考</th> </tr> <tr> <td>お散歩すんこマグカップ</td> <td><a href=https://suzuri.jp/gotanda_sunko>SUZURI</a><br><a href=https://market.orilab.jp/user/5f7d4900b860c>オリラボ</a></td> <td><div align="right">1890円</div></td> <td><img class="hatena-fotolife" title="お散歩すんこマグカップ" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sunko-chan/20201102/20201102222841.png" alt="お散歩すんこマグカップ" /></td> <td>オリラボのは電子レンジ不可</td> </tr> <tr> <td>のぞき見すんこトートバッグ</td> <td><a href=https://suzuri.jp/gotanda_sunko>SUZURI</a></td> <td><div align="right">白、ナチュラル2230円<br>その他の色2730円</div></td> <td><img class="hatena-fotolife" title="のぞき見すんこトートバッグ" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sunko-chan/20201104/20201104043156.jpg" alt="のぞき見すんこトートバッグ" /></td> <td>特になし</td> </tr> <tr> <td>不思議の国のすんこ手帳型アンドロイドケース</td> <td><a href=https://market.orilab.jp/user/5f7d4900b860c>オリラボ</a></td> <td><div align="right">2770円</div></td> <td><img class="hatena-fotolife" title="不思議の国のすんこ手帳型アンドロイドケース" src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sunko-chan/20201026/20201026145240.png" alt="不思議の国のすんこ手帳型アンドロイドケース" /></td> <td>スマホ貼り付け型<p>内側に鏡がついています。</td> </tr> </table> </div>
うん、何が何やらだし、目がチカチカするし大変ですね。
エクセルで表を作ってブログ用に変換する
はてな記法もタグもいちいち変なの入力しなきゃだから面倒くさい。
エクセルで表を作って貼り付ければいいんじゃないの？
そうなりますよね。
このサイトを使えば、エクセルで作った表をブログに貼り付けられるように
タグに変換してくれます。
ただ、リンクや画像は変換できないっぽいので後で修正する必要があります。
表示したい表をエクセルで作り、その表全体をコピーします。
（表のデータは他2種とは違うものです。）
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)にアクセスし
STEP1に貼り付けます。
この時貼り付けられた文字を変に足したり削除したりすると
うまく変換されなくなるので触らずに。
次に変換するオプションを選択します。
空白セルを出力しないと、空白セルを左セルと結合するにチェックが入っていますが、
後から画像などを貼り付ける場合など空白のセルが必要な場合はチェックを外します。
そして、CSSを出力しないにチェックを入れ、下にある変換をクリック。
変換した表のプレビューが表示されるので確認して右上の×をクリックして閉じます。
プレビューを確認して大丈夫だったらSTEP3に表示されているタグをコピーして
ブログに貼り付けます。
あとは必要に応じてリンクや画像を貼り付けたり、
スクロールさせるタグやデザインの細かい修正などをすれば完成です。
まとめ
・ブログに表を作る方法は、はてな記法、タグ、エクセルを変換して貼り付けの3種類
・表を<div id="CSSで設定したid"></div>で囲む
スクロールさせなくても大丈夫な場合は必要なし
表を作る。
手書きでやれば簡単にできる表もブログに表示するとなるとなかなか大変です。
3種類紹介しましたが、どの方法でも大変さはあまり変わらないように感じました。
なので、自分に合うやり方でやればいいと思います。
自分で表を書いて、その画像を貼り付ければいいんじゃね？と思っちゃいそうですが、
リンクや画像を貼り付けたりもできるし、手書きの画像より見栄えがいいので
頑張ってやってみましょう。
大変だった…
