Side ToC BASALT

Table of Contents

• File 1/2
  • 収容プロトコル
  • 説明
  • 補遺1: 使用方法
  • 補遺2: サンプル
  • 補遺3: サンプル
  • 補遺4: サンプル
  • 補遺5: サンプル
• File 2/2
  • 収容プロトコル
  • 説明

FILE 1/2

特別収容プロトコル: 右下に注目！

説明: アンカーを設置したページ内の特定の場所にジャンプするリンクとそれを置いておくためのボックスです。

補遺0000-1: 使用方法

1. 以下のコードをページの適当な場所 (最上部が分かりやすいです) に書きます。

+ CSSが長いので格納

[[module CSS]]
html {
    scroll-behavior: smooth;
}
.anchor {
    padding-top: 6rem;
    margin-top: 6em;
}
.blockquote.toc {
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 0;
    z-index: 99;
    margin: 0;
    padding: 0;
    opacity: 0.25;
    transform: translateX(calc(100% - 20px));
    transition: opacity 0.3s, transform 0.2s;
}
.blockquote.toc:hover {
    opacity: 1;
    transform: translateX(0px);
}
.blockquote.toc::before {
    content: '\f104';
    font: 2rem 'FontAwesome';
    width: 20px;
    align-self: center;
    text-align: center;
    transition: transform 0.3s 0.3s;
}
.blockquote.toc:hover::before {
    transform: scale(-1);
}
.blockquote.toc > div {
    border-left: dotted 2px #8888;
    padding: 0 1em;
    min-width: 150px;
    max-height: 200px;
    overflow-y: auto;
}
.blockquote.toc ul {
    padding-inline-start: 1em;
    list-style-type: none;
    list-style-position: inside;
}
[[/module]]

[[div class="blockquote toc"]]
[[div]]
= **Table of Contents**
<リンク一覧>
[[/div]]
[[/div]]

2. 記事のアンカーを置きたい場所に以下の形式でアンカーを設置します。<アンカーの名前>はアンカーごとに個別の名前を決めることができます。

[[span class="anchor" id="<アンカーの名前>"]]文章[[/span]]

3. ステップ1の<リンク一覧>の箇所にリンクを必要なぶんだけ箇条書き構文を用いて書きます。<アンカーの名前>にはリンクと対応するアンカーの名前を書き、<リンクテキスト>には自由な文字列が使用できます。＊"u-"をつけるのを忘れないでください

[[div class="blockquote toc"]]
[[div]]
= **Table of Contents**
* [#u-<アンカーの名前> <リンクテキスト>]
* [#u-<アンカーの名前> <リンクテキスト>]
* [#u-<アンカーの名前> <リンクテキスト>]
[…]
[[/div]]
[[/div]]

補遺0000-2: サンプル

補遺0000-3: サンプル

補遺0000-4: サンプル

補遺0000-5: サンプル

---

FILE 2/2

特別収容プロトコル:

説明: