THE THOR ザ・トール 固定フッターエリア 目次に戻る ボタンを設置

当サイトではワードプレスのテーマ THE THOR を利用しています。THE THOR は優れたテーマです。 THE THOR の個人的評価は以下をご覧ください。

 

THE THOR とは？ 『ザ・トール レビュー』

 

THE THOR の機能のなかで気に入っているもののひとつに固定フッターエリアがあります。固定フッターエリアはスマホのみで表示され、自由に変更出来る4つの項目と1つのボタン(TOPに戻る)を画面下に固定表示する機能です。

 

この記事のカスタマイズでは、項目の一つを「目次に戻るボタン」にします。

 

目次に戻るボタンは、文字量の多い記事では有効なボタンです。残念ながら THE THOR には標準装備されていませんので自力で設定することにしました。※現在の当サイトでは採用していません。

 

「目次に戻るボタン」の仕組み

• 最初のh2前に目次を設定
• 個別ページ用広告設定を使い最初のh2前にアンカーポイントを設置
• 固定フッターエリア設定で目次に戻るボタンを作り、リンク先にアンカーポイントを指定

目次に戻るボタンをクリックすると最初のh2にジャンプする。ジャンプした先には目次がある。という仕組みです。

目次に戻る ボタンを設置する条件

 

このボタンを設置するには2つの条件があります。

 

①目次を最初のh2前に設置していることが大前提です。

 

THE THOR の機能で自動的に最初のh2前に目次を設定できます。

目次設定を「表示する」にすると最初のh2の前に目次が自動で表示されるようになります。設定の説明では「最初のhタグの手前」となっていますが最初のh2タグ手前に表示されます。※h2より先にh3があってもh2の手前に表示される。

 

 

---

 

②もうひとつの条件は、個別ページ用広告設定の「記事内広告を最初のhタグの手前に表示する」を利用している、もしくは「個別ページ用広告設定」をまったく利用していない。

 

[wpap service=”with” type=”detail” id=”4802612109″ title=”フレキシブルボックスで作る HTML5&CSS3レッスンブック”]

↑一度サイトを作ったことがある人に丁度良いレッスンブック

 

目次に戻るボタンの仕組み

 

上記条件をクリアしていれば簡単に目次に戻るボタンの設定が可能です。

 

 

• 最初のh2前に目次を設定
• 個別ページ用広告設定を使い最初のh2前にアンカーポイントを設置
• 固定フッターエリア設定で目次に戻るボタンを作り、リンク先にアンカーポイントを指定

目次に戻るボタンをクリックすると最初のh2にジャンプする。ジャンプした先には目次がある。という仕組みです。

 

手動でアンカーポイントを追加することもできますが、問題なければ自動でh2前にコードを挿入できる個別ページ用広告設定を利用するのが簡単便利です。

 

アイデア次第でh2前にいろいろ小細工ができそうですね。

 

目次に戻るボタンの設定方法

 

では条件をクリアしているとしてまとめます。

 

目次を設定

ここで目次を最初のh2前に自動設置。

 

アンカーポイントを設定

通常はAdSenseのコードを入れるためのものですが、ここに以下のタグを追加。

<div id="MOKUJI"></div>

これは、この場所にMOKUJIという名前の目印を置いたということです。

 

必ず「記事内広告を最初のhタグの手前に表示する」にチェックを入れてください。

 

戻るボタンを設定

最後に固定フッターエリアに目次に戻るボタンを設定します。

 

好きな位置のボタンを設定してください。

参考までに↑これは現在使用している設定です。

 

最初の項目を「自由設定リンクボタン」にする。リンク先は個別ページ用設定に挿入したID（この場合はMOKUJI）に#をつけて入力。タイトルやアイコンはお好みで。

 

以上で完成です。

ほぼTHE THOR の基本設定で「目次に戻るボタン」が設置できました。

 

TOPに戻るボタンの消去（追記）

 

目次に戻るボタンは無事に設置できました。

 

よく見ると「TOPに戻る」ボタンがデフォルトで設定されています。「目次に戻る」も「TOPに戻る」も似た役割をしています。

 

「目次に戻る」があれば「TOPに戻る」は要らない。多くの人はそう思うのではないでしょうか？言われてみれば僕もそう思います。つまり理想は「TOPに戻る」ボタンを「目次に戻る」に変更したい！

 

30分ほど格闘した末、結論「今の僕の実力では不可能」

 

というわけで変更するのはやめて、邪魔者には消えてもらいました。

以下のコードを追加してください。

/*トップへ戻るを消去*/
.controllerFooter__item:last-child{
display: none;
}

 

これで邪魔者は消えます。出来上がりはこんな感じ↓

追記は以上です。

 

あとがき

 

多少の条件はありますが簡単です。

今回の目次に戻る設定は暫定的なものです。簡単設置で戻すのも簡単なのでとりあえず設定してみました。固定フッターエリアは他にも色々と活用できそうなのでさらに改良していきたいと思います。