EDIT

目次に戻るボタンを付ける

｜2023/10/28
アイキャッチ

先日から当ブログの右下に追加したとあるボタン。

押すと目次の位置にスクロールするというだけの単純な機能のボタンです。目次のないページではボタンは表示されません。

他のブログ(特に Blogger 以外)で結構この機能のボタンを見かけるので需要はありそう？というわけで今回はこのボタンの設置方法を紹介したいと思います。

当初は F-light カスタマイズ集のネタの一つにするつもりでしたが、F-light 以外のテーマでも機能する(QooQ、Contempo でテスト済み)ようなので、単独の記事にしました。尚、F-light の次回アップデートでは正式機能として実装予定です。

IB-Note 製の目次限定

今回紹介する「目次に戻るボタン」は IB-Note 製の自動目次ウィジェット専用です。スケ郎さん作のものやその他の目次では機能しませんのでご注意下さい。

ファビコンIB-Note
サムネイル
【全見出しタグ対応】高速＆シンプルな自動生成目次 | IB-Note
いろいろな自動生成目次のソースコードを読んで比較検討を重ねた結果、「これだ！」と思う理想の目次を作ることができました。
https://itblogger-note.blogspot.com/2021/12/fast-and-simple-auto-toc.html

実装手順

HTML を編集しますので、必ずテーマのバックアップを取ってから作業を行って下さい。

F-light と その他のテーマで分けて説明します。

F-light 編

① JavaScript コードの追加

HTML 編集にて <!-- Auto TOC Generatorを検索で見つけます。

スクリプトコードの閉じタグ/*]]>*/</script>の上(画像の赤枠の所)に下記のコードを追加します。

JavaScript コード挿入位置
//目次に戻るボタン
const tocContainer = document.querySelector("#toc");
if (tocContainer) {
  let backToc = document.querySelector("body");
  backToc.insertAdjacentHTML("beforeend", '<a id="backtoc" title="目次" href="#toc"><svg aria-label="目次に戻るボタン" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></a>')
}

② CSS の追加

/*==== 自動目次 ====*/の所に下記の CSS を追加して下さい。

#backtoc {
  position: fixed;
  right: 0;
  bottom: 9em;
  padding: 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .2);
  z-index: 1;
  transition: .2s;
}
#backtoc:hover {
  background: rgba(0, 0, 0, .1);
}
#backtoc svg {
  fill: var(--dark-color);
  font-size: 3rem;
  vertical-align: -20%;
}
@media (max-width:1024px) {
  #backtoc {
    bottom: 2em;
  }
}

その他のテーマ編

何も弄っていない状態の QooQ と Contempo でテスト済みですが、それ以外のテーマでの動作保証はできませんので悪しからず。

① JavaScript コードの設置

下記のコードを</body>の直上に追加して下さい。（上記の F-light 用のコードを目次コードの閉じタグの上に挿入してもOKです。）

<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/
//目次に戻るボタン
const tocContainer = document.querySelector("#toc");
window.addEventListener("DOMContentLoaded", () => {
  if (tocContainer) {
    let backToc = document.querySelector("body");
    backToc.insertAdjacentHTML("beforeend", '<a id="backtoc" title="目次" href="#toc"><svg aria-label="目次に戻るボタン" class="svg-icon-24 list"><use href="/responsive/sprite_v1_6.css.svg#ic_menu_black_24dp" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg></a>')
  }
});
/*]]>*/</script>
</b:if>

② CSS の追加

下記のコードを]]></b:skin>の直上に追加して下さい。

※ページトップボタン等と被ってしまう場合は、bottom: 2em;の数値を増やして調整して下さい。
right: 0; → left: 0;に変更することで、左側に表示させる事もできます。

#backtoc {
  position: fixed;
  right: 0;
  bottom: 2em;
  padding: 8px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .2);
  z-index: 9999;
  transition: .2s;
}
#backtoc:hover {
  background: rgba(0, 0, 0, .1);
}
#backtoc svg {
  fill: #111;
  font-size: 3rem;
  vertical-align: -20%;
}

最後に

今回の JavaScript コードは初心者の私が自力で書きました。もしおかしな所や改善点などありましたら、ご教授頂ければ幸いです。