こんにちは。そらと申します。
記事スクロールすると目次も追従するパターンでサイトを作っている方もしくは、目次をカスタムしている方に質問です。
スクロールで、H2、H3などのタイトルにと到達すると
追従する目次の色が変わります。
これを作りたいのですが、調べてもわからず。
やり方をご存知の方、もしくは既にブログ記事に執筆したことある方がいればご教示いただけますと幸いです。
こんにちは。そらと申します。
記事スクロールすると目次も追従するパターンでサイトを作っている方もしくは、目次をカスタムしている方に質問です。
スクロールで、H2、H3などのタイトルにと到達すると
追従する目次の色が変わります。
これを作りたいのですが、調べてもわからず。
やり方をご存知の方、もしくは既にブログ記事に執筆したことある方がいればご教示いただけますと幸いです。
みんなのコメント 17件
ベストアンサー
そらさん
ブログ拝見させていただいて、すでに目次の生成とサイドバーウィジェットの目次配置 & 追従は確認させていただきました。
あとは目次に到達した時点でハイライトするデザインをご希望ということでよろしいですね?
以下の記事が参考になります。ただし 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
そらさん
コピペと申しましが、そらさんのブログの目次の class 名にカスタマイズする必要がありますね。
よく確認せず、大変失礼いたしました。
こちらの記事を参考にして、コードのコピペをやり直していただけますでしょうか?
先ほどの追記分に上書きで OK です。
https://info-biz.club/wordpress/cocoon/fllowing-index.html
それでまずは土台が出来上がるかと思います。
完了しましたら改めてお知らせください。
とんでもございません。
ご丁寧なアドバイスとても感謝しております。
>こちらの記事を参考にして、コードのコピペをやり直していただけますでしょうか?
>先ほどの追記分に上書きで OK です。
>https://info-biz.club/wordpress/cocoon/fllowing-index.html
>それでまずは土台が出来上がるかと思います。
>完了しましたら改めてお知らせください。
記事を参考にコードをコピペさせていただきました。
まだ、ハイライトつかないのですが、次の工程がありますでしょうか。
何度もすみません。
引き続き、よろしくお願いします。
恐らく目次の class 名が合っていないためと予想されます。
色々調べてみますが、、、Kiryu さん、コレわかりますか?
お忙しい中、ありがとうございます。
お手数をおかけします。
召喚ありがとうございます😎
(私も 08:53 に書き込みしたんですがモデレーション待ちなんですよね…🙄 )
今そらさんのブログ記事をいくつか拝見しましたが、Cocoonのjavascript.jsが読み込まれていないように思います。プラグインを停止してみてはいかがでしょうか。
Kiryu さん、ありがとうございます!
多いですね、CSS や JavaScript が圧縮されていて読み込まれていないこと。
そらさん、CSS や JavaScript を圧縮して最適化するプラグインやテーマ設定が邪魔している可能性があるので、その辺を見直す必要ありそうです。
@Kiryuさん
(cc:@j_jetstream)
お世話になります。
ご確認いただき誠にありがとうございます。
>Cocoonのjavascript.jsが読み込まれていないように思います。プラグインを停止してみてはいかがでしょうか。
セキュリティ系以外のプラグインを全て止めてみました。
結果、目次にハイライト出ず変化なしでした。。上手くいかず、すみません。
すみません、javascript.jsが読み込まれていない云々は撤回します。
読み込まれているようです。
プラグインをもとにもどしていただいて結構です。
もっとよく調べますね。
@Kiryuさん
(cc:@j_jetstream)
とんでもございません。
お忙しい中、ありがとうございます。
かしこまりました。
一旦プラグイン戻しました。
何卒よろしくお願いいたします。
JSとCSSの
#toc-2
っていうところが1か所ずつあるので、そこを
#toc-5
に変えたらうまくいくんじゃないかな・・・
いや、違いますね。勘違い・・・ゴメンナサイ
いや、やっぱり合っていると思うのでやってみてください。
Kiryu さん
あー!なるほど、勉強になりますm(_ _)m
質問者からのお礼コメント
この度、本当にありがとうございます。
大変助かりました。
以下2つ試してみましたがどっちもできましたよ🤗
【Cocoon】サイドバーの目次に現在位置を表示する【コピペOK】
https://hakobublog.com/show-current-position
Cocoon記事のスクロールに連動して見出しがマークされる目次
https://info-biz.club/wordpress/cocoon/fllowing-index.html
Kiryuさん @j_jetstreamさん
お世話になります。そらです。
ありがとうございます!!!
無事にハイライトが付くようになりました!
この度、本当にありがとうございます。
大変助かりました。
いい感じになり非常に嬉しいです。
あなたの経験や知識を共有しませんか?
ほかのユーザーの相談に、コメントで参加してみましょう。
ログインしてコメントするはじめての方は無料登録