2019-01-25Cocoonにはページ内の目次を自動で生成してくれる機能があります。この目次の位置にスクロール先から戻るリンクを設置するにはひと工夫必要になります。今回はその目次に戻るリンクのおすすめの設置方法のご紹介です。目次に戻るが有用であるという話を見たのでせっかくなので当ブログでも実装中です。1.5.3で目次の仕様に変更があり回答のコードに少し手直しが必要になりました。今後の仕様変更にも出来るだけ対応しやすい方法を考えてみました。目次ショートコードを使わない場合のリンク先あとがきコメント(14)スポンサーリンク目次に戻るリンクのサンプル設定するリンクはこちらリンク先#toc-checkbox-1お好みのHTMLで構いませんが、今回用意したHTMLとCSSのサンプルはこちらです。CSSは子テーマのstyle.cssに追加します。*/}表示サンプル目次に戻る目次に戻る★下準備リンクを有効にするには下準備が必要です。id="foo"></div>のようなidが設定された要素が必要です。Cocoonが出力する目次のHTML内にidが設定されている箇所が目次切り替えに使用するチェックボックスのみで、切り替え機能を無効にするとこのチェックボックスが出力されないため有効にする必要があります。PHPのカスタマイズが出来る方は目次にidを設定してしまうのもアリです。次にCocoon子テーマのstyle.cssに次のコードを追加します。hidden;}コード解説デフォルトでは表示切り替え用のチェックボックスがdisplay:none;で非表示にされています。このままではページ内リンクが機能しないため別の方法で非表示にしています。目次の表示切り替えを無効にしたい人はさらに次のコードを追加。none;}以上で下準備は完了です。ショートコードを使い複数の目次を設置する場合はこちらの注意点をご確認ください。目次に戻るリンクは普通にリンクを設定すれば設置できますが、仕様変更等でリンク先の変更が必要になる可能性もあります。今後のために、目次に戻るリンクを一括で管理しやすい自動/手動それぞれのおすすめ設置方法の紹介です。自分にあった挿入方法を3パターンから選んでいただければと思います。JavaScript(jQuery)で自動挿入もし決まったパターンの位置に自動で挿入するならJavaScriptで操作するのが簡単です。次のコードを子テーマのjavascript.jsに追加すれば<h2>見出し2</h2>の直前(一番最初の見出しは除く)と本文末尾に目次に戻るリンクを自動で追加できます。}})(jQuery);AMPページではJavaScriptが使えないため目次に戻るリンクは挿入されません。prependあたりの使い方を調べていただければと思います。次のコードはカスタマイズの一例です。.entry-content直下の<h2>見出し2</h2>だけに挿入したい場合。(2カラムタグ内にh2がある場合などに有用かな?)$('.entry-content').children('h2:not(:first)').before(back_toc);<h3>見出し3</h3>の直前にも追加したい場合はこんな感じにコードを追加。:not(h2)+h3').before(back_toc);【コピペでOK】PHPで自動挿入(中級者向け)ちなみに当ブログではこちらの方法で自動挿入しています。(2019-01-25現在)子テーマのfunctions.phpにコードを追記し自動挿入する方法です。PHPを扱うので中級者向けという位置づけにしました。以下のコードを追加すると<h2>の直前(一番最初の見出しは除く)と本文末尾に目次に戻るリンクを追加します。functions.phpは編集前に必ずバックアップを取って保存してください。編集後エラーが出た場合バックアップファイルを元に復元してください。99999);AMPページでも目次に戻るリンクが挿入されます。リンクを機能させるためには「Cocoon設定>AMP>サイズ制限対応」の「子テーマのスタイルを有効にする」にチェックを入れる必要があります。詳しくは下記をご確認ください。【手動】Cocoonのテンプレート機能を使って一括管理ページ毎に好きな位置に設置したい方はCocoonのテンプレート機能を使えば変更を一括で出来るので大変便利です。id=XX]のようなショートコードで使用できるようになります。管理が簡単なので自動挿入と併用したい場合にも便利です。ブロックエディタを利用している場合「再利用ブロック」機能を使用するとテンプレート機能と同様の使い方が出来るみたいなのでそちらが簡単かもしれません。テンプレートに目次に戻るリンクを登録して使う手順はこちら。「Cocoon設定>テンプレート」から「新規追加」をクリック目次に戻るリンクを入力したら「保存」します。投稿ページや固定ページの表示したい場所に登録したテンプレートのショートコードを記入すれば目次に戻るリンクが表示されます。ショートコードは登録の際「ビジュアルエディターのリストに表示」にチェックを入れておけば、ビジュアルエディターのドロップダウンリストから選択して入力する事も出来ます。AMPページでは目次のid(toc-checkbox-1の数字)が変わってしまうようです。そのため目次に戻るリンクが機能しなくなります。詳しくは下記をご確認ください。Cocoon目次に戻るAMPページでの目次に戻るリンクについてCocoonのAMPページでは目次のid(toc-checkbox-1の数字)が変わる仕様のようです。そのため、目次に戻るに指定すべきリンク先が変わってしまいます。PHP版ではその辺も対応しています。リンクは挿入されません。リンクが自動挿入され、機能します。リンクは表示されますが、機能しません。自動でAMP用のリンクに置換するようにしているので機能しますが、「Cocoon設定>AMP>サイズ制限対応」の「子テーマのスタイルを有効」にチェックする必要があります。下準備で行ったチェックボックスのスタイルを反映させる必要があるためです。機能しないリンクが表示されたままだと不便なのでAMPページのみ非表示にするといいかもしれません。サンプルHTML使用の場合、子テーマのamp.cssに以下のコードを追加する事で非表示にできます。none;}※スタイルを有効にするには「Cocoon設定>AMP>サイズ制限対応」の「子テーマのスタイルを有効にする」にチェックを入れる必要があります。AMPページで子テーマのスタイルを無効にする場合サイズ等の関係で子テーマのスタイルを適用したくない場合は、下準備で行ったスタイルも適用されずリンクは機能しなくなりますので、AMPページで目次に戻るリンクを非表示になるように設定すると良いかと思います。HTMLのclassにdisplay-noneを追加します。このままだとリンクが非表示になっています。目次に戻る</a></div>style.cssに次のコードを追加してスタイルが適用されている場合のみ表示されるようにします。block}これでAMPページでは子テーマのスタイルが適用されないので、目次へ戻るリンクは非表示のままになるかと思います。目次に戻る目次ショートコードで複数目次を設置する場合の注意点Cocoonでは[toc]と記述する事で、ページ内に複数の目次を設置する事が可能です。自動で挿入される目次と、目次ショートコードを併用して複数目次を設置した場合”そのページの一番始めに設置されたショートコードの目次”に戻るリンクになります。>ページ設定」の「目次を表示しない」にチェックをいれ、本来自動で挿入される位置に目次ショートコードを設置すれば意図した動作になると思います。どこの目次に移動しても目次としての機能には問題がないので気にしなくてもよいかもしれません。※全ページで自動挿入しない場合は「Cocoon設定>目次>目次の表示>目次を表示する」のチェックを外すでも可この場合目次設定の「広告の手前に目次を表示する」のチェックを外しても、目次の後に広告が表示されます。目次(ショートコード)目次に戻る見た目をカスタマイズHTMLやCSSを変更すれば好きな見た目の目次に戻るリンクを挿入できるので自由に変更してください。以下では上述のサンプルHTMLのカスタマイズ例を紹介します。矢印アイコンを変更する矢印アイコンはHTMLの<i></i>の部分です。アイコン位置を右にしたい場合はこれを右に移動させればOKです。別のアイコンに変えたい場合このコードのfa-arrow-upの部分を変更します。」に変更して右に配置しています。Iconsから選べます。WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。201...web.monogusa-note.com2019-02-19アイコンの色を変更するstyle.cssに以下のコードを追加でアイコンのみ色を変更できます。#ccc;}表示サンプル目次に戻る目次に戻るリンクを右寄せにするstyle.cssに以下のコードを追加で右寄せに出来ます。right;}表示サンプル目次に戻るスムーズスクロールで目次に戻るようにする<a>タグにclass="go-to-toc-common"を追加でスルスル~とスクロールして目次に戻るリンクになります。目次に戻る</a></div>表示サンプルバッッと目次に戻る(カスタマイズ前)スルスル~っと目次に戻る(カスタマイズ後)目次に戻るリンクが上手く動かない時に確認する点#下準備は完了しましたか?CSSが適用されていない場合リンクが機能しないので確認してください。リンク先の設定は「#toc-checkbox-1」になっていますか?リンク先の設定が正しいのに機能しない場合、Cocoonの仕様変更か設定等の環境の違いで#toc-checkbox-1の数字(1の部分)が変わっている可能性があります。数字を2や3等に変更して機能するかお試しください。自動挿入の目次だけを利用しているなら#目次ショートコードを使わない場合のリンク先をご確認ください。{と10行目の}を削除すると機能するかもしれません。目次ショートコードを利用せず自動挿入だけで目次を表示している場合、リンク先を「#toc」に設定するだけで機能します。href="#toc">に変更するだけでOKです。目次に戻るあとがき以上、目次に戻るリンクの追加方法でした。色々なパターンの追加方法を提案してみたもののAMP対応まで考えると上手くまとめきれず少しややこしい記事になってしまいました...。PHPで目次にidを追加してしまえばCSSの指定なども不要なので楽かもしれませんね。すべての設置方法でリンク先を統一したかったのでこのようになりました。PHP版はCocoonの設定で切り替えようと思ったらショートコードが絡むと以外と面倒だったので今の形になりました。PHPってムズカシイ...以下参考リンクです。Cocoonのコードも参考にさせていただきました。