箇条書きに続いてMarkdown記法での表の作成方法を先日ようやく覚えた。こちらも忘れずにメモメモ。
※あくまでもはてなブログ上の話です。
Markdown記法での表の作成方法
基本は下のようにパイプ記号「|」で区切って中に文字を入れる。2行目に-を入れると1行目が項目名（ヘッダ）になる。
|見出し１|見出し２|見出し3| |---|---|---| |aaa|bbb|ccc| |ddd|eee|fff|
出力イメージ
ちなみに各行の左右端の | は省略可能。
列ごとに右寄せなどの指定をしたい場合は2行目の-の横に:を入れる。両端に入れると中央寄せ、右端に入れると右寄せになる。
|中央寄せ|左寄せ|右寄せ| |:---:|---|---:| |aaa|bbb|ccc| |ddd|eee|fff|
出力イメージ
複雑な表を作りたい場合
例えば上の表みたいに一部だけセルを結合した表を作成したい場合、Markdown記法では残念ながら作成できないのでHTMLで記述する必要がある。
HTMLでの表の書き方を載せたサイトを見ながら手打ちしてもいいが、Excelがある人はそこで表を作成して、以下のサイトにExcel上で作成した表を貼り付けてHTMLコードを出力するのが一番早い。
ExcelがなくてもExcel OnlineやGoogleスプレッドシートで代用可能（一部機能は制限されるが）。
ちなみにMarkdown記法ではHTMLの記述も併用できるので記事の記法を変える必要はない。
表のデザインをカスタマイズしたい
使用するテンプレートにもよると思うが、基本デフォルト状態での表のデザインはシンプルなのでともかく地味。
これはテンプレートでinnocentを使用したときのデフォルトの表。項目（ヘッダ）の背景ぐらいは強調してやってほしいが…。
1行目のセルに色を付けたり、セル内の文字を太字にしたり、スクロールをつけたい場合はデザインCSSに記述する必要がある（セルの色付けに関しては上で紹介したHTMLに変換する方法でも可）。
カスタマイズする際に参考になりそうなサイトはこちら。
ブログ主はこのサイトで紹介されているコードをデザイン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に貼り付ける。
/* スクロール */
#table-scroll01 {
box-sizing: border-box; /* スクロール用の箱*/
overflow-x: scroll; /* 横スクロール */
-webkit-overflow-scrolling: touch;
border-right:3px solid #E0E0E0; /* 右端の線の太さ・種類・色コード */
}
記事内にHTMLで以下のように記述する。
<div id="table-scroll01"> /* ここに表のHTMLコードを書く */ </div>
WordPressと違ってはてなブログの表の作成はなかなかに面倒。Wordpressだと標準機能で簡単に作れるんだけどね…デザインにこだわり始めると行きつく先は一緒ですが。
コメント