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

THE THOR では固定フッターエリアの項目を最大4つまで使用することができます。

ここでは項目の一つを「目次に戻るボタン」にします。



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

THE THOR 目次に戻る 条件

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

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

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

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

目次設定を「表示する」にすると最初のh2の前に目次が自動で表示されるようになります。

設定の説明では「最初のhタグの手前」となっていますが最初のh2タグの前に表示されます。

※h2より先にh3があってもh2の手前に表示される。

THOR 目次に戻る 目次設定


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

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

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

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

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

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

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

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

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

  • 個別ページ用広告設定を使いアンカーポイントを最初の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に戻る ボタンを消去

追記は以上です。

あとがき

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

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

邪魔者を消す追記をしました。