WordPress 無料テーマ『Cocoon』の目次をクリックした際に、「スルスル~」っと滑らかにスクロールしながら見出しまで移動するカスタマイズ方法をご紹介します。
いわゆる『スムーススクロール』と言われています。
Cocoon の『ページトップに戻るボタン』にはこのスムーススクロールが実装されていますが、目次はされていません。なので目次をクリックすると、ジャンプするかのように「パッ」と見出しが表示します。
これだと、どのくらい移動しているのか一見するとわからないですし、味気ない感じもします。個人的にはユーザビリティーアップになると思います。
なお、今回のカスタマイズは目次だけではなく、ページ内のリンクすべてにスクロールアニメーションが適用されます。
お気に入りのカスタマイズなので当サイトでも適用中です!
思うように設定できない場合やご要望などもありましたら、お気軽にコメントください。
Cocoon の目次にスムーススクロールを実装するカスタマイズ後のイメージ動画
Cocoon の目次にスムーススクロールを実装するカスタマイズの流れ
- WordPress 管理画面にアクセスする
- 【外観】⇒【テーマエディター】をクリックする
- 【javascript.js】をクリックする
- カスタマイズ用コードをコピーする
- コードを javascript.js に貼り付ける
- 【ファイルを更新】をクリックする
WordPress 初心者の方や Cocoon のカスタマイズに慣れていない方は、下の【手順を詳しく見る(図解)】をクリックしてください。それぞれの手順を画像付きで解説しています。
- STEP 1WordPress 管理画面にアクセスする
『https://ドメイン名/admin』にアクセスすると、すでにログイン済みの方は【ダッシュボード】が表示されます。
ログインしていない場合は、ログインページが表示されるので、ユーザー情報を入力後、ログインしてください。
- STEP 2【外観】⇒【テーマエディター】をクリックする
【外観】メニューの上にマウスポインターを合わせ、展開したサブメニューの【テーマエディター】をクリックしてください。
- STEP 3【javascript.js】をクリックする
右側の【javascript.js】をクリックしましょう。javascript.js は、独自の JavaScript コードを記述する際に利用するファイルになります。
- STEP 4カスタマイズ用コードをコピーする
javascript.js ファイルの編集画面が表示されたら、まずはカスタマイズ用コードをコピーしましょう。コードの右上に表示されている【コピーする】をクリックすればコピー可能です。
- STEP 5コードを javascript.js に貼り付ける
カスタマイズ用コードを「//JavaScriptやjQueryで親テーマのjavascript.jsに加えて関数を記入したい時に使用します。」と書かれている行の、すぐ下辺りに貼り付けてください。
すでに何かしらのコードが記述してある方は、そのコードの下に貼り付けましょう。
- ラベル【ファイルを更新】をクリックする
コードを貼り付けたら、左下の【ファイルを更新】をクリックして保存します。
以上で、カスタマイズは完了です。
ご自身のサイトを確認してみてください。
Cocoon の目次にスムーススクロールを実装するカスタマイズ用コード
/************************************
** スムーススクロールを実装する
************************************/
$(function() {
$('a[href^=#]').click(function() {
var speed = 400;
var offsetY = 30;
var target = $(this).attr('href');
var position = $(target).offset().top - offsetY;
$('html, body').animate({
scrollTop: position
}, speed);
return false;
});
});
下記の部分でスクロール時間を調整しています。400 = 400ミリ秒のことで、0.4秒かけてスクロールする意味です。例えばここを『1000』に編集すれば、1秒かけてスクロールします。
var speed = 400;
あと、下記の部分ではスクロールの終了地点を決めています。『30』の意味は、見出しの30px上でスクロールが終わるということです。
var offsetY = 30;
細かいことですが、見出しピッタリにスクロールすると余白がない状態なので、見出しのスタイルによっては文字が見えにくくなってしまいます。これを避けるために見出しの手前でスクロールが終わるようにしています。
またこれは、ヘッダーを固定表示されている場合にも有効です。30 の数値を大きくすればそれだけ余白も広くなるので、ヘッダー分の高さを考慮してスクロールさせられます。
今回は固定ヘッダーについては詳しく触れませんが、またおいおい追記したいと思います。
補足|CSS だけでもスムーススクロールはできるけど……
実は下記のコードをスタイルシートに追加するだけでも、スムーススクロールになるにはなります!
html {
scroll-behavior: smooth;
}
ただ、scroll-behavior
プロパティの痛い点は、IE や Safari ブラウザに対応していていないことです。IE に関してはサポートが2022年6月15日に終了するのでまあ良しとしても、iPhone ユーザーに対してスムーススクロールできないのはちょっと厳しいです。
ということで、本記事では jQuery を使ったスムーススクロールを紹介しました。逆に言えば、ブラウザーの互換性を気にしなければ、CSS を編集するのでOKです。
コメント