はてなブログ目次デザイン／シンプル／表示・非表示／下線／黒丸非表示

目次のカスタマイズについてです。

今回は以下の内容について目次をカスタマイズしました。

目次カスタマイズ内容

• 目次を表示・非表示する
• リストの黒丸を非表示にする
• 小見出しを非表示にする
• 大見出しと中見出しに下線を引く
• 目次の背景や文字色を設定

基本的にはこちらの記事の「目次をボタン風に変更する」と同じです。

www.crypto-ksw.com

目次のデザインはこんな感じ

目次表示前

目次表示後

このカスタマイズ例ではシンプルに灰色を設定しています。

CSSにはどこで文字色を変えるかなど注釈を入れているので、違う色にしたい場合は参考にしてみてください。

jQueryとCSSを設定する

目次を表示したり非表示にしたりするには、jQueryとCSSの設定が必要です。

といっても、コピペでぱぱっと終わるのでとても簡単です。

jQueryを設定する

まずはjQueryの設定方法です。

①ダッシュボードの「デザイン」をクリック

ダッシュボードの左側に表示されているメニューの「デザイン」をクリックします。

②「カスタマイズ」⇒「フッタ」をクリック

「デザイン」の画面が表示されたら、「カスタマイズ（スパナのマーク）」をクリックします。

続いて「フッタ」をクリックします。

「フッタ」を開くとHTMLを記述できる欄があるので、この四角い枠の中にjQueryを記述していきます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
//クリックすると表示される目次
$(function(){
    var $Contents = $(".table-of-contents")
    $($Contents).before('<p class="show-area">目次を表示</p>');
    $(".show-area").click(function(){
        var $this = $(this);
        if($Contents.css('display') == 'none'){
            $Contents.slideDown(400),
            $this.text("目次を隠す");
        }else{
            $Contents.slideUp(400),
            $this.text("目次を表示")
        };
    });
});
</script>

※１行目はjQueryの読み込みなので、すでに何かしらのカスタマイズで同じものが記述されている場合は必要ありません。 よくわからない場合はそのままでも大丈夫です。

CSSを設定する 

続いてCSSの設定方法です。

①ダッシュボードの「デザイン」をクリック

ダッシュボードの左側に表示されているメニューの「デザイン」をクリックします。

②「カスタマイズ」⇒「｛｝デザインCSS」をクリック

「デザイン」の画面が表示されたら、「カスタマイズ（スパナのマーク）」をクリックします。

続いて「｛｝デザインCSS」をクリックします。

 

この「｛｝デザインCSS」の四角い枠の中にCSSを記述します。

コードを表示する

/* 目次設定 */
.entry-content .table-of-contents {
    position: relative;
    color:#555;/* 文字色 */
    background: #fafafa;/* 背景色 */
    border: 1px solid #ddd;/* 線の色 */
    padding: 10px 20px 30px 20px;/* 目次内の余白 */
    width: 90%!important;
    margin: 0 auto ;
    box-sizing: border-box;
    border-radius: 5px;/* 目次の角を丸く */
}

.entry-content .table-of-contents::before{
    display: none;
}

.entry-content .table-of-contents li {
    list-style: none;/* リストの黒丸を非表示 */
}

.entry-content .table-of-contents>li>a {
    display: block;
    text-decoration: none;
    margin-top: 20px;
    font-weight: bold;
    font-size:120%;/* 大見出しの文字サイズ */
    color:#555;/* 大見出しの文字色 */
    border-bottom: 2px solid #999999;/* 大見出しの下線 */
}

.entry-content .table-of-contents ul a {
    display: block;
    text-decoration: none;
    color: #666;/* 中見出しの文字色 */
    border-bottom: 1px dotted #ccc;/* 中見出しの下線 */
}

.table-of-contents ul ul{
    display: none;/* 小見出しを非表示 */
}

.table-of-contents{
    display: none;
}

/* 目次のボタンデザイン */
.show-area{
    position: relative;
    display: inline-block;  
    font-weight: bold;
    padding: 0.25em 0.5em;/
    text-decoration: none;
    color: #00BCD4;/* 文字色 */
    border: 1px solid #ddd;/* 線 */
    background:#fafafa;/* 背景色 */
    border-radius: 5px;/* ボタンの角を丸く */
}

以上です！

今回はシンプルなデザインにしてみました。

記事の文章量が多いなど目次がボリューミーになることが多い場合は、下線が入っていると見やすいのでおすすめです。

この記事はこちらを参考にさせていただきました。

www.yukihy.com

合わせてどうぞ

• 枠線を手書きでぐるぐる書いたようなボックスデザイン／CSSでブログカスタマイズ
• マスキングテープ風の見出しデザイン／CSSでブログカスタマイズ
• はてなブログで「あわせてどうぞ」の様なボックスやリストを使う方法
• はてなブログのブログテーマ「Minimalism」のカスタマイズまとめ