はてなブログ【見出し・目次の作成】と【カスタマイズ】の方法を詳しく紹介。

「見出し」「目次」の作り方アイキャッチ画像

ブログに慣れてくると、「目次」を表示させたくなってきたりします。

どうやって表示させるのかと思ったら、

目次の作り方はビックリするほど簡単でした。

作り方は簡単なので、更にカスタマイズでブログに個性を出せたら最高です。

早速やってみたいと思います。

見出しを作る
- 見出しを作る
目次を作る
「目次」とタイトルを表示させる
リストのマークを変更する
目次をカスタマイズしていく

使っているブログのデザインテーマよって、

上手く変更出来ない場合がありますので

バックアップをしておく事をお勧めします。

見出しを作る

目次に表示されるのは「見出し」です。

簡単に作れます。

見出しはユーザーにブログの内容をわかりやすく理解してもらう為でもあり、

更に、SEOを意識するなら

見出しに検索されそうなキーワードを入れるのも大事な事です。

見出しを作る

画面左上の方に表示されてる「見出し」をクリックすると、「大見出し」「中見出し」「小見出し」「標準」と出ます。

はてなブログ「見出し」ボタン画像

一番表示させたい題（見出し）は「大見出し」で

次に「中見出し」更に細かく表示させたい時は「小見出し」となります。

簡単すぎる！

でも、これだけでは「目次」は出来ません。

見出しを設定したら、次に「目次」を作ります。

これまた、凄く簡単です。

目次を作る

目次の作り方は２通りあります。

１、「目次」ボタンを押す。

２、[ ] で :contents を囲んで入力します。

１、のやり方が簡単なので、２のやりかたをする事はほぼないかと思います(;^ω^)

「目次」を表示したい所にカーソルを置いて、下の赤枠で囲んだ所をクリックするだけです。

はてなブログ「目次」ボタン画像

これだけです！

編集画面には

はてなブログ「:contents」表示画像

としか表示されないので本当に作れているのかと思いますが、

プレビュー画面にしたらちゃんと出来てます。こんな感じに⇩

小見出しがなかったですね(;'∀')

小見出しは更に段落下がります。

「目次」の作り方の２のやりかたも、表示させたいところにカーソルを合わせて入力するだけです。

「目次」が出来たけど、味気ない感じ・・・

「目次」という言葉を表示させたいし、色や枠も変更したい。。。

「目次」とタイトルを表示させる

「目次」のイメージ画像

まず、項目だけでは物足らないので上に「目次」と表示させます。

コードをコピーします。

/*目次のデザイン変更*/      
.table-of-contents {
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%;  /* 文字サイズ */
    border:dotted 1px #777;  /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */    
    color:#000;  /* 文字の色 */
}

上のコードをデザインCSSに貼り付けていきます。

１、「デザイン」をクリック。

はてなブログダッシュボード「デザイン」ボタン画像

２、「スパナマーク」➡「デザインCSS」をクリック。③にコピーしたコードを貼り付ける。

はてなブログ「デザインCSS」表示画像

３、「変更を保存する」をクリック。

「変更を保存」画面

「目次」という言葉が表示されました。

はてなブログ「目次」のカスタマイズ

コードの content: "目次";の「目次」を「記事の目次」とか違う言葉に変えても大丈夫です。

dotted（ドット）になってますが枠を変える事も出来ます。

実線 [ solid ] 、破線 [ dashed ] 、二重線 [double ]など。

1pxは太さを変えられます。

下は⇩二重線で5pxの太さに変えたものです。

はてなブログ「目次」のカスタマイズ

色を変えるにはコードの＃の後の数字の部分を変えるだけです。

上記のコードで見ると「線の種類と色」「背景」「文字の色」が変えれます。

www.colordic.org

いろんなカラーがあるので自分の好きな配色に変えて下さいね。

リストのマークを変更する

リストの・や ◦ マークを数字にしたり、部分的に変えたりする事もできます。

下のコードをCSSに貼り付けます。

/*目次のデザイン変更*/
.table-of-contents {
    margin-left: 0;
    padding: 15px 10px 15px 35px;  /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字サイズ */
    border:dotted 1px #777; /* 線の種類と色 */
    background:#f7f7f7;  /* 背景 */
}
.table-of-contents:before {
    content: "目次";
    font-size: 110%;
    font-weight:bold;   /* 文字の太さ　通常はnormal */
    color:#000;  /* 文字の色 */
}
/*大見出し*/
.table-of-contents li{
    font-weight:bold; /* 通常はnormal */
    list-style-type:decimal;   /* マークの種類 */
}
/*中見出し*/
.table-of-contents li ul li{
    margin-left:20px;
    font-weight:normal;    
    list-style-type:lower-latin;
}
/*小見出し*/
.table-of-contents li ul li ul li{
    list-style-type:disc;
}

list-style-typeの後の : と ; の間を変えてマークを変更できます。

decimal（数字）、lower-latin（小文字アルファベット）、disc（黒ボッチ）、circle（白丸）、square（黒四角）などに変えられます。

⇩は大見出しは太文字に、大見出しのマークは数字に。

中見出しのマークは小文字アルファベットにしました。

はてなブログ「目次」のカスタマイズ

次にカスタマイズしてみます。

目次をカスタマイズしていく

パピコさんのコードを参考にさせて頂きました。

www.papico405.com

いろんなパターンのカスタマイズが載ってます。

はてなブログ「目次」のカスタマイズ

⇧の様な目次を作ってみます。

下のコードをコピーしてCSSに貼り付けます。

/*目次のデザイン変更*/
.entry-content .table-of-contents {
    position:relative;
    margin-left: 0;
    padding: 15px 10px 15px 35px; /* 枠内の余白(上右下左) */
    font-size: 100%; /* 文字の大きさ */
    font-weight:bold;
    list-style-type:decimal; /*数字以外が良ければ変更 */
    background:#fff;
    border-top:40px solid #f4a460; /* 「この記事の目次」周りの色 */
    border-left:2px solid #f4a460; /* 線の太さ */
    border-right:2px solid #f4a460;
    border-bottom:2px solid #f4a460;
    line-height: 200%; /* 行間 */
    border-radius: 3px; /* 角丸にしない場合は不要 */
    color:#444; /* 数字（マーク色変更） */
}
/*「この記事の目次」の周囲変更*/
.entry-content .table-of-contents::before {
    font-family: 'blogicon';
    content: "\f039  この記事の目次";
    display: block;
    font-size: 130%;
    font-weight: bold;
    position: absolute;
    top: -40px;/*上からの位置調整*/
    left: 20px; /*左からの位置調整*/
    color: #000000 !important;
}
/*リンクの色変更と下線を消す*/
.entry-content .table-of-contents li a{
    color:#444; /* 目次リスト部分のテキスト色 */
    text-decoration:none; /* リンクの下線をつけたくない場合 */
}