【超カンタン】はてなブログの目次をCSSデザインする方法

スポンサーリンク

f:id:odbc:20160201100731j:plain
最近、はてなブログの目次部分を装飾しました。
CSSのみで装飾してるのでコピペで使えます。そのやり方をカンタンにメモっておきます。(ご自由にお使いくださいませ〜)



はてなブログで目次を出す方法

まずは目次の出し方。これはカンタンで

[:contents]

と入力するだけでOK。大見出し、小見出しなど、見出し部分を内部リンクとして出力してくれます。

今回の記事のもくじの場合
f:id:odbc:20160201101138p:plain

こんな風に出ます。味気ないし、毎回自分で【目次】などを入れる必要があるから面倒ですよね。


はてなブログで出力される目次部分を、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をリンクさせる必要があります。


有料版じゃないと編集できない部分のようです。
www.junpeihazama.com


が、裏ワザというかなんというか、無料版スマホテンプレートでも構文エラーとか無視するなら出来る方法があります。(ウェブ屋として書くべきじゃないかもしれませんが。笑)

【デザイン > スマホのカスタマイズ > 記事下】

のところに読みこめば一応動きます。(重くなる可能性ありますが、以下に軽く解説)
※詳細設定の【レスポンシブデザイン】は無効にする必要があります

直接記述する場合

<style type="text/css">

/*ここにCSSコード記述*/

</style>


どこか外部サーバーに外部CSSを用意する場合

<link rel="stylesheet" type="text/css" href="***.css">



これを記事下のエリアにぶち込んでみてください。動くはず。何回もいいますが、この方法は構文的には良くないし、動作ももっさりするかも。SEO的な評価も下がるかもしれません。なので自己責任で使ってください。