初めに
先日、このブログのスターが合計1000個を超えました。多くの方に読んでいただいて大変感謝しています。その中には、顔も名前も知りませんが、毎回読みにきてスターを入れてくれる読者の方もいるようで、それがモチベーションになって今まで続けてこれたと思っています。
まだブログ開設してから3か月程度ですが、シーズンが始まったら実釣記録もどんどん載せていきたいと思っていますので、今後もよろしくお願いします。
さて、今回は釣りの話から離れてブログ作りの技術紹介をします。はてなブログで表を作るのは意外と面倒くさいです。いろいろと調べましたが、結論から言うとワープロを打つように一発で思い通りの表を挿入する方法は2022年現在存在しないようです。そのため、htmlやCSSに詳しい方が様々な方法を紹介してくれています。私もそれらを参考にさせてもらいました。
この記事では、現在私がやっている一番簡単な表の作成方法ただ一つを紹介したいと思います。目次の順番通りに作業をして、最終的にこんな表を作ってみます。
| 社員番号 | 名前 | 所属 | 性別 | 年齢 | |
|---|---|---|---|---|---|
| 1 | 93003 | AAA | 総務 | 男性 | 50 |
| 2 | 97010 | BBB | 経理 | 男性 | 44 |
| 3 | 03005 | CCC | 資材 | 男性 | 38 |
| 4 | 99007 | DDD | 営業 | 女性 | 40 |
| 5 | 05001 | EEE | 研修 | 男性 | 35 |
| 6 | 99003 | FFF | 技術 | 男性 | 40 |
はてなブログで表を作る方法
必要なツール
- Excel（またはそれに準拠するもの）
- エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)
編集見たままモードで表を入れる場所を決める
Excelを使って表を作る
※私はExcelを持っていないので、WPSSpreadsheetsを使っています。
Excelで作った表をメモ帳にコピーする
【ワンポイント】
空白セルは、後述の「エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)」で認識できないので、空白にしたいセルには仮値として”a”など何か文字を入れておきましょう。表が完成した後で、編集見たままモードで空白に戻せます。
エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)を開く
http://styleme.jp/tool/xls2html/#close
メモ帳のテキストをペーストする
※メモ帳を使わずに、Excelから直接コピー＆ペーストしても問題ありません。
CSSを出力しないにチェックを入れる
変換ボタンを押してHTMLを作成する
作成されたHTMLタグをコピーする
はてなブログに戻ってHTML編集からペーストする
編集見たままモードに戻ると表ができている
※少し高度なこと※ 表のデザインをするCSSコード
私が使っている表のデザインを決めるCSSコードを紹介します。【管理画面】－【デザイン】－【カスタマイズ】－【{}デザインCSS】に以下のコードを追加しています。
/* 表 */
.entry-content table {
width:100%; /* 大きさはデバイスの横幅いっぱい */
}
.entry-content table caption{ /* タイトル */
font-size: 17px; /* 文字の大きさ */
padding: 0.5px; /* 文字周りの余白 */
}
.entry-content table th { /* 見出しセル */
border: 1px solid #000000; /* 線の太さ・種類・色コード */
background: #C3C3C3; /* 背景色 */
text-align: left; /* 左揃え */
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コードを入れることで、スマホなどの横幅の狭いデバイスで入りきらなくなった時にスクロールバーを出すようにしています。
/* スクロールバー */
/* 該当箇所を <div class="scroll"> </div> で挟む */
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
このCSSコードを加えた上で、該当する表をHTML編集で<div class="scroll">と</div> で挟むと、横幅の足りないデバイスで表示されたときに自動的にスクロールバーが出てくるようになります。
最後に補足とお礼
上記の手順をさらに省略して、Excelから直接はてなブログの編集見たままモードにペーストしても表ができます。ただ、この場合は自分でデザインのカスタマイズが必要になります。
表を作成する方法やスクロールバーを入れる方法は、私が最初に表を作成したときに以下の資料を参考にさせてもらいました。ありがとうございます。
