目次を「ボタン風」にすると楽しい！【はてなブログ・カスタマイズ】

f:id:aisyuudog:20180213154223p:plain

はてなブログを初めて「１ヶ月」

今回は、目次を「ボタン風」にカスタマイズしてみた。

皆で、目次を「へこへこ」させよう！

(※2/15：不具合が発生していたので、内容を書き換えました。)

使用例！
使い方
フッター部分
デザインCSS
「ボタン部分CSS」
「目次の表示部分CSS」
「上記２つを合わせたもの」
完成図
※補足
終わり

▶「フッター部分」に飛ぶ。
▶「デザインCSS」に飛ぶ。

使用例！

f:id:aisyuudog:20180211232734g:plain

特徴は、ボタン風に凹む。

開閉時で名前が「目次を開く」「目次を閉じる」に切り替わる事。

※注意点「ボタン上端」だけ、何故か反応しません。

使い方

以下の「コード」を

・【フッター】　・【デザインCSS】

に、それぞれに貼り付けて下さい。

フッター部分

▶「デザインCSS」に飛ぶ。

【貼り付けコード】

・「jquery」のスクリプト呼び出しは、他の部分で入っていたら書き込まなくても大丈夫。
(※2/15：不具合が発生していたので、内容を書き換えました。)

コードを開く

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

※「コピペ元」は以下のサイトです。

これに、「HTML初心者」でも出来る程度の修正を加えています。

www.yukihy.com

デザインCSS

▶「ボタン部分」のCSSに飛ぶ。

▶「目次の表示部分」のCSSに飛ぶ。　

▶「２つ合わせた」CSSに飛ぶ。

「ボタン部分CSS」

▶「デザインCSS一覧」に戻る。

【貼り付けコード】

(※2.15追記：背景色が変わらない問題がみつかりました。)
私のCSSでは「text-decoration: none;」の位置を下げれば解決しました。
しかし、他のCSSを使うと位置に関係なく問題なく作動しました。
面倒なので、1つにまとめ、内容も修正しました。

コードを開く

 /*============================================
     折りたたみの目次　ボタン部分のカスタマイズ
================================================*/
/*折りたたみの目次　目次を見る　記事挿入　カスタマイズ*/
.table-of-contents{
    display: none;/*元の目次を消す*/
}

