THEME
[[include :japan-backrooms-wiki:theme:super-liminal]]
はじめに
スーパーリミナルテーマは
Ambersight によって開発された Wikidot 用テーマです。このスタイルは リミナルテーマ の外観を再現しながら大幅な改良を加えたもので、将来的にはさまざまなテーマの基盤として使用される予定です。このテーマは複数のプリセットと、調整を簡単化する多くの CSS 変数を用意しています。カスタマイズの方法については後述します。スーパーリミナルテーマは今までのテーマと比較して、以下の特徴を兼ね備えています。例えば
- よりシンプルな構造
- より分かりやすい色指定
- フォントサイズ・画像のモバイル表示に向けた最適化
- すべての疑似要素アニメーションの削除
- より多くの CSS カスタマイズ変数
- よりフラットに表現されたデザイン
- 細部まで行き渡るさまざまな調整
凡例
Level 0 は非線形的空間であり、量販店のバックヤードのようにも見える。Level 0 のすべての部屋は均一の様式をしており、黄ばんだ壁紙や湿ったカーペット、不規則に配置された蛍光灯などを表面的な特徴として共通している。ただし、ここには二つとして同じ部屋は存在しない。
見出し1
見出し2
見出し3
これは二つ目のタブです。タブを作成するためには、こんな感じのコードを使用してください。
[[tabview]]
[[tab タブ1]]
内容。
[[/tab]]
[[tab タブ2]]
内容。
[[/tab]]
[[/tabview]]
スーパーリミナルテーマを使ってくれてありがとう!
Ambersight がこれを作るのに本当に長い時間がかかりました。
私の他の作品にも興味があれば、ぜひ著者ページを見てね!
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
これは長いタブです。たくさんの文字で満たされています。
| これは |
テーブルです |
| これの |
作りかたは |
| Wikidotシンタックスを確認してね |
> blockquote
[[div class="blockquote"]]
[[code]]
[[div class="code"]]
[[div class="lightblock"]]
[[div class="darkblock"]]
[[div class="styled-quote"]]
[[div class="dark-styled-quote"]]
[[span class="bblock"]]
[[span class="dblock"]]
[[span class="ruby"]][[span class="rt"]]
プリセット
スーパーリミナルテーマには、見た目をすばやく変更できるプリセットがいくつか用意されています。プリセットを使うときは、include文を次のように変更してください:
[[include :japan-backrooms-wiki:theme:super-liminal
|preset1=a
|preset2=a
]]
レイアウトプリセット:画面幅拡張
ページの幅を拡張します。注:このテーマページでは画面幅拡張プリセットを使用しています。
レイアウトプリセット:ページタイトルの消去
ページタイトルを隠します。 .meta-title クラスを使って偽のページタイトルを表示することもできます。
レイアウトプリセット:サイドバーを常に表示
常にサイドバーが左側に表示されるようにします。ページ幅が 1024px 以下のとき、サイドバーは縮小されます。
カラープリセット:デイタイム
白をベースに黒文字の、クラシックなデザイン。
カラープリセット:ナイトメア
灯りを消したのは誰?
カスタマイズ
スーパーリミナルテーマは多くの、明確な CSS カスタマイズ変数セットを提供します。変数を一括で変更するには以下のコードを使用します:
[[module CSS]]
:root {
--変数その1: 値;
--変数その2: 値;
...
--変数そのn: 値;
}
[[/module]]
注:句読点はすべて半角記号を使ってください。
[[module CSS]]
:root {
/* Basic Colors */
--background-color: 237, 233, 223;
--text-color: 25, 20, 16;
/* Deco Colors */
--light-color-1: var(--background-color);
--light-color-2: 255, 251, 240;
--dark-color-1: 160, 160, 160;
--dark-color-2: 140, 136, 126;
--dark-color-3: 72, 69, 60;
--dark-color-4: 48, 48, 52;
/* Special Colors */
--warning-color: 193, 44, 50;
--accept-color: 20, 169, 32;
--neutral-color: 193, 147, 44;
--warning-text-color: var(--light-color-2);
--accept-text-color: var(--warning-text-color);
--neutral-text-color: var(--warning-text-color);
/* Link Colors */
--link-color: 165, 143, 96;
--hover-link-color: var(--link-color);
--visited-link-color: var(--dark-color-2);
--newpage-color: 221, 102, 17;
/* Select Colors */
--selected-background-color: 67, 98, 197;
--selected-text-color: 253, 253, 253;
/* Scrollbar Colors */
--scrollbar-color: var(--dark-color-1), 0.75;
--scrollbar-background-color: var(--dark-color-1), 0.15;
/* Note Colors */
--note-background-color: 255, 242, 114;
--note-text-color: 24, 27, 27;
--note-border-color: 24, 27, 27, 0.5;
}
[[/module]]
[[module CSS]]
:root {
/* General Colors */
--general-light-background-color: var(--light-color-2);
--general-light-text-color: var(--text-color);
--general-medium-background-color: var(--dark-color-2);
--general-medium-text-color: var(--light-color-1);
--general-dark-background-color: var(--dark-color-3);
--general-dark-text-color: var(--light-color-1);
--general-shadow-color: var(--text-color);
--general-light-border-color: var(--dark-color-3), 0.08;
--general-medium-border-color: var(--dark-color-3), 0.2;
--general-strong-border-color: var(--dark-color-3), 0.5;
--general-dark-border-color: var(--dark-color-3);
--general-blur: 0.15rem;
--general-transition-time-fast: 0.2s;
--general-transition-time-slow: 0.3s;
/* General Buttons */
--general-button-text-color: var(--general-medium-text-color);
--general-button-background-color: var(--general-medium-background-color);
--general-hover-button-text-color: var(--general-dark-text-color);
--general-hover-button-background-color: var(--general-dark-background-color);
}
[[/module]]
[[module CSS]]
:root {
/* Header Colors */
--header-background-bottom: var(--general-dark-background-color);
--header-background-top: var(--general-dark-background-color), 0.9;
--header-background-image: linear-gradient(to top, rgba(var(--header-background-bottom)) var(--topbar-height), rgba(var(--header-background-top)) 100%);
--header-extra-background-image: radial-gradient(circle, rgba(var(--general-dark-background-color)) 50%, transparent 0);
--header-text-color: var(--general-dark-text-color);
--header-text-shadow-color: var(--general-shadow-color);
/* Topbar Colors */
--topbar-text-color: var(--light-color-1);
--topbar-hover-text-color: var(--topbar-text-color);
--topbar-background-color: 0, 0, 0, 0;
--topbar-hover-background-color: var(--dark-color-4);
--topbar-hover-border-color: var(--dark-color-2), 0.5;
--topbar-drop-text-color: var(--light-color-1);
--topbar-drop-hover-text-color: var(--general-medium-text-color);
--topbar-drop-background-color: var(--dark-color-4), 0.93;
--topbar-drop-hover-background-color: var(--general-medium-background-color);
--topbar-drop-border-color: var(--text-color);
--topbar-drop-border-width: calc(4rem / 45);
--topbar-drop-shadow-color: var(--general-shadow-color), 0.5;
/* User Account Colors */
--header-username-color: var(--dark-color-1);
--account-button-text-color: var(--general-dark-background-color);
--account-button-hover-text-color: var(--general-medium-text-color);
--account-button-background-color: var(--general-dark-text-color);
--account-button-hover-background-color: var(--general-medium-background-color);
--account-drop-text-color: var(--general-light-text-color);
--account-drop-hover-text-color: var(--general-medium-text-color);
--account-drop-background-color: var(--general-light-background-color);
--account-drop-hover-background-color: var(--general-medium-background-color);
--account-drop-border-color: var(--general-dark-border-color);
/* Search Button Colors */
--search-button-text-color: var(--account-button-text-color);
--search-button-hover-text-color: var(--account-button-hover-text-color);
--search-button-background-color: var(--account-button-background-color);
--search-button-hover-background-color: var(--account-button-hover-background-color);
/* Page Title Colors */
--page-title-text-color: var(--text-color);
--page-title-border-color: var(--general-dark-border-color);
/* Page Tag Colors */
--page-tag-border-color: var(--general-medium-background-color);
--page-tag-title-color: var(--general-medium-text-color);
--page-tag-text-color: var(--text-color);
--page-tag-hover-text-color: var(--general-dark-text-color);
--page-tag-background-color: var(--dark-color-2), 0.2;
--page-tag-hover-background-color: var(--general-dark-background-color);
/* Page Option Colors */
--page-option-text-color: var(--general-button-text-color);
--page-option-hover-text-color: var(--general-hover-button-text-color);
--page-option-background-color: var(--general-button-background-color);
--page-option-hover-background-color: var(--general-hover-button-background-color);
/* Footer Colors */
--footer-text-color: var(--general-medium-text-color);
--footer-background-color: var(--general-medium-background-color);
--license-background-color: var(--light-color-1);
--license-text-color: var(--dark-color-3);
--license-link-color: var(--license-text-color);
/* Sidebar Colors */
--sidebar-handle-text-color: var(--general-dark-text-color);
--sidebar-handle-background-color: var(--general-dark-background-color);
--sidebar-background-color: var(--light-color-1);
--sidebar-media-background-color: var(--text-color), 0.15;
--sidebar-media-icon-color: var(--dark-color-3);
--sidebar-title-background-color: var(--general-dark-background-color), 0.5;
--sidebar-title-text-color: var(--general-dark-text-color);
--sidebar-title-shadow-color: var(--general-shadow-color);
--sidebar-text-color: var(--text-color);
--sidebar-hover-text-color: var(--sidebar-text-color);
--sidebar-border-color: var(--general-light-border-color);
--sidebar-hover-background-color: var(--text-color), 0.15;
/* Action Colors */
--action-area-border-color: var(--general-light-border-color);
--action-area-subtext-color: var(--text-color), 0.75;
--action-area-info-background-color: var(--general-medium-background-color);
--action-area-info-text-color: var(--general-medium-text-color);
--page-source-background-color: var(--general-light-background-color);
--page-source-text-color: var(--general-light-text-color);
/* Edit Area Colors */
--edit-area-background-color: var(--dark-color-2), 0.15;
--edit-area-text-color: var(--text-color);
--edit-area-textarea-text-color: var(--general-light-text-color);
--edit-area-textarea-background-color: var(--general-light-background-color);
--edit-area-textarea-border-color: var(--general-dark-border-color);
--edit-area-info-background-color: var(--action-area-info-background-color);
--edit-area-info-text-color: var(--action-area-info-text-color);
--edit-area-button-background-color: var(--general-button-background-color);
--edit-area-button-text-color: var(--general-button-text-color);
--edit-area-hover-button-background-color: var(--general-hover-button-background-color);
--edit-area-hover-button-text-color: var(--general-hover-button-text-color);
/* Hovertip Colors */
--hovertip-background-color: var(--general-light-background-color);
--hovertip-text-color: var(--general-light-text-color);
--hovertip-border-color: var(--general-dark-border-color);
/* Image Block Colors */
--imageblock-caption-background-color: var(--general-light-background-color);
--imageblcok-caption-text-color: var(--general-light-text-color);
--imageblock-shaodw-color: 0, 0, 0, 0;
--imageblock-border-color: var(--general-medium-border-color);
/* Header & Horizon Colors */
--h1-color: var(--text-color);
--h2-color: var(--text-color);
--h3-color: var(--text-color);
--h4-color: var(--text-color);
--h5-color: var(--text-color);
--h6-color: var(--text-color);
--hr-color: var(--dark-color-1);
/* Tabview Colors */
--tabview-border-color: var(--general-dark-border-color);
--tabview-button-background-color: var(--general-light-background-color);
--tabview-button-text-color: var(--general-light-text-color);
--tabview-hover-button-background-color: var(--general-medium-background-color);
--tabview-hover-button-text-color: var(--general-medium-text-color);
--tabview-selected-button-background-color: var(--general-dark-background-color);
--tabview-selected-button-text-color: var(--general-dark-text-color);
--tabview-horizon-color: var(--dark-color-3), 0.65;
--tabview-content-background-color: var(--general-light-background-color), 0.25;
--tabview-content-text-color: var(--general-light-text-color);
/* Table Colors */
--table-border-color: var(--general-strong-border-color);
--table-header-background-color: var(--general-medium-background-color);
--table-header-text-color: var(--general-medium-text-color);
--table-background-color: var(--light-color-1);
--table-text-color: var(--text-color);
/* Blockquote Colors */
--blockquote-background-color: var(--general-light-background-color);
--blockquote-text-color: var(--general-light-text-color);
--blockquote-shadow-color: 0, 0, 0, 0;
--blockquote-border-color: var(--general-medium-border-color);
/* Code Block Colors */
--code-block-background-color: var(--general-light-background-color);
--code-block-text-color: var(--general-light-text-color);
--code-block-border-color: var(--general-strong-border-color);
--code-block-default-color: var(--general-light-text-color);
--code-block-code-color: var(--code-block-default-color);
--code-block-brackets-color: var(--code-block-default-color);
--code-block-comment-color: 64, 144, 64;
--code-block-quotes-color: 50, 50, 230;
--code-block-string-color: var(--code-block-quotes-color);
--code-block-identifier-color: var(--code-block-text-color);
--code-block-builtin-color: 0, 136, 136;
--code-block-reserved-color: 85, 85, 221;
--code-block-inlinedoc-color: 0, 0, 255;
--code-block-var-color: var(--code-block-comment-color);
--code-block-url-color: var(--code-block-inlinedoc-color);
--code-block-special-color: 0, 0, 136;
--code-block-number-color: 128, 0, 0;
--code-block-inlinetags-color: 153, 68, 153;
--code-block-gutter-background-color: var(--general-dark-background-color);
--code-block-gutter-color: var(--general-dark-text-color);
/* TOC Colors */
--toc-background-color: var(--general-light-background-color);
--toc-text-color: var(--general-light-text-color);
--toc-border-color: var(--general-strong-border-color);
/* Note Colors */
--note-background-color: 255, 242, 114;
--note-text-color: 24, 27, 27;
--note-border-color: 24, 27, 27, 0.5;
/* Footnote Block Colors*/
--footnote-block-background-color: var(--dark-color-2), 0.18;
--footnote-block-text-color: var(--text-color);
--footnote-block-border-color: var(--general-dark-border-color);
/* Rating Module Colors */
--rating-background-color: var(--general-light-background-color);
--rating-text-color: var(--general-light-text-color);
--rating-rateup-color: var(--accept-color);
--rating-ratedown-color: var(--warning-color);
--rating-cancel-color: var(--neutral-color);
--rating-rateup-text-color: var(--accept-text-color);
--rating-ratedown-text-color: var(--warning-text-color);
--rating-cancel-text-color: var(--neutral-text-color);
--rating-info-color: var(--dark-color-3);
--rating-info-text-color: var(--light-color-2);
--rating-border-color: var(--general-dark-border-color);
/* Popups Colors */
--popup-fader-color: var(--general-shadow-color), 0.65;
--popup-background-color: var(--general-light-background-color);
--popup-text-color: var(--general-light-text-color);
--popup-title-background-color: var(--general-dark-background-color);
--popup-title-text-color: var(--general-dark-text-color);
--popup-border-color: var(--general-strong-border-color);
--popup-button-text-color: var(--general-button-text-color);
--popup-button-background-color: var(--general-button-background-color);
--popup-hover-button-text-color: var(--general-hover-button-text-color);
--popup-hover-button-background-color: var(--general-hover-button-background-color);
--popup-tip-color: var(--light-color-2);
--popup-loading-color: var(--dark-color-2);
/* The 4 */
--lightblock-background-color: var(--general-light-background-color);
--lightblock-text-color: var(--general-light-text-color);
--darkblock-background-color: var(--general-dark-background-color);
--darkblock-text-color: var(--general-dark-text-color);
--styled-quote-background-color: var(--general-light-background-color);
--styled-quote-text-color: var(--general-light-text-color);
--styled-quote-border-color: var(--general-dark-border-color);
--dark-styled-quote-background-color: var(--general-dark-background-color);
--dark-styled-quote-text-color: var(--general-dark-text-color);
--dark-styled-quote-border-color: var(--light-color-2);
}
[[/module]]
[[module CSS]]
:root {
/* Font Set */
--body-font: 'Noto Sans JP', verdana, arial, helvetica, sans-serif;
--header-font: 'Fantasque Sans Mono', monospace;
--title-font: 'Fantasque Sans Mono', 'Noto Sans JP', "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica;
--mono-font: 'Fantasque Sans Mono', monospace;
/* Header Vs */
--main-header-height: 8rem;
--main-header-height-on-mobile: 8rem;
--header-height: calc(var(--main-header-height) + var(--topbar-height));
--header-width: 65rem;
--header-margin: max(calc((100% - var(--header-width)) / 2), 0px);
--logo-image: url("https://br-jpwiki.github.io/files/image/JP_Logo.svg");
--header-title: "The Backrooms JP";
--header-title-font-size: 2.65rem;
--header-title-font-size-on-mobile: 1.6rem;
--header-subtitle: "ようこそ、再訪の空間へ。";
--header-subtitle-font-size: 1rem;
--header-subtitle-font-size-on-mobile: 0.6rem;
--search-icon-width-on-mobile: 2.5rem;
/* Topbar Vs */
--topbar-height: 2rem;
--topbar-height-on-mobile: 3.2rem;
--topbar-font-size: 0.8rem;
--topbar-font-size-on-mobile: 1rem;
/* Account Vs */
--account-drop-border-width: var(--topbar-drop-border-width);
/* Content Vs */
--body-width: 48rem;
--body-margin: max(calc((100% - var(--body-width)) / 2), 1rem);
--content-font-size: clamp(0.87rem, calc(0.83rem + 0.195vw), 1rem);
/* Sidebar Vs */
--sidebar-width: 18rem;
--sidebar-width-on-mobile: 15rem;
/* Image Block Vs */
--imageblock-border-width: 0.15rem;
/* Tabview Vs */
--tabview-border-width: calc(1rem / 15);
/* Tabel Vs */
--table-border-width: calc(2rem / 15);
/* Blockquote Vs */
--blockquote-border-width: calc(2rem / 15);
/* Popup Vs */
--popup-tip-content: "(空白部分をクリックしてウィンドウを閉じる)";
}
[[/module]]
本文のフォントは Noto Sans JP。
等幅フォントは Fantasque Sans Mono。
ページリビジョン: 7, 最終更新: 11 Feb 2026 04:27