ブログスタイル

【JIN】サイドバーのスクロール追従目次をコピペで簡単カスタマイズ

こんにちは、よっしー(@yossy_y0211)です。

つい先日、WordPressテーマ「JIN」のウィジェット「サイドバー追尾【PC】」に目次を設定しました。

パソコンで閲覧している時のみ動作するもので、下にスクロールしていくと途中から一緒についてくるカワイイやつ。(スクロール追従)

でもコレ、デフォルトでは見た目があまり好きではありません……。サイドバー追尾目次のデフォルト画像

  • フォントサイズが大きい
  • h2とh3の見出しの区別がなく見づらい

 

見た目を良くしたいですよね?
記事内にある目次と同じようにしたいと思いますよね?

僕は思いました!!!(←完全に好みの問題です)

ということで今回は下のように見た目をカスタマイズする方法をご紹介します。サイドバー追尾目次カスタマイズ後の画面

 

WordPressプラグイン「Table of Contents Plus(TOC+)」の準備

カスタマイズの前に次の2点が完了していることをご確認ください。

  • WordPressプラグイン「TOC+」のインストール
  • 「TOC+」ウィジェットの追加

WordPressプラグイン「TOC+」のインストール

インストール及び設定については下のJIN公式マニュアルをご参照ください。
https://jin-theme.com/manual/mokuji/

「TOC+」ウィジェットの追加

1. WordPressダッシュボード「外観」 → 「ウィジェット」を選択
2.「TOC+」ウィジェットを「サイドバー追尾【PC】」に追加「TOC+」ウィジェットをサイドバー追尾に追加する画面

サイドバーの目次をCSS追加でキレイに表示する方法

以下の編集は必ず子テーマで行なってください。(親テーマアップデート後も変更を引き継ぐ為)

1. 下のコードをコピー

/*サイドバー追尾目次*/
.toc_widget_list li{
font-size: 14px;
font-weight: bold;
padding: 4px 0;
}
.toc_widget_list li ul a::before{
content: “・”;
}
.toc_widget ul li ul {
border: none;
padding: 2px 0px 2px 10px;
}
.toc_widget ul {
max-height: 400px;
overflow-y: auto;
}
.toc_widget_list li ul{
margin-left: 1.0em;
text-indent: -1.0em;
}
.toc_widget_list li ul li a {
font-size: 13px;
font-weight: normal;
}

2. WordPressダッシュボード「外観」 → 「CSS編集」を選択WordPressダッシュボード「外観」 の 「CSS編集」を選択

3. 空白スペースにコード貼り付け → 「公開」をクリック追加CSSにコードを入力して公開をクリック

以上で終了です。

それでは自分のブログを見てみましょう!
ちゃんと見た目は変わってますか?

記事内の目次と見た目もほぼ同じになりイイ感じに仕上がりました。
カスタマイズ前と後を比べると違いは明らかですね。サイドバー追尾目次のカスタマイズ前後の比較画像

スポンサーリンク

サイドバーの目次カスタマイズまとめ

いかがでしたでしょうか?
今回はサイドバーの目次の見た目をカスタマイズする方法をご紹介しました。

【事前準備】

  • WordPressプラグイン「TOC+」のインストール
  • 「TOC+」ウィジェットの追加

【カスタマイズ方法】

  • CSSコードをコピペ

この記事が少しでもお役に立てましたら嬉しいです。

POSTED COMMENT

  1. ちびめがね より:

    参考にさせていただきました。

    デフォルトのままの見え方がなんとかならないか悩んでいたので、大変ありがたい情報でした!

    ありがとうございました。

    • よっしー より:

      おぉ!めがねさーん!
      見て下さってありがとうございます!

      デフォルトではどうも見た目が・・・ですね。

      お役に立てて嬉しいです!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA