体験談ホームWEB開発WordPressCocoonで目次をスクロールアニメーションにするカスタマイズ【WordPress】2019.09.24Cocoonにて、目次で特定の項目に移動する時に、スクロールアニメーションを実装する方法を解説します。デフォルトの仕様では、目次をクリックすると画面がパッと切り替わり、一瞬で項目が移動するため、ユーザーに画面の変化が伝わりにくいです。移動をスクロールアニメーションに変更し、ユーザーに直感的にページ変化を伝えられるようにします。Plus」使用時にも利用できますまずはCocoonの目次設定を有効にしてくださいまず、ページに目次を表示する設定になっていない方は、目次を表示する設定に変更してください。目次が有効になっている方はここは読み飛ばしてOKです。」にチェックを入れる下の「変更をまとめて保存」をクリックカスタマイズ方法は、Cocoonの子テーマの1つのファイルに追記するだけまとめると、Cocoonの子テーマ「cocoon-child-master」の中に、「tmp-user」というディレクトリがあります。その中の「footer-insert.php」の一番下に、下記のスクリプトを追記してください。言っている意味がよく分からない、カスタマイズ経験があまりない方は、以下の手順で行って頂ければ大丈夫です。});});</script>移動スピードを調整したい場合は、300の部分の値を変えてください。少なくしたら速く、多くしたらゆっくりとした移動になります。「footer-insert.php」への追記が終わると、スクロール移動が適用されます。このページの目次でも実際の動作が確認できます。Plus」使用時にも利用できます今回はテーマCocoonを使用した場合のカスタマイズ方法でしたが、スクリプトファイルは他のテーマでも使用できます。スクリプトファイルを追加しなくてはいけない箇所はテーマ毎に違うと思いますので、各テーマの仕様に合わせてご利用ください。Plus」プラグインを使用している場合でも同様にスクロールアニメーションを実行できますので、お試しください。以上、Cocoonで目次をスクロールアニメーションにするカスタマイズ、でした。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイトスポンサーリンクサイト内検索のちょうのプロフィールのちょうといいます。転職してWEBプログラマーになりました。趣味で任天堂のファンサイトをいくつか作っています。ポケモンとスマブラが大好き。@noticoco連絡先nochokinococo○gmail.com○を@に置き換えてください。制作講座jQuery入門jQueryの使い方を解説したページです。体験談ホーム検索トップサイドバースポンサーリンクサイト内検索のちょうのプロフィールのちょうといいます。転職してWEBプログラマーになりました。趣味で任天堂のファンサイトをいくつか作っています。ポケモンとスマブラが大好き。@noticoco連絡先nochokinococo○gmail.com○を@に置き換えてください。制作講座jQuery入門jQueryの使い方を解説したページです。UPDATE」の使い方2020.02.05PHPで診断テストプログラムの作り方【サンプルコードで解説】2020.01.302020.02.06jQueryで配列の値を検索し、判定を行う方法【サンプルコードで解説】2020.01.29PHPのmb_convert_kanaで全角⇔半角の変換を行う方法2020.01.27タイトルとURLをコピーしました。