【はてなブログ】表を作成する方法

f:id:naru443:20210319025356p:plain


はてなブログで表を作成したくて調べました。

はてな表記モードで作る方法

管理画面→設定→基本設定→編集モード→「①はてな記法モード」→変更します

f:id:naru443:20210319015219p:plain
例えば、下の表を作りたいとします。

f:id:naru443:20210319015534p:plain

その場合、セルの区切りを半角の縦棒「|」で区切って表を作ります。

見出しセルは「|*文字|」のように、文字の先頭に「*」を入れます。

f:id:naru443:20210319015917p:plain

するとこんな感じに表ができます。

f:id:naru443:20210319020330p:plain

まぁ面倒くさいな。。

 

Excelシートを貼り付ける方法

このツールを使います。

エクセルシートをHTMLテーブルに変換しちゃう君 (ββ)

 

Excelで作った表を変換しちゃう君の枠にコピペします。

f:id:naru443:20210319021026p:plain

「CSS出力しない」にチェックを入れ「変換」をクリックします。
f:id:UrushiUshiru:20190326235327j:plain

こんなポップアップが表示されるので「×」で閉じます。

f:id:naru443:20210319021206p:plain

HTMLコードが出力されるのでコピーします。

f:id:naru443:20210319021255p:plain

記事の「HTML編集」に貼り付ければ完了です。 

f:id:naru443:20210319021421p:plain

プレビューで確認するとこんな感じで表示されます。 簡単にできました!

f:id:naru443:20210319021459p:plain

 

セルに色をつけるには?

このブログを参考にしました。

はてなブログで表を載せる方法(デザイン編) - 雪ん子’s report

  1. /* 表 */
  2. .entry-content table {
  3. width:auto; /* 大きさを自動に */
  4. }
  5. .entry-content table caption{ /* タイトル */
  6. font-size: 17px; /* 文字の大きさ */
  7. padding: 0.5px; /* 文字周りの余白 */
  8. }
  9. .entry-content table th { /* 見出しセル */
  10. border: 1px solid #000000; /* 線の太さ・種類・色コード */
  11. background: #B0DFFF; /* 背景色 */
  12. text-align: center; /* 中央揃え */
  13. padding: 0.5em; /* 文字周りの余白 */
  14. width:auto;/* 大きさを自動に */
  15. white-space:nowrap; /* 文字を折り返さない */
  16. }
  17. .entry-content table td { /* 普通のセル */
  18. border: 1px solid #000000; /* 線の太さ・種類・色コード */
  19. padding: 0.5em; /* 文字周りの余白 */
  20. width:auto;/* 大きさを自動に */
  21. white-space:nowrap; /* 文字を折り返さない */
  22. }

表のデザインに関するCSSです。これをカスタマイズして、セルの色、線の太さなどを設定して、コードを作成します。

 

コードを作成したら、管理画面→デザイン→カスタマイズ(スパナマーク)→{}デザインCSS→(コードを貼り付ける)→変更を保存

f:id:naru443:20210319022534p:plain

こんな風に表示されます。

f:id:naru443:20210319024346p:plain

スマホ版(Proのみ)にも適用する場合は、先程のCSSコードを

<style type="text/css">(CSSコード)<style> で囲んだコードを作ります。

 

コードを作成したら、管理画面→デザイン→スマートフォン(スマホマーク)→ヘッダ→タイトル下→(コードを貼り付ける)→変更を保存

f:id:naru443:20210319023254p:plain

 

スクロールさせるには?

表が画面からはみ出る場合に、スクロール表示させる方法です。

スマホはデフォルトでスクロール表示されるので、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> で挟み込みます。

f:id:naru443:20210319024813p:plain

プレビューでこんな風に表示されるようになりました。

f:id:naru443:20210319025006p:plain