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

目次をスクロールにするカスタマイズ

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

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

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


この記事では
サイドバーの追尾型目次をスクロールできるようにするカスタマイズを説明。
MENくん
どうしても長い記事になると、目次がなが~くなってしまいがち
くま3号
パソコンやったらスクロールにせえ

このサイトの環境

テーマ
子テーマ
プラグイン

こんな感じに変更
Before
After
目次スクロール版
   
MENくん
目次が長くなってもはみ出る心配がなくなりました!

使うソフトなどはこちら

必須

WordPressWordPress

グーグルクロームGoogle Chrome

推奨

ファイルジッラFile zilla

サブクライムテキストsublime text

カスタマイズをする準備

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

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

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

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

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

   

確認の手順

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

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

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

POINT
縦幅を変える際は250pxの部分を好きな値に変更指定ください。
MENくん
これだけでスクロールにすることができます。

変更後

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

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

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

確認の手順

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

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

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

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

変更後

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

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

この際ですのでタイトル部分もサクッと変更しましょう。
変更点(18.8.14) 前)#fixed_sidebar .widgettitle:before 後)#fixed_sidebar .toc_widget .widgettitle:before 追尾型目次以外にも固定ウィジェットを設置されている方は.toc_widgetを追加してください。

変更後

ロゴ画像を文字の上に入れて見ました。文字も目次から「ポチッと飛ぶ」に変更しました。

追尾型目次のカスタマイズ手順まとめ

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

コメントを残す

メールアドレスが公開されることはありません。