【JINカスタマイズ】サイドバーのスクロール追従目次をキレイに表示する方法

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

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

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

でもコレ、デフォルトでは見た目があまり好きではありません……。

サイドバー追尾目次のデフォルト画像
  • フォントサイズが大きい
  • h2とh3の見出しの区別がなく見づらい

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

 

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

ということで今回は下のように見た目をカスタマイズする方法をご紹介します。

サイドバー追尾目次カスタマイズ後の画面
目次

【JINカスタマイズ】サイドバーのスクロール追従目次をキレイに表示する方法

手順は次の通り。

  1. WordPressプラグイン「TOC+」のインストール
  2. 「TOC+」ウィジェットの追加
  3. CSSを追加(コードをコピペ)

それでは1つずつ解説していきます!

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

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

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

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

「TOC+」ウィジェットをサイドバー追尾に追加する画面

3. 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: 0px 0px 0px 10px;
}
.toc_widget ul {
max-height: 460px;
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にコードを入力して公開をクリック

以上で終了です。

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

サイドバー追尾目次のカスタマイズ前後の比較画像

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

【JINカスタマイズ】サイドバーのスクロール追従目次をキレイに表示する方法まとめ

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

手順は次の通り。

  1. WordPressプラグイン「TOC+」のインストール
  2. 「TOC+」ウィジェットの追加
  3. CSSコードをコピペ

今回ご紹介したスクロール追従目次(追尾ウィジェット)ですが、画像をポップアップ表示するWordPressプラグイン「Easy FancyBox」と併用すると正常に動作しない場合があるんです。

詳しくは次の記事をご覧ください!

あわせて読みたい
【JIN】画像がポップアップ表示しない!?Lightboxが動作しない原因とは
【JIN】画像がポップアップ表示しない!?Lightboxが動作しない原因とはあなたはLightbox(ライトボックス)系のプラグインの「Easy FancyBox」をご存知でしょうか?ライトボックスとは、Webページ上のサムネイル画像を拡大表示できるJavaScr...
デスクワークが多い方必見!
  • デスク環境を参考にしたい方
  • ガジェットに興味がある方
  • 作業効率を上げたい方

ガジェットブログ「ボクラボ」
https://bokulabo.com/

ぜひご覧下さい!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメント一覧 (2件)

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

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

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

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

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

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

コメントする

CAPTCHA


目次
閉じる