はてな記法で簡単に表を作る方法と、コピペで使えるデザインカスタマイズ

記事内に商品プロモーションを含む場合があります

私はいつも「はてな記法」でブログを書いています。今回は、はてな記法での表の作り方とデザインのカスタマイズ方法のご紹介です。

はてな記法で表を入力する方法
- 書き方の例
デザインを変更する
- コピペで使えるCSSコード
バーティカルバーの出し方

はてな記法で表を入力する方法

まずはじめに、はてなブログで表を載せるには以下のように何種類かの方法があります。

エクセルで作った表をコピペする。
テーブルタグ（HTML）で書き込む。
バーティカルバーを使用する。

エクセルで表を作ってから作業したり、テーブルタグ（HTML）を作るのは手間に感じる人も多いのではないでしょうか。

そんな時は「バーティカルバー（バーティカルライン）」を使用した表組み記法がおすすめです。
バーティカルバーとは　|　☚この記号のことで、これで文字を挟むだけで表を作ることが出来ます。

書き方の例

表記法の特徴

先頭に*（アスタリスク）をつけた文字が自動で見出しとして表示される。
作りたい表をそのまま文字で表すように記入するので、手順や構成がわかりやすい。

|*見出し1|あああ| 
|*見出し2|いいい|
|*見出し3|ううう|

⬆これで書くと
⬇このように記載されます。

見出し1	あああ
見出し2	いいい
見出し3	ううう

|*見出し1|*見出し2|*見出し3|
|あああ|かかか|さささ|
|いいい|ききき|ししし|

⬆これで書くと
⬇このように記載されます。

見出し1	見出し2	見出し3
あああ	かかか	さささ
いいい	ききき	ししし

デザインを変更する

デフォルトのデザインはシンプルでそのままでも十分使いやすいですが、お好みで背景色などのデザインを変えることが可能です。

コードの使用について

公開しているコードは個人利用でのコピペ、ご自身でのカスタマイズはご自由にどうぞ。
カスタマイズ方法をブログなどで紹介する場合は本記事をリンクして、引用である旨の表記をしていただきますようお願い致します。

コードの使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
【変更を保存する】を押して完了。

コピペで使えるCSSコード

/* 表全体 */
.entry-content table {
   font-size:14px; /* 文字サイズ */
   }

/* 見出しセル */
.entry-content table th {
    text-align: center; /* 文字を中央揃え */
    padding: 0.5em; /* 文字周りの余白 */
    border: 1px solid #555; /* 線の太さ・種類・色*/
    background: #FFF9F5; /* 背景の色 */
    width: auto;
    }

/* 通常セル */
.entry-content table td {
   border: 1px solid #555; /* 線の太さ・種類・色 */
   padding: 0.5em; /* 文字周りの余白 */
   width: auto;
   }