はてなブログで表を作成したくて調べました。
はてな表記モードで作る方法
管理画面→設定→基本設定→編集モード→「①はてな記法モード」→変更します
例えば、下の表を作りたいとします。
その場合、セルの区切りを半角の縦棒「|」で区切って表を作ります。
見出しセルは「|*文字|」のように、文字の先頭に「*」を入れます。
するとこんな感じに表ができます。
まぁ面倒くさいな。。
Excelシートを貼り付ける方法
このツールを使います。
Excelで作った表を変換しちゃう君の枠にコピペします。
「CSS出力しない」にチェックを入れ「変換」をクリックします。
こんなポップアップが表示されるので「×」で閉じます。
HTMLコードが出力されるのでコピーします。
記事の「HTML編集」に貼り付ければ完了です。
プレビューで確認するとこんな感じで表示されます。 簡単にできました!
セルに色をつけるには?
このブログを参考にしました。
はてなブログで表を載せる方法(デザイン編) - 雪ん子’s report
- /* 表 */
- .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です。これをカスタマイズして、セルの色、線の太さなどを設定して、コードを作成します。
コードを作成したら、管理画面→デザイン→カスタマイズ(スパナマーク)→{}デザインCSS→(コードを貼り付ける)→変更を保存
こんな風に表示されます。
スマホ版(Proのみ)にも適用する場合は、先程のCSSコードを
<style type="text/css">(CSSコード)<style> で囲んだコードを作ります。
コードを作成したら、管理画面→デザイン→スマートフォン(スマホマーク)→ヘッダ→タイトル下→(コードを貼り付ける)→変更を保存
スクロールさせるには?
表が画面からはみ出る場合に、スクロール表示させる方法です。
スマホはデフォルトでスクロール表示されるので、PC表示の設定のみ行います。
管理画面→デザイン→カスタマイズ(スパナマーク)→{}デザインCSS
下記コードをコピペして、変更を保存します。
/* スクロール */
#table-scroll01 {
box-sizing: border-box; /* スクロール用の箱*/
overflow-x: scroll; /* 横スクロール */
-webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}
記事の「HTML編集」で、表のHTMLコードを
<div id="table-scroll01">~</div> で挟み込みます。
プレビューでこんな風に表示されるようになりました。