【Cocoon】目次から見出しまでを、すーっとスライドで移動

Cocoonに目次を表示していると、クリックで目的の見出しにすぐたどり着けるため便利です。

ただ急に画面が切り替わると、ページ全体のどのあたりの位置に移動したのかが分かりにくいときがあります。

目次でクリックした項目からスライドして移動する(スムーススクロール）設定は、位置を把握することに役立ちます。

この記事では、目次からのスライド移動の設定手順(クラシックエディタ版）を解説します。

スライドで移動させる設定手順

スクロールの設定と移動する位置の調整方法を解説していきます。

スムーススクロールの設定は、この記事に記載しているCSSコードをそのまま貼り付けるだけでできるので、カスタムが苦手な方も安心してください。

テーマファイルにコードを貼り付け

Cocoonの初期設定となっている「目次をクリックすると急に画面が切り替わる状態」から、目的の見出しまでスクロールで移動する（スムーススクロール）状態に変更する手順を解説します。

1.「外観」にマウスカーソルをのせて「テーマエディター」をクリック

2.画面右側のテーマファイルの中から「tmp-user」をクリック

編集するテーマが「Cocoon Child」になっていることを確認してから、「tmp-user」をクリックしてください。

3.「footer-insert.php」をクリック

4.下記コードをコピペして、一番下に貼り付ける

テーマの編集をしていると、間違えた状態で更新してしまうこともあるので、編集の前にテキストエディタなどに初期の状態を保存しておくと安心です。

コードを貼り付ける場所は、空いているスペースでOKです。

<script>
$(function(){
    //目次クリック時
    $('#toc a[href^=#]').click(function(){
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var target_position = target.parent().offset().top;
        // 移動速度の速度　速くしたい場合は500の部分を小さくしてください
        $('body,html').animate({scrollTop : target_position}, 500);
    });
});
</script>

画面下の「ファイルを更新」をクリックして、設定が反映されているか確認してみましょう。

スクロール後の位置を微調整する

上記の方法ではスクロール後の位置が見出しのギリギリに設定されているため、見づらいと感じる方もいるかと思います。

スクロール後の位置を見出しの少し上にしたい場合は、下記のコードをコピーして「footer-insert.php」に貼り付けてください。

（「footer-insert.php」の開き方…「テーマファイル」⇒「tmp-user」⇒「footer-insert.php」）

<script>
$(function(){
//目次クリック時
$('#toc a[href^=#]').click(function(){
       var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
       var target_position = target.parent().offset().top- 100;
// スクロールの速度　速くしたい場合は500の部分を小さくしてください
       $('body,html').animate({scrollTop : target_position}, 500);

});
});
</script>

「var target_position = target.parent().offset().top」の後にマイナスで数字を入れると調整できます。今回は「-100」を入れています。

画面下部の「ファイルを更新」をクリックして、どのぐらいの位置に移動できるかを確認してみてください。

目次の枠線や文字のカスタマイズについては、下記の記事で詳しく解説しています。

【Cocoon】目次を閉じてカラム中央に設置。枠線・文字の編集も

Cocoonには見出しの挿入により目次が設置される機能があります。初期設定ではすべて開いていますが、クリックしたら開くようにすることも可能です。この記事では、目次を閉じてカラム中央に設置する方法、目次の枠線と文字の変更を解説します。

yoshikuma-office.com

2021.08.01

まとめ

WordPress無料テーマ「Cocoon」の目次から見出しの位置へスライドで移動する手順を解説してきました。

CSSの編集をしましたが、記事に記載のコードをそのまま貼り付けるだけなので、むずかしくはなかったかと思います。

サイトを見やすく変更していくことで読者も自分も見やすくなりますので、必要に応じて変更してみてくださいね。