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

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

 

 

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

 

 

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

 

 

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

 

 

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

 

 

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

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

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

 

 




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

THE THOR 目次に戻る 条件

 

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

 

 

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

 

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

外観 → カスタマイズ → 投稿ページ設定[THE] → 目次設定

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

 

THOR 目次に戻る 目次設定

 

 


 

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

 

 

外観 → カスタマイズ → 広告設定[THE] → 個別ページ用広告設定

THE THOR 目次に戻るボタン 広告設定

 

 

フレキシブルボックスで作る HTML5&CSS3レッスンブック

フレキシブルボックスで作る HTML5&CSS3レッスンブック

エビスコム
2,860円(11/17 20:59時点)
発売日: 2019/03/18
Amazonの情報を掲載しています

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

 

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

 

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

 

 

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

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

 

 

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

 

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

 

 



 

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

 

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

 

 

目次を設定

外観 → カスタマイズ → 投稿ページ設定[THE] → 目次設定

 

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

 

 

 


 

 

アンカーポイントを設定

外観 → カスタマイズ → 広告設定[THE] → 個別ページ用広告設定 → 記事内広告の設定

 

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

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

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

 

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

AdSense広告が入った状態では未検証ですが出来ると思います。
AdSenseコードが入っている場合は、最後にタグを追加してください。最初に追加するとAdSense広告の前に戻ってしまいます。

 

 

戻るボタンを設定

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

外観 → カスタマイズ → 共通エリア設定[THE] → 固定フッターエリア設定[スマホ専用]

 

 

 

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

THE THOR 目次に戻る 固定フッターエリア 設定サンプル

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

 

 

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

 

 


 

 

以上で完成です。

 

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

 

 



 

TOPに戻るボタンの消去(追記)

 

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

 

 

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

 

 

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

 

 

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

 

 

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

外観 → カスタマイズ → 追加CSS

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

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

 

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

TOPに戻る ボタンを消去

追記は以上です。

 

 

 

あとがき

 

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

 

 

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

 

 

呟くのよ・・・私の棒ストが