Side Toc nameattr Basalt

Table of Contents

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

FILE 1/2

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

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

補遺0000-1: 使用方法

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

+ CSSが長いので格納

[[module CSS]]
#page-content a[name] {
    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.6s, transform 0.3s;
}
.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**
<links>
[[/div]]
[[/div]]

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

[[# anchor]]

3. ステップ1の<links>の箇所にリンクを必要なぶんだけ箇条書き構文を用いて書きます。<anchor>には対応するアンカーの名前を書き、<linktext>には自由な文字列が使用できます。

[[div class="blockquote toc"]]
[[div]]
= **Table of Contents**
* [#anchor linktext]
* [#anchor linktext]
* [#anchor linktext]
[…]
[[/div]]
[[/div]]

補遺0000-2: サンプル

補遺0000-3: サンプル

補遺0000-4: サンプル

補遺0000-5: サンプル

---

FILE 2/2

特別収容プロトコル:

説明: