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;
}文字色・背景色を変更する
目次に戻るボタンの時だけ色を変更する場合は以下のコードを追加。
.go-to-toc-button {
color: #ffffff; /* 文字色 */
background: #333333; /* 背景色 */
}
/* オンカーソル時 */
.go-to-toc-button:hover {
color: #ffffff; /* 文字色 */
background: #999999; /* 背景色 */
}アイコンを変更する
目次に戻るボタンの時だけアイコンを変更する場合は以下のコードを追加。
アイコンは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);
あとがき
個人的にスマホだとページ全体が把握しづらいのもあり目次に戻れると便利だなぁと思います。
- Cocoonのデフォルトスタイルを元にカスタマイズをしています。仕様変更等で表示が崩れた場合は追加したコードを削除してください。
- 表示確認はWindows/Chrome, Firefox, Edge、iPhone8/Safariで行っています。
- CSSが反映されない場合は以下のページをご確認ください。
WordPressテーマ設定（CSS等含む）を変更しても反映されない場合のトラブルシューティング方法 | Cocoon
CSSが効かない・反映されないときの対処法まとめ - 不具合を発見しましたらお手数ですが該当記事のコメント欄へご連絡おねがいします（返信にはお時間をいただく場合があります）
コメント
草村さま
こんにちは。大変役立つ記事ありがとうございます。
早速試したところ、PCでは動作するのですが、スマホで見ると右下のボタンが
「↑トップ」
というボタンになっていて、押すと目次を飛び越して一番上まで戻ってしまいます。
対処法などありましたらご教授いただけますと幸いです。
お手数ですがよろしくお願いいたします。
こんにちは！
ご質問の件の確認のためサイトを拝見いたしました。
”「↑トップ」というボタン”というのは、スマホで見た時に画面下部に「メニュー・ホーム・検索・トップ・サイドバー」と並んでいる中のボタンでしょうか。
もしそうであればこちらは「フッターモバイルボタン」で、右下ボタンとは異なる箇所なのでこの記事のコードでは目次に戻るボタンに変更出来ません。
※右下のトップへ戻るボタンは「フッターモバイルボタン」が有効な場合は非表示になるのがCocoonの仕様です。
ですが、フッターモバイルボタン内に目次に戻るボタンを設定する事は可能で、以下の公式ページでメニューのカスタマイズ方法が掲載されています。
「目次へ」ボタンは「独自ボタンを作成する」からコマンドを確認出来ます。
https://wp-cocoon.com/mobile-footer-menu/
フッターモバイルボタンと右下のトップへ戻るボタン(※この記事の目次に戻るに変更するボタン)を共存させたい場合は、また違ったカスタマイズが必要になります。
▼もしフッターモバイルボタンの事ではない場合
当ブログ(このページ)の右下ボタンはスマホで見た時に目次に戻るボタンになっているでしょうか？なっていない場合お使いのスマホで正常に動作していない可能性が高いです。
スマホの機種やブラウザの情報を教えていただけると、何かヒントになるかもしれません。
上記の件、ご確認くださいませ。
コメントありがとうございました！(*^^*)
草村さま
お返事遅くなり申し訳ありません。
早速のご回答ありがとうございます。
＞「↑トップ」というボタン”というのは、スマホで見た時に画面下部に「メニュー・ホーム・検索・トップ・サイドバー」と並んでいる中のボタンでしょうか。
はい、そうです。
＞こちらは「フッターモバイルボタン」で、右下ボタンとは異なる箇所なのでこの記事のコードでは目次に戻るボタンに変更出来ません。
承知いたしました。
＞ですが、フッターモバイルボタン内に目次に戻るボタンを設定する事は可能で、以下の公式ページでメニューのカスタマイズ方法が掲載されています。
これが知りたかったです。グーグル検索しかせず公式を確認しておらず、大変お手数おかけしました。ありがとうございました！
解決出来たようでよかったです。
Cocoonは結構色々な事が出来るので公式サイトも一通り見てみると新たな発見があるかもしれません＾＾
コメントありがとうございました！
役立つ情報記事誠にありがとうございます♪
最近cocoonをアップデートしたせいか目次に戻らずTOPに戻るようになってしまいました。
そのような問題は起きていませんでしょうか？
zhivagoさん
こんにちは！コメントありがとうございます。
cocoonバージョン2.3.3で試してみたのですが、動作しているようでした。
一度以下の点を確認してみてください。
1.cocoonは子テーマを有効にしていますか？
→親テーマのjavascript.jsを編集した場合、アップデートで編集した内容が消えてしまいます。
2.ページに目次はありますか？
→うっかりという事もありますので念の為
他に原因があるかもしれませんが、実際にページを見てみないとわからないかもしれません（見てもわからない可能性もあります）
上記の点、一度お確かめください。
ありがとうございます♪
原因がわかりました。cocoonの目次ではなく、RTOC「Rich Table of Contents」というプラグインで目次を使っていたからでした・・・(;^_^A
もし、可能であれば、TOPへ戻るを、Rich Table of Contentsの目次に戻るようにする方法を教えていただけないでしょうか
サイトはこちらになります・・・。
https://context-japan.co.jp/ryokin/trimming-salon-17900.html
zhivagoさん
サイト拝見しました。
コピペするコードの
var toc = $('.entry-content .toc');の部分を以下に変更すれば動作するかもしれません。
var toc = $('#rtoc-mokuji-wrapper');一度お試しください。
動作しました！
本当にありがとうございますm(__)m
めちゃめちゃ助かりました。
お忙しいところ本当にありがとうございます！
zhivagoさん
解決できてよかったです。
お疲れさまでした！