[[iftags +コンポーネント]]
Better is subjective of course, but what you see is what you get.
もちろん、より良いBetterというのは主観に依りますが、見ればわかるでしょう。
This is a component that mimics the custom footnotes as seen in SCP-4485.
これはSCP-4485に見られるようなカスタム脚注を模倣したコンポーネントです。
Examples:
例:
Text.Text in footnote.
Text.Text in footnote. and more text.
Text.Text in footnote.. More text.
Text not in footnote.
文章.脚注の中の文章。
文章.脚注の中の文章。そして文章。
文章.脚注の中の文章。。もっと文章。
脚注の中ではない文章。
How to use:
使い方:
Put this in once:
以下の記述を一つ書きます:
[[include :scp-jp:component:betterfootnotes]]
Copy the following structure for each footnote:
下記の構文を脚注ごとにコピー&ペーストします:
[[span class="fnnum"]].[[/span]][[span class="fncon"]]脚注の中の文章。[[/span]]
Note:
注:
- The fnnum span class contains a period, as it needs at least one non-space character to properly parse.
- funnumクラスのspan要素には1つのピリオドを入れます。これは、構文が正しく解析されるために少なくとも1つの非空白文字が必要だからです。
- The color of the footnote superscript is customizable with the following:
- 以下の構文を適用することで、脚注の上付き文字の色を変更することができます。
[[module CSS]]
:root {
--fnColor: COLOR HERE;
--fnColor: ここに色コード;
}
[[/module]]
Otherwise defaults to #E6283C.
そうでなければ、#E6283Cがデフォルトです。
- There is no bottom footnote list.
- ページ最下部の脚注一覧は自動生成されません。
- Works with Sigma-9, but might not be as seamless.
- シグマ-9でも機能しますが、シームレスではないかもしれません。
- Special thanks to Woedenaz for their impeccable design sense, and
Placeholder McD for pestering encouraging me to make this.
- このコンポーネントを作るにあたって、Woedenazの完璧なデザインセンスに、また、
Placeholder McDの おねだり きっかけ作りに心からの感謝を。
Source Code:
ソースコード:
:root { --posX: calc(50% - 358px - 12rem); --fnTransition: 0.3s; --fnLinger: 0.15s; --fnInteract: calc(var(--fnTransition) + var(--fnLinger)); } /*--- Footnote Auto-counter --*/ #main-content { counter-reset: megacount; } /*--- Footnote Superscript Number --*/ .fnnum { display: inline-block; width: max-content; text-indent: -0.285ch; vertical-align: super; line-height: 80%; word-break: initial; text-decoration: none; font-weight: bold; font-style: initial; color: transparent; position: relative; font-size: 80%; padding: .15em .1em .15em 0; margin-right: -0.25em; counter-increment: megacount; user-select: none; } .fnnum::after { content: "" counter(megacount); color: var(--fnColor, #E6283C); } .fnnum:hover { text-decoration: none; cursor: pointer; background-color: var(--fnColor, #E6283C); } .fnnum:hover::after { color: white; } /*--- Footnote Content Wrapper --*/ .fncon { position: absolute; right: calc(var(--posX) + 80px); line-height: 1.2; padding: 0.82rem; width: 10.3rem; background: white; border: 2px solid black; font-weight: initial; font-style: normal; text-align: initial; visibility: hidden; opacity: 0; z-index: 9; transition: opacity 0.15s linear var(--fnLinger), right var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger), visibility 0.01s linear var(--fnInteract); } .fnnum:hover + .fncon, .fncon:hover { opacity: 1; right: var(--posX); visibility: visible; transition: opacity 0.15s linear, right var(--fnTransition) cubic-bezier(.08,.72,.5,.94); } .fncon::before { position: absolute; top: 0; left: 0; transform: translateX(-52%) translateY(-55%) scale(1.15); background-color: var(--fnColor, #E6283C); color: white; content: counter(megacount); font-size: initial; font-weight: bold; font-style: initial; padding: 0.18rem 0.32em 0.08rem; } /*--- Mobile Query --*/ @media only screen and (max-width: 1279px) { .fncon { position: fixed; bottom: 1.3rem; left: calc(11% - 50px); width: 70%; transition: opacity 0.15s linear var(--fnLinger), left var(--fnTransition) cubic-bezier(.08,.72,.5,.94) var(--fnLinger), visibility 0.01s linear var(--fnInteract); } .fnnum:hover + .fncon, .fncon:hover { left: 11%; transition: opacity 0.15s linear, left var(--fnTransition) cubic-bezier(.08,.72,.5,.94); } }
[[/iftags]]