20260405 1
/* source: http://ah-sandbox.wikidot.com/component:collapsible-sidebar-x1 */
 
#top-bar .open-menu a {
        position: fixed;
        bottom: 0.5em;
        left: 0.5em;
        z-index: 15;
        font-family: san-serif;
        font-size: 30px;
        font-weight: 700;
        width: 30px;
        height: 30px;
        line-height: 0.9em;
        text-align: center;
        border: 0.2em solid #888 !important;
        background-color: #fff !important;
        border-radius: 3em;
        color: #888 !important;
        text-decoration: none!important;
}
 
@media (min-width: 768px) {
 
    .mobile-top-bar {
        display: block;
    }
 
    .mobile-top-bar li {
        display: none;
    }
 
    #main-content {
        max-width: 708px;
        margin: 0 auto;
        padding: 0;
        transition: max-width 0.2s ease-in-out;
    }
 
    #side-bar {
        display: block;
        position: fixed;
        top: 0;
        left: -25em;
        width: 17em;
        height: 100%;
        background-color: rgb(184, 134, 134);
        overflow-y: auto;
        z-index: 10;
        padding: 1em 1em 0 1em;
        -webkit-transition: left 0.5s ease-in-out 0.1s;
        -moz-transition: left 0.5s ease-in-out 0.1s;
        -ms-transition: left 0.5s ease-in-out 0.1s;
        -o-transition: left 0.5s ease-in-out 0.1s;
        transition: left 0.5s ease-in-out 0.1s;
    }
 
    #side-bar:after {
        content: "";
        position: absolute;
        top: 0;
        width: 0;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.2);
 
    }
 
    #side-bar:target {
        display: block;
        left: 0;
        width: 17em;
        margin: 0;
        border: 1px solid #dedede;
        z-index: 10;
    }
 
    #side-bar:target + #main-content {
        left: 0;
    }
 
    #side-bar:target .close-menu {
        display: block;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3) 1px 1px repeat;
        z-index: -1;
    }
}

*基本的にSCP-3222-JPのソースコードを参照して解説します。

テーマ切り替え

(ここはコピペで問題ありません)

[[module ListPages offset="@URL|0" range="."]]
[[%%content{0}%%include :scp-wiki:theme:basalt |darkmode=a |hidetitle=a]]
%%content{2}%% [!--共通CSS--]
%%content{3}%% [!--ダークテーマ--]
[[/module]]

[[module ListPages limit="@URL|0" range="." urlAttrPrefix="accessibility"]]
[[%%content{0}%%include :scp-wiki:theme:basalt |centertitle=a]]
%%content{2}%% [!--共通CSS--]
%%content{4}%% [!--通常テーマ--]
[[/module]]

冒頭のこれはページ遷移単一化構文の応用です。ページ遷移単一化構文では、%%content{2}%%*が<1ページ目の本文>、%%content{3}%%が<2ページ目の本文>、%%content{4}%%が<3ページ目の本文>、のように対応しています。

ここでは、記事本文を<全ページ共通部分>に置き、共通CSSを1ページ目に、ダークテーマを2ページ目に、通常テーマを3ページ目に置いています。1つ目のListPagesモジュールで1ページ目と2ページ目、2つ目のListPagesモジュールで1ページ目と3ページ目を呼び出すことで、ページ遷移によってテーマ切り替えが実現します。include構文に入っている%%content{0}%%はおまじないです。

カスタマイズ

共通CSS

:root {
    --header-title: "金玉蹴撃";
    --header-subtitle: "努力・未来・A BEAUTIFUL STAR";
    --UI-font: var(--body-font);
    --main-content-width: 55rem;
}

共通CSS冒頭の--header-title--header-subtitleで左上に表示される文字を変更しています(SCP-3222-JPでは訓戒に倣ってサブタイトルが非表示になっています)。ENのテーマをインクルードしているので、日本語にするにはそれぞれ「SCP財団」「確保・収容・保護」を指定します。

サブタイトルを表示するには、/* Admo-like Custom */の直下にある

#header h1 a span::after {
    display: none;
}

の記述を削除します。

ダークモード

:root {
    --basalt-primary-color: 8, 5, 0;
    --basalt-secondary-color: 11, 9, 0;
    --basalt-tertiary-color: 51, 51, 51;
    --basalt-bright-element-color: 187, 153, 51;
    --basalt-dark-element-color: 153, 119, 51;

CSS変数で重要なのは以上の5つくらいだと思います。これらはテーマの各要素の配色を決定していて、3個の数字の組は色コードを表しています。なかでも、--basalt-bright-element-color--basalt-dark-element-colorは彩度が高い色なので要検討です(brightはリンクの色など、darkは訪問済リンクの色などで見られます)。色コードの調整はこちらのページが役立ちます(外部サイト)。

CSS変数の列の一番後ろにくっついている--three-colorはACSの黄色を記事のテーマカラーに揃えるための記述なので、適宜変更するか、削除してください。

/* Admo-like Custom */の直下にある

@media only screen and (min-width: 1025px) {
body {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.67) 0%, rgb(var(—basalt-primary-color)) 15% 85%, rgba(0, 0, 0, 0.67) 100%), url(http://scp-jp-storage.wdfiles.com/local--files/file:5722815-112-f95z/3222jp-backdrop.webp);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
}


の青字部分でフルスクリーン時の背景の設定をしています。url()内のリンクを任意の画像に置き換えてください。緑字の数字は0~1の範囲で変更できます。値が大きいほど背景画像が暗くなります。使用する画像の明度に合わせて調整してください。

アクセシビリティモード

SCP-3222-JPではアクセシビリティモードで大タイトルを非表示化しています。この機能が不要なら、

:is(.table1, .table2, .table3, .table4, .table5, .table6) {
    --basalt-th-background-color: var(--basalt-UI-dark-palette);
    --basalt-th-text-color: var(--basalt-light-text-color);
}

以外の箇所は削除します。また、上記のListPagesの2個目の中のcentertitle=ahidetitle=aに変えます。さらに、ダークモードとアクセシビリティモードを行き来するため、大タイトルのリンクを相互にしなければなりません。このあたりはSCP-3772-JPの方が参考になると思います。

特に明記しない限り、このページのコンテンツは次のライセンスの下にあります: Creative Commons Attribution-ShareAlike 3.0 License