/*ボタンの見た目について*/
.show-area{
    display: inline-block;  /*なくても動く、一応残してある*/
    cursor: pointer;  /*触れた時の、カーソル変化*/
    padding: 0.5em 1em;
    margin-bottom: 1em; /*ボタンと目次との余白*/
    text-decoration: none;/*アンダーラインを消す、多分要らない*/
    background: #f7f7f7;  /*背景色*/
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-size: 120%;  /*ボタン内の文字サイズ*/
    font-weight: bold; /*文字を太くする*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*水平右・垂直下・ぼかし距離・広がり距離・red・green・blue・透明*/
}
.show-area:active{  /*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}

・「show-area」が、文字の見た目。

・「show-area:active」が、ボタンを押した時の凹み具合。

「ボタンの見た目」の種類は、下のサイトから選びました。

saruwakakun.com

「目次の表示部分CSS」

▶「デザインCSS一覧」に戻る。

【貼り付けコード】

コードを開く

/*=======================================
       目次の見た目カスタマイズ
========================================*/
/*既存のデザイン初期化*/
.entry-content .table-of-contents {
   background: none;
   border: none;
   border-radius: 0;
}

/*目次から　小見出し　を消すCSS */
.table-of-contents ul ul{
    display: none;
}

/* 最上部に「もくじ」を追加 */
.table-of-contents:before{
   content: "【もくじ】";
   font-size: 100%;
   font-weight: bold; /* 文字の太さ */
}

/*目次横に、番号をつける*/
.table-of-contents li,
.table-of-contents ul{
   list-style-type: decimal;/*見出し左の記号*/
}

/*目次の形・文字の位置・文字の大きさ*/
.entry-content .table-of-contents {
   font-size: 90%;
   font-weight: bold;
   background: #f8f8f8 ; /* 目次の背景色 */
   padding: 10px 10px 10px 50px;  /*上・右・下・左*/
   margin: 0;
   margin-bottom:1em;/*見出し下の文字との余白*/
   border-radius:5px; /* 目次の枠の角の丸さを調節 */
   box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}

/*文字のリンク色変更*/
.table-of-contents a:link{
   color:#4169e1; /*リンク色はここを変更*/
   text-decoration: none;
}
.table-of-contents a:visited{
   color: #8c6a6a; /*訪問済みリンク色はここを変更*/
}
.table-of-contents a:hover{
   color: #d2b48c;
   text-decoration:underline; /*下線をつける*/
}

・「Brooklyn」テーマの場合、外枠が変わらなかったので「デザイン初期化」。

・「小見出し」を消しているので、必要な場合は切り取ってください。

・無駄に長いので「リンク色」については、消しても良いかもしれないですね。

参考サイトはこちら↓
mshitech.hatenablog.com

www.yukihy.com

「上記２つを合わせたもの」

▶「デザインCSS一覧」に戻る。

【貼り付けコード】

・無駄も多いと思うので、個人で整理して下さい。
(※2/15：不具合が発生していたので、内容を書き換えました。)

コードを開く

/*============================================
     折りたたみの目次　ボタン部分のカスタマイズ
================================================*/
/*折りたたみの目次　目次を見る　記事挿入　カスタマイズ*/
.table-of-contents{
    display: none;/*元の目次を消す*/
}

/*ボタンの見た目について*/
.show-area{
    display: inline-block;  /*なくても動く、一応残してある*/
    cursor: pointer;  /*触れた時の、カーソル変化*/
    padding: 0.5em 1em;
    margin-bottom: 1em; /*ボタンと目次との余白*/
    text-decoration: none;/*アンダーラインを消す、多分要らない*/
    background: #f7f7f7;  /*背景色*/
    border-left: solid 6px #ff7c5c;/*左線*/
    color: #ff7c5c;/*文字色*/
    font-size: 120%;  /*ボタン内の文字サイズ*/
    font-weight: bold; /*文字を太くする*/
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*水平右・垂直下・ぼかし距離・広がり距離・red・green・blue・透明*/
}
.show-area:active{  /*ボタンを押したとき*/
    -ms-transform: translateY(4px);
    -webkit-transform: translateY(4px);
    transform: translateY(4px);/*下に動く*/
    border-bottom: none;/*線を消す*/
}
    
/*=======================================
       目次の見た目カスタマイズ
========================================*/
/*既存のデザイン初期化*/
.entry-content .table-of-contents {
   background: none;
   border: none;
   border-radius: 0;
}

/*目次から　小見出し　を消すCSS */
.table-of-contents ul ul{
    display: none;
}

/* 目次に「もくじ」を追加 */
.table-of-contents:before{
   content: "【もくじ】";
   font-size: 100%;
   font-weight: bold; /* 文字の太さ */
}

/*目次横に、番号をつける*/
.table-of-contents li,
.table-of-contents ul{
   list-style-type: decimal;/*見出し左の記号*/
}

/*目次の形・文字の位置・文字の大きさ*/
.entry-content .table-of-contents {
   font-size: 90%;
   font-weight: bold;
   background: #f8f8f8 ; /* 目次の背景色 */
   padding: 10px 10px 10px 50px;  /*上・右・下・左*/
   margin: 0;
   margin-bottom:1em;/*見出し下の文字との余白*/
   border-radius:5px; /* 目次の枠の角の丸さを調節 */
   box-shadow: 0 3px 15px rgba(0,0,0,0.2);
}

/*文字のリンク色変更*/
.table-of-contents a:link{
   color:#4169e1; /*リンク色はここを変更*/
   text-decoration: none;
}
.table-of-contents a:visited{
   color: #8c6a6a; /*訪問済みリンク色はここを変更*/
}
.table-of-contents a:hover{
   color: #d2b48c;
   text-decoration:underline; /*下線をつける*/
}