Cocoonのトップへ戻るボタンを目次に戻るボタンに変更する

トップへ戻るボタンを目次に戻るボタンに変更する

Cocoonで右下に表示出来るトップへ戻る(ページ上部へ戻る)ボタンを、ページ内に目次がある時に目次に戻るボタンに変えるカスタマイズの紹介です!

スポンサーリンク

【設定】トップへ戻るボタンを表示する

「管理画面>Cocoon設定>ボタン」の「トップへ戻るボタンの表示」の項目にチェックを入れて保存します。

有効になれば、ページを少し下にスクロールした時右下にトップへ戻るボタンが表示されます。

「トップへ戻るボタンを表示する」にチェックを入れる

【コピペでOK】目次に戻るボタンに変更する

動作サンプル

クリックで目次に移動します。

コピペするコード

Cocoon子テーマのjavascript.jsに以下のコードをコピペでOK !

//右下のトップへ戻るボタンを目次に戻るに変更する
(function($){
    var toc = $('.entry-content .toc');
    if( toc.length )  {
        $('.go-to-top-button').off('click').click(function(){
            $('body,html').animate({
                scrollTop: toc.offset().top -10
            }, 300);
        }).addClass('go-to-toc-button');
    }
})(jQuery);
スポンサーリンク

カスタマイズする

以下で紹介する追加コードは子テーマのstyle.cssにコピペで適用できるCSSです!

ヒント

以下のCSSは「目次に戻るボタン」の時だけ適用されます。
「トップへ戻るボタン」の時も適用したい場合は.go-to-toc-button.go-to-top-buttonに変更すればOK!

見た目を調整する場合の参考にどうぞ!

「目次」ラベルを表示する

アイコンの下に「目次」等の文字を表示出来ます。

.go-to-toc-button {
    flex-direction: column;
}
.go-to-toc-button:after {
    content:'目次';
    font-size: 12px; /* 文字サイズ */
    margin-top: 2px;
}

文字色・背景色を変更する

トップへ戻るボタンの文字色・背景色は「管理画面>Cocoon設定>ボタン」「トップへ戻るボタン」で変更が出来ます。

目次に戻るボタンの時だけ色を変更する場合は以下のコードを追加。

.go-to-toc-button {
    color: #ffffff; /* 文字色 */
    background: #333333; /* 背景色 */
}
/* オンカーソル時 */
.go-to-toc-button:hover {
    color: #ffffff; /* 文字色 */
    background: #999999; /* 背景色 */
}

アイコンを変更する

トップへ戻るボタンのアイコンは「管理画面>Cocoon設定>ボタン」「トップへ戻るボタン」で変更が出来ます。

目次に戻るボタンの時だけアイコンを変更する場合は以下のコードを追加。

アイコンはFontAwesome4.7から選べます。
アイコンをクリックして移動したページにあるUnicode: \xxxxをコピペすると好きなアイコンに変更できます。

.go-to-toc-button .fa:before {
    content: '\f0ca';
}

ボタンの大きさを変更する

ボタンのサイズを変更する場合は以下のコードを追加。

.go-to-toc-button {
    width: 60px; /* 横幅 */
    height: 60px; /* 高さ */
}

ボタンを丸くする

トップへ戻るボタンを真円にするには次のコードを追加。

丸くなる分少し小さくなるので、横幅と高さを調整すると良いかもしれません。

.go-to-toc-button {
    border-radius: 50%; /* 丸くする */
}

移動位置を調整する

メニュー等をヘッダー固定にしていたりすると戻った位置とメニューが重なってしまう事があるので、以下のコードの数値を変更する事で目次に戻った時の位置を微調整できます。

マイナスだと上、プラスだと下に移動位置がズレるようになります。

scrollTop: toc.offset().top -10

スクロールのスピードを変更する

ボタンクリックで目次に戻る時のスクロールのスピードを変える場合は以下の数値を変更します。
数字が大きいほどゆっくり、小さいほど速くスクロールします。

}, 300);

あとがき

個人的にスマホだとページ全体が把握しづらいのもあり目次に戻れると便利だなぁと思います。


当ブログに掲載されているCSSについて

コメント

タイトルとURLをコピーしました