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

[wp-svg-icons icon="checkmark-circle" wrap="i"] カスタマイズは自己責任でやろう！

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

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

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

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

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

このサイトの環境

テーマ

子テーマ

プラグイン

こんな感じに変更

Before

After

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

使うソフトなどはこちら

必須

WordPress

Google Chrome

推奨

File zilla

sublime text

見たい場所へジャンプ

1 カスタマイズをする準備
2 カスタマイズのコードを追加
- 2.1 目次にスクロールバーをつける
3 スクロールバーのデザインを変更する
4 最後にタイトル部分を変更
5 追尾型目次のカスタマイズ手順まとめ

カスタマイズをする準備

追加方法	難しさ
追加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;/* 縦位置の調整 */

}

[wp-svg-icons icon=”shuffle” wrap=”i”] 変更点（18.8.14）前）#fixed_sidebar .widgettitle:before 後）#fixed_sidebar .toc_widget .widgettitle:before 追尾型目次以外にも固定ウィジェットを設置されている方は.toc_widgetを追加してください。

変更後