こんにちは。そらと申します。記事スクロールすると目次も追従するパターン…

Cocoon解決済み
そらさん
そら

こんにちは。そらと申します。

記事スクロールすると目次も追従するパターンでサイトを作っている方もしくは、目次をカスタムしている方に質問です。

スクロールで、H2、H3などのタイトルにと到達すると
追従する目次の色が変わります。

これを作りたいのですが、調べてもわからず。

やり方をご存知の方、もしくは既にブログ記事に執筆したことある方がいればご教示いただけますと幸いです。

参考記事
https://meril.co.jp/affi-note/prep-method-how-to-write

みんなのコメント 17件

ベストアンサー

ユーザー660さん
ユーザー660さん

そらさん

ブログ拝見させていただいて、すでに目次の生成とサイドバーウィジェットの目次配置 & 追従は確認させていただきました。

あとは目次に到達した時点でハイライトするデザインをご希望ということでよろしいですね?

以下の記事が参考になります。ただし style.css への追記と javascript.js への追記が必要です。
https://small-is-beautiful.net/scrolled-sidebar-toc-coloring/

そこまで手の込んだ内容ではないのでほぼコピペで OK ではありますが。

そらさん
そらさん質問者

ご丁寧にありがとうございます。

»目次に到達した時点でハイライトするデザインをご希望ということでよろしいですね?
はい!ご認識の通りでございます。
参考記事ありがとうございます。

確認しまして style.css への追記と javascript.js へのコピペしてみたのですが、
目次のハイライトデザインは変わらずでした。

簡単なことができず、大変恐縮ですが、
アドバイス頂くことは可能でしょうか。

記事例
https://sora-iro-blog.com/web-marketing-school

ユーザー660さん
ユーザー660さん

そらさん

コピペと申しましが、そらさんのブログの目次の class 名にカスタマイズする必要がありますね。
よく確認せず、大変失礼いたしました。

こちらの記事を参考にして、コードのコピペをやり直していただけますでしょうか?
先ほどの追記分に上書きで OK です。
https://info-biz.club/wordpress/cocoon/fllowing-index.html

それでまずは土台が出来上がるかと思います。

完了しましたら改めてお知らせください。

そらさん
そらさん質問者

とんでもございません。
ご丁寧なアドバイスとても感謝しております。

>こちらの記事を参考にして、コードのコピペをやり直していただけますでしょうか?
>先ほどの追記分に上書きで OK です。
>https://info-biz.club/wordpress/cocoon/fllowing-index.html
>それでまずは土台が出来上がるかと思います。
>完了しましたら改めてお知らせください。

記事を参考にコードをコピペさせていただきました。
まだ、ハイライトつかないのですが、次の工程がありますでしょうか。
何度もすみません。

引き続き、よろしくお願いします。

ユーザー660さん
ユーザー660さん

恐らく目次の class 名が合っていないためと予想されます。

色々調べてみますが、、、Kiryu さん、コレわかりますか?

そらさん
そらさん質問者

お忙しい中、ありがとうございます。
お手数をおかけします。

ユーザー694さん
ユーザー694さん

召喚ありがとうございます😎

(私も 08:53 に書き込みしたんですがモデレーション待ちなんですよね…🙄 )

今そらさんのブログ記事をいくつか拝見しましたが、Cocoonのjavascript.jsが読み込まれていないように思います。プラグインを停止してみてはいかがでしょうか。

ユーザー660さん
ユーザー660さん

Kiryu さん、ありがとうございます!
多いですね、CSS や JavaScript が圧縮されていて読み込まれていないこと。

そらさん、CSS や JavaScript を圧縮して最適化するプラグインやテーマ設定が邪魔している可能性があるので、その辺を見直す必要ありそうです。

そらさん
そらさん質問者

@Kiryuさん
(cc:@j_jetstream)

お世話になります。
ご確認いただき誠にありがとうございます。
>Cocoonのjavascript.jsが読み込まれていないように思います。プラグインを停止してみてはいかがでしょうか。
セキュリティ系以外のプラグインを全て止めてみました。
結果、目次にハイライト出ず変化なしでした。。上手くいかず、すみません。

ユーザー694さん
ユーザー694さん

すみません、javascript.jsが読み込まれていない云々は撤回します。
読み込まれているようです。
プラグインをもとにもどしていただいて結構です。
もっとよく調べますね。

そらさん
そらさん質問者

@Kiryuさん
(cc:@j_jetstream)

とんでもございません。
お忙しい中、ありがとうございます。

かしこまりました。
一旦プラグイン戻しました。

何卒よろしくお願いいたします。

ユーザー694さん
ユーザー694さん

JSとCSSの

#toc-2

っていうところが1か所ずつあるので、そこを

#toc-5

に変えたらうまくいくんじゃないかな・・・

質問者からのお礼コメント

そらさん
そらさん質問者

この度、本当にありがとうございます。
大変助かりました。

そらさん
そらさん質問者

Kiryuさん @j_jetstreamさん

お世話になります。そらです。

ありがとうございます!!!
無事にハイライトが付くようになりました!

この度、本当にありがとうございます。
大変助かりました。

いい感じになり非常に嬉しいです。

あなたの経験や知識を共有しませんか?

ほかのユーザーの相談に、コメントで参加してみましょう。

ログインしてコメントするはじめての方は無料登録