カスタマイズは自己責任で!
ワードプレステーマ

子テーマ

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

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

パソコンやったらスクロールにせえ
こんな感じに変更
Before

After


目次が長くなってもはみ出る心配がなくなりました!
使うソフトなどはこちら
必須
WordPress
Google Chrome
推奨
File zilla
sublime text
見たい場所へジャンプ
カスタマイズをする準備
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
カスタマイズのコードを追加
目次にスクロールバーをつける
1 2 3 4 5 6 7 8 |
/*-------------------------------------- 追尾型の目次をスクロールに変更 --------------------------------------*/ #fixed_sidebar .widget h4 + * { max-height: 250px;/* 縦の幅 */ overflow-y: auto; } |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
POINT
縦幅を変える際は250pxの部分を好きな値に変更指定ください。
これだけでスクロールにすることができます。
変更後

目次の縦幅が250pxになって、右側にスクロールバーが現れましたね。
スクロールバーのデザインを変更する
ちょっとデフォルトのデザインのままだと、味気ないですね。 そこで、スクロールバーのデザインを変更していきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/*-------------------------------------- スクロールのデザインを変更 --------------------------------------*/ 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;/* バーの枠 */ } |
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
変更後

幅を狭くしてスクロールバーの色を変えて、スッキリした感じになりました。
最後にタイトル部分を変更
この際ですのでタイトル部分もサクッと変更しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 |
/*-------------------------------------- スクロールのタイトルのデザインを変更 --------------------------------------*/ #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を追加してください。
変更後

ロゴ画像を文字の上に入れて見ました。文字も目次から「ポチッと飛ぶ」に変更しました。
追尾型目次のカスタマイズ手順まとめ

手順をザクッと説明
変更手順
- FTPソフトとテキストエディタを開いて準備OK。
- 追加のコードを書き込んで、保存。アップロード。
- 更新して確認。
- デザインを変更したい場合は、再度コードを追加して、保存、アップロード。