【SANGOを自分でカスタマイズ】PCの追尾型目次をカスタマイズしてみた

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方、初めてカスタマイズする方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

この記事では
サイドバーの追尾型目次をスクロールできるようにするカスタマイズを説明。

どうしても長い記事になると、目次がなが～くなってしまいがち

パソコンやったらスクロールにせえ

このサイトの環境

テーマ

子テーマ

プラグイン

こんな感じに変更

Before

After

目次が長くなってもはみ出る心配がなくなりました！

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

ジャンプマップ

カスタマイズをする準備

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

夏だし髪を斬りに行こう！

夏だしどっか行こう！

カスタマイズのコードを追加

目次にスクロールバーをつける

CSSコード（コメントあり）

/*--------------------------------------
  追尾型の目次をスクロールに変更
--------------------------------------*/
#fixed_sidebar .widget h4 + * {
max-height: 250px;/* 縦の幅 */
overflow-y: auto;
}

/*--------------------------------------

追尾型の目次をスクロールに変更

--------------------------------------*/

#fixed_sidebar .widget h4 + * {

max-height: 250px;/* 縦の幅 */

overflow-y: auto;

}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

POINT

縦幅を変える際は250pxの部分を好きな値に変更指定ください。

これだけでスクロールにすることができます。

変更後

目次の縦幅が250pxになって、右側にスクロールバーが現れましたね。

スクロールバーのデザインを変更する

ちょっとデフォルトのデザインのままだと、味気ないですね。そこで、スクロールバーのデザインを変更していきます。

CSSコード（コメントあり）

/*--------------------------------------
スクロールのデザインを変更
--------------------------------------*/
ul::-webkit-scrollbar{
  width: 10px;/* 横幅 */
}
ul::-webkit-scrollbar-track{
  background: #fff;/* トラックの背景 */
  border-radius: 0px;/* トラックの丸み */
  box-shadow: inset 0 0 1px #999; /* トラックの枠 */
}
ul::-webkit-scrollbar-thumb{
  background:#FDEE7490;/* バーの色 */
  border-radius: 0px;/* バーの丸み */
  box-shadow: none;/* バーの枠 */
}

/*--------------------------------------

スクロールのデザインを変更

--------------------------------------*/

ul::-webkit-scrollbar{

width: 10px;/* 横幅 */

}

ul::-webkit-scrollbar-track{

background: #fff;/* トラックの背景 */

border-radius: 0px;/* トラックの丸み */

box-shadow: inset 0 0 1px #999; /* トラックの枠 */

}

ul::-webkit-scrollbar-thumb{

background:#FDEE7490;/* バーの色 */

border-radius: 0px;/* バーの丸み */

box-shadow: none;/* バーの枠 */

}

確認の手順

カスタマイズコードを保存
カスタマイズしたページを開く
cntrl+F5を押す

いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。

カスタマイズはキャッシュ削除をマスターしてからです

バーの色や丸みはお好みで変更してください。

変更後

幅を狭くしてスクロールバーの色を変えて、スッキリした感じになりました。

最後にタイトル部分を変更

この際ですのでタイトル部分もサクッと変更しましょう。

CSSコード（コメントあり）

/*--------------------------------------
スクロールのタイトルのデザインを変更
--------------------------------------*/
#fixed_sidebar .widgettitle{
    text-align: center;/* 中央揃え */
}
#fixed_sidebar .toc_widget .widgettitle:before {
    display: block;
    content: url(★画像URL★);
    margin-bottom: -5px;/* 縦位置の調整 */
}

/*--------------------------------------

スクロールのタイトルのデザインを変更

--------------------------------------*/

#fixed_sidebar .widgettitle{

text-align: center;/* 中央揃え */

}

#fixed_sidebar .toc_widget .widgettitle:before {

display: block;

content: url(★画像URL★);

margin-bottom: -5px;/* 縦位置の調整 */

}

変更点（18.8.14）前）#fixed_sidebar .widgettitle:before 後）#fixed_sidebar .toc_widget .widgettitle:before 追尾型目次以外にも固定ウィジェットを設置されている方は.toc_widgetを追加してください。

変更後