最近、はてなブログの目次部分を装飾しました。
CSSのみで装飾してるのでコピペで使えます。そのやり方をカンタンにメモっておきます。（ご自由にお使いくださいませ〜）
はてなブログで目次を出す方法
まずは目次の出し方。これはカンタンで
[:contents]
と入力するだけでOK。大見出し、小見出しなど、見出し部分を内部リンクとして出力してくれます。
今回の記事のもくじの場合
こんな風に出ます。味気ないし、毎回自分で【目次】などを入れる必要があるから面倒ですよね。
はてなブログで出力される目次部分を、CSSのみでデザイン・装飾する方法（コピペのみ）
それではこの味気ない目次をCSSのみで装飾してみます。
画像を使わないのでコピペするだけで終わります。自由に使ってください。
まず、装飾するclassは
ul.table-of-contents（目次を囲んでるulタグ）
これです。ここに2種類のCSSをかければ終わり。
目次エリア全体の背景色と余白を調整
ul.table-of-contents {
background: #D0F2FF; /* 背景色の指定 */
padding: 10px 10px 10px 25px;
}
【もくじ】の部分をCSSで出力
ul.table-of-contents:before {
content: "もくじ"; /* 目次リストの直前に表示する文字列 */
font-size: 1.4rem;
display: block;
background: #254E5F; /* 見出し部分の背景色を指定 */
margin-left: -17px; /* リスト部分の・を調整 */
padding: 5px;
margin-bottom: 15px;
color: #fff; /* 文字色を指定 */
}
以上です。
このCSSを【デザイン ＞ カスタマイズ ＞ デザインCSS】の部分にコピペすればOKです。
余白の具合やマージンなどはテンプレートによるので各自調整してみてください。それと、色合いも好きに調整してください。
このCSSなら見出し部分をCSSで出せるのでとてもらくちんです。
【裏ワザ？】スマホ用テンプレートを使っている場合は別途読み込みが必要
ちなみに、レスポンシブデザインではない場合、スマホ用テンプレートにもCSSを入れないと反映されません。ヘッダーなどに直接入力するか、CSSをリンクさせる必要があります。
有料版じゃないと編集できない部分のようです。
が、裏ワザというかなんというか、無料版スマホテンプレートでも構文エラーとか無視するなら出来る方法があります。（ウェブ屋として書くべきじゃないかもしれませんが。笑）
【デザイン ＞ スマホのカスタマイズ ＞ 記事下】
のところに読みこめば一応動きます。（重くなる可能性ありますが、以下に軽く解説）
※詳細設定の【レスポンシブデザイン】は無効にする必要があります
直接記述する場合
<style type="text/css"> /*ここにCSSコード記述*/ </style>
どこか外部サーバーに外部CSSを用意する場合
<link rel="stylesheet" type="text/css" href="＊＊＊.css">
これを記事下のエリアにぶち込んでみてください。動くはず。何回もいいますが、この方法は構文的には良くないし、動作ももっさりするかも。SEO的な評価も下がるかもしれません。なので自己責任で使ってください。
