バージョン3.3で追加した、見出しタグなどの上に「ページ上部へ戻る」リンクを自動で挿入する機能についての機能解説と設定方法を紹介します。
本機能の概要
この機能は、予め設定しておくことで、コンテンツ（投稿や固定ページなど）の本文にある「H2」「H3」などの見出しタグや、グループ化したブロック類で設定できる「section」タグの上部へページの最上部へ戻るためのリンクを自動的に挿入します。
最近メジャーになった、目的の場所まで下方向に移動する目次機能があるのに、なんで戻る機能がないの？という単純な疑問から追加した機能です。
上に戻るボタンはページ外に設置してるしと思った方、それはひょっとすると作り手側のエゴなのかもしれず、一般の方には分からないかも知れませんから、それなら本文の中に自動で出力したら？というのがきっかけです。
もちろん現在、このページでも各所に自動で表示されていますから、どんなものなのかは実感いただけるでしょう。
一度設定してしまえば、過去のコンテンツを含めて自動で判断して表示されますので、過去の投稿を1つ1つ修正するといった手間もありません。
本機能の設定項目と設定方法
本機能の設定は、管理画面にある「Hima Art Utility」→「追加コンテンツ」メニューにある「ページ上部へ戻る」タブから行います。
以下が設定できる項目と設定内容です。
| 設定項目 | 設定内容 |
|---|---|
| 機能を有効にする | 自動的に「上へ戻る」リンクを出力するかどうかのスイッチです |
| 要素 | 「H2」～「H3」タグ、またはグループ化した「Section」タグのどれの上に出力するかを指定します また、先頭から5個目までのタグそれぞれで出力「する」「しない」を設定できます ※例えば「1つめは非表示」「2つめは表示」．．といった設定が可能です |
| 投稿タイプ | 以下の中から、自動でリンクを出力する投稿タイプを選択できます 「投稿のみ」 「投稿と固定ページ（フロントページを除く）」 「固定ページを除くすべての投稿タイプ」 「フロントページにしている固定ページを除くすべての投稿タイプ」 |
| カスタムテキスト | 通常表示される「ページ上部へ戻る 🡅」という文字列を他の文字列へ変えることができます |
| スムーススクロールを有効化 | 上部へ戻る時にスクロールしているように見える視覚効果を有効にできます ※動作はCSSで制御しています |
| 文字色 | リンクの文字色、ホーバー時の文字色を設定できます |
いろいろな設定をしてあっても、「機能を有効にする」を無効にすれば、何も出力されなくなるようにしていますから、後から必要かどうかの判断が可能です。
他のテーマでも使えるように．．
この機能は「Hima Art Utility」プラグインなしでも、現在お使いのテーマへコードを追加することで、同じ機能を実装できるよう、以下のページでコードの紹介と解説をしています。
もうこれ以上サイトにプラグインは追加したくないけど機能は実装してみたいという方はお試しください。
コード設置時のトラブルやスタイルの調整等は各自行ってください（不具合等出ましても責任は負いません）
