DJK

このページはコンポーネントページです

Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。

評価: 0

クレジット

タイトル: DJK
著作者: djkaktus djkaktus
作成年: 2021
参照版: rev. 74 (2025年09月12日)
ソース: https://scp-wiki.wikidot.com/component:djk

翻訳者: oplax-counterpoint oplax-counterpoint
翻訳年: 2025

[フレーム]

評価: 0

任意のwikiで:

[[include :scp-jp:component:djk]]

皆さんこんにちは。djkaktus です。これは、私が自分の標準フォーマットを気に入ったものに更新するたびに、私の140個以上のページを全て更新するべく精力的に働いてくれていた Elenee FishTruck Elenee FishTruck の苦痛を取り払うために使用する個人的なコンポーネントです。これにより、私はただ1箇所から全てを編集できるようになります。

このコンポーネントは次のことを行います:

1) Black Highlighterをページに追加します(我らがWoedに感謝)
2) Black HighlighterをBHL Penumbraテーマで修正します(Estrellaに感謝)
3) BHL Penumbraにたくさんの色変更を加えて、私が非常に気に入っているレトロな雰囲気にします。
4) BHL Penumbraの変更に合わせたACSカスタマイズを追加します
5) フェードイン、折りたたみサイドバー、ACSアニメーションコンポーネントを追加します
6) これらすべてを私の思うままに変更できるようにします

私は、自分の記事の大部分にとって、それを最もよく表すテーマを見つけるよう常に努力しています。このコンポーネントによって、私は毎回何かを変更するたびに100記事分の更新をする必要なく、その理想に近づくことができます。

(English)
Because of localization CSS/theme/component/font issues, esp. the info module, credit module, and ACS, we translator changed the source as follows:

Translated all documents.
All includes are changed to local versions.
Added Japanese font setting for --body-font and --title-font.
Removed line-height setting in .level of ACS.
Added color setting for page dialogs (.wikisys--template-dialog box, displayed above).
Added this translator's note.

(日本語)
ローカライズに際してのCSS/テーマ/コンポーネント/フォントの問題のために、以下の点を変更しています。

ドキュメントを全て翻訳しました。
読み込まれるコンポーネントやテーマを全て日本語版に変更しました。
日本語フォント設定を--body-fontと--title-fontに追加しました。
.levelのline-height設定を削除しました。
コンポーネントページ上部に表示されているダイアログボックスの色設定を追加しました。
このTranslator's noteを追加しました。

:root{
 --header-title: "THE FOUNDATION";
 --header-subtitle: "財団収容部門";
 --lgurl: url(https://scp-jp-storage.wdfiles.com/local--files/file%3A9042763-233-7q16/scpnewlogo.png);
 --white-monochrome:15, 15, 15;
 --pale-gray-monochrome:35, 35, 35;
 --light-pale-gray-monochrome:35, 35, 35;
 --very-light-gray-monochrome:50, 50, 52;
 --light-gray-monochrome:220, 212, 208;
 --gray-monochrome:229, 223, 220;
 --dark-gray-monochrome:239, 235, 230;
 --black-monochrome:248, 246, 244;
 
 --accentColor:134, 24, 9;
 --background-gradient-color: var(--light-gray-monochrome);
 --swatch-menubg-dark-color: var(--very-light-gray-monochrome);
 --swatch-text-tertiary-color: var(--accentColor);
 --ui-button-hover-txt: var(--black-monochrome);
 
 --body-font: Inter, Verdana, Geneva, "Helvetica Neue", Helvetica, Arial, "BIZ UDPGothic", "M Plus 1p", sans-serif;
 --title-font: "Josefin Sans", "M Plus 1p", sans-serif;
 
 /*-- modal --*/
 --modal-header-txt: var(--black-monochrome);
 --modal-header-bg: var(--white-monochrome);
 
 /*-- footnote --*/
 --hoverblock-header-txt: var(--black-monochrome);
 --hoverblock-bg: var(--black-monochrome);
}#header{
 --search-icon-hover-color: var(--black-monochrome);
 --search-icon-hover-bg-color: var(--swatch-primary-darkest);
 --login-myaccount-hover-color: var(--black-monochrome);
 --login-dropdown-text-hover-color: var(--black-monochrome);
}#headerh1a::before,
#headerh2span::before{content:none;
}#top-bar{
 --dropdown-bg-color: var(--dark-gray-monochrome), 0.9;
}#side-bar, #interwiki{
 --sidebar-links-hover-text-color: var(--black-monochrome);
 --sidebar-collapsible-fld-link-hover-color: var(--black-monochrome);
 --sidebar-collapsible-fld-arrow-hover-color: var(--sidebar-collapsible-fld-link-hover-color);
}#main-content{
 --tables-header-txt: var(--black-monochrome);
 --footnotes-footer-title-text-color: var(--black-monochrome);
}:is(#breadcrumbs,.pseudocrumbs) a:is(:hover,:active,:focus,:focus-within) {color: rgb(var(--black-monochrome));
}#page-contentdiv.warning-top-box>h1{color: rgb(var(--black-monochrome));
}
/*Translator's Note: 
 line-heightfor.levelisdisabledforJapaneseACS/Fontissues. */
 
.scp-image-block{border:solid0.5rem rgb(var(--pale-gray-monochrome));
 border-bottom:solid0rem rgb(var(--pale-gray-monochrome));
 box-shadow:0rem 0.26rem 0rem 0rem rgb(var(--accentColor));
 box-sizing: border-box;
}.scp-image-block.scp-image-caption{background-color: rgb(var(--pale-gray-monochrome));
 border:solid0.25rem rgb(var(--pale-gray-monochrome));
 color: rgb(var(--black-monochrome));
 font-size:0.875em;
}.anchor{z-index:1;
}#page-content.collapsible-block-folded,
#page-content.collapsible-block-unfolded-link{margin:0;
 background:transparent;
}sup{vertical-align:top;
 position:relative;
 top: -0.5em;
}.anom-bar-container{
 --five-color: var(--accentColor);
 --four-color: var(--accentColor);
 --three-color: var(--accentColor);
 --two-color: var(--accentColor);
 --one-color: var(--accentColor);
}.page-tags{
 --pagetags-title-text: var(--black-monochrome);
}div[id*=page-options-bottom]>a{
 --ui-icon-color: var(--black-monochrome);
 --ui-icon-hover-color: var(--black-monochrome);
}#action-area{
 --swatch-text-secondary-color: var(--black-monochrome);
}#revision-listspan{
 --pager-selected-link: var(--swatch-text-secondary-color);
 --pager-link-hover: var(--pager-selected-link);
}#footer,
#license-area{
 --hover-link-color: var(--link-color);
 --swatch-text-secondary-color: var(--black-monochrome);
 --white-monochrome: var(--black-monochrome);
}.codepre, .codep, .code{background-color: rgb(var(--pale-gray-monochrome));
 color: rgb(var(--black-monochrome));
}
 
/*---- AYERSINFOBARMOD ----*/
#page-content.info-container.translation_block{display:none;
}#page-content.info-container.collapsible-block-link,
#page-content.info-container:hover.collapsible-block-link{line-height:1.6em;
}#page-content.info-container.collapsible-block-folded,
#page-content.info-container.collapsible-block-unfolded-link{display: grid;
 background: rgb(var(--bright-accent));
}#page-content.info-container.collapsible-block-folded.collapsible-block-link,
#page-content.info-container.collapsible-block-link{
 -webkit-mask: unset;
 mask: unset;
 background:transparent;
 grid-column:1;
 grid-row:1;
 opacity:0;
}#page-content.info-container.collapsible-block-folded::before,
#page-content.info-container.collapsible-block-unfolded-link::before{
 --wght:800;
 content: "DJK";
 color:#fff;
 font-family: var(--body-font);
 display:block;
 pointer-events:none;
 grid-column:1;
 grid-row:1;
}
 
/*CODEBLOCK*/
.hl-default, .hl-code, .hl-brackets{color: rgb(var(--swatch-text-dark));
}
 
/*SystemDialogPatch (onlyforSCP-JP) */
#page-content.wikisys--template-dialog{border-color: rgb(var(--swatch-menubg-light-color));
 background-color: rgb(var(--swatch-tertiary-color));
}

[フレーム]

評価: 0

blank.png

[フレーム]

クレジット

タイトル: BHL中央寄せヘッダー
著者: ©Woedenaz Woedenaz
原題: Centered Header BHL
作成年: 2021

[フレーム]

評価: 0

これは何

タイトルとロゴが中央寄せになるようヘッダーを再構成します

Sigma-9では機能しません。これはBlack Highlighterのみで機能します。
折りたたみサイドバーかトグルサイドバーと一緒に使用することを強く推奨します。

使い方

1. 下記のコードをコピー。

2. Black Highlighterと他のテーマのincludeの後、記事にペースト。

[[include :scp-jp:component:centered-header-bhl]]

:root{
 /*headermeasurements*/
 --header-height-on-desktop:10rem;
 --header-height-on-mobile:10rem;
 --header-h1-font-size: clamp(2rem, 5vw, 2.8125rem);
 --header-h2-font-size: clamp(0.875rem, 3vw, 0.9375rem);
 --logo-image: url("https://scp-jp.github.io/Black-Highlighter/img/logo.svg");
 }#header{
 --search-textbox-text-color: var(--swatch-secondary-color);
 background:none;
 }#header::before{content: " ";
 position:absolute;
 width:100%;
 height:100%;
 left:0;
 top:0.75rem;
 background-image: var(--logo-image);
 background-repeat:no-repeat;
 background-position:center0;
 background-size:auto calc(var(--header-height-on-desktop) - 1.5rem);
 opacity:0.8;
 pointer-events:none;
 }#headerh1,
 #headerh2{margin:0;
 padding:0;
 width:100%;
 height: var(--header-height-on-desktop);
 display: flex;
 align-items:center;
 justify-content:center;
 display: flex;
 align-items:center;
 justify-content:center;
 }#headerh1a,
 #headerh1a::before,
 #headerh2span,
 #headerh2span::before{margin:0;
 padding:0;
 z-index:0;
 display:block;
 text-align:center;
 }#headerh1{z-index:1;
 }#headerh1a::before,
 #headerh1a::after{content: var(--header-title);
 }#headerh1a::before{color: rgb(var(--swatch-text-tertiary-color));
 z-index: -1;
 -webkit-text-stroke:0.325rem rgb(var(--swatch-text-dark));
 }#headerh1a::after{color: rgb(var(--swatch-headerh1-color));
 z-index:1;
 }#headerh2{z-index:0;
 text-transform:uppercase;
 pointer-events:none;
 }#headerh2span{margin-top: calc(var(--header-height-on-mobile)/2 + var(--header-h1-font-size)/1.6 - 2em);
 }#headerh2span::before,
 #headerh2span::after{
 --wght:600;
 content: var(--header-subtitle);
 position:absolute;
 left:50%;
 transform: translateY(-50%) translateX(-50%);
 width:100%;
 text-align:center;
 }#headerh2span::before{
 -webkit-text-stroke:0.25rem rgb(var(--swatch-text-dark));
 }#headerh2span::after{color: rgb(var(--swatch-headerh2-color));
 z-index:1;
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{color: rgba(0, 0, 0, 0);
 }@media (min-width: 36rem) {#login-status{flex-grow:1;
 left:3%;
 right: initial;
 }#login-status::before{
 --mask-image:none;
 background-color:transparent;
 }#login-status:not(:focus-within) {color: rgb(var(--login-line-divider-color));
 -webkit-user-select: initial;
 -moz-user-select: initial;
 -ms-user-select: initial;
 user-select: initial;
 }#login-status#account-topbutton,
 #login-status:not(:focus-within) #account-topbutton{
 --clip-path:
 polygon( 00, 100%0, 100%100%, 0100% );
 background-color: rgba(var(--login-arrow-color), 0);
 
 }#login-status#account-topbutton::before{
 --clip-path:
 polygon( 30%35%, 70%35%, 50%60%, 50%60% );
 --mask-image: initial;
 content: "";
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color: rgba(var(--login-arrow-color), 1);
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#login-status#account-topbutton::before,
 #login-status:not(:focus-within) #account-topbutton::before,
 #login-status:not(:focus-within) #account-topbutton:hover::before {
 --clip-path:
 polygon( 30%35%, 70%35%, 50%60%, 50%60% );
 --mask-image: initial;
 }#login-status:not(:focus-within) #account-topbutton::after{display:none;
 }#login-status:not(:focus-within) *:not(#account-topbutton):not([href*="account/messages"]) {
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0100%
 );
 pointer-events:all;
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#login-status:not(:focus-within) *:not(#account-topbutton):not(#account-options):not([href*="account/messages"]) {opacity:1;
 }#login-status#my-account{
 --wght:300;
 }#account-options{background: var(--gradient-header);
 }#search-top-box{top:1.5em;
 right:3%;
 background: rgba(var(--search-focus-textbox-bg-color), 0.4);
 }#search-top-box:focus-within ~ #login-status{opacity:1;
 }#search-top-box::after{transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 transition:
 background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
 clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1),
 -webkit-clip-path 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }#search-top-box:not(:focus-within)::after{
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0%100%
 );
 background-color: rgba(var(--search-icon-bg-color, --dark-accent), 1);
 -webkit-clip-path: var(--clip-path);
 clip-path: var(--clip-path);
 }#search-top-box:not(:focus-within):hover::after{
 --clip-path:
 polygon(
 00,
 100%0,
 100%100%,
 0100%
 );
 background-color: rgb(var(--search-icon-hover-bg-color));
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) {max-width: var(--search-width);
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="text"]{max-width: var(--search-width);
 padding:0 var(--search-height) 01em;
 outline-width:0;
 background-color: rgb(var(--search-focus-textbox-bg-color), 0.35);
 color: rgba(var(--search-textbox-text-color), 0.4);
 cursor:pointer;
 }#search-top-boxform[id="search-top-box-form"]:not(:focus-within) input[type="submit"],
 #search-top-boxform[id="search-top-box-form"]:focus-withininput[type="submit"]{pointer-events:all;
 border:none;
 }
 
 }
 
 #page-title::after,
 .meta-title::after,
 #page-title::before,
 .meta-title::before{content: "";
 flex-grow:1;
 height:0.0625rem;
 background: rgb(var(--swatch-primary));
 }#page-title::before,
 .meta-title::before{margin:auto1.25rem autoauto;
 }

[フレーム]

評価: 0

blank.png

[フレーム]

クレジット

タイトル: BHLトグルサイドバー
著者: ©Woedenaz Woedenaz
原題: Toggle Sidebar BHL
作成年: 2021

[フレーム]

評価: 0

これは何

サイトのモバイル版と同様に、サイドバーをデフォルトで非表示にしてコーナーボタンで開閉できるようにします。

Sigma-9では機能しません。これはBlack Highlighterのみで機能します。
Sigma-9で使用する場合は、代わりにEstrellaYoshteによるこのコンポーネントを使用して下さい
必要に応じて、BHLとSigma-9の両方で機能する折りたたみサイドバーもあります。
折りたたみサイドバーはクリックではなくホバーで機能し、トグルサイドバーよりもわずかに見やすくなっています。

使い方

1. 下記のコードをコピー。

2. Black Highlighterと他のテーマのincludeの後、記事にペースト。

[[include :scp-jp:component:toggle-sidebar-bhl]]

3. (オプション) テーマを使用する場合、トグルボタンのスタイル調整。

必要に応じて、ボタンのスタイルを設定するための5つのCSS変数もあります。
色については、こちらにある利用可能なBHLのCSS変数を使用することを強く推奨します。

:root {
--toggle-button-bg: hex/rgb/hsl color;
--toggle-border-color: hex/rgb/hsl color;
--toggle-border-width: px/rem/em;
--toggle-icon-color: hex/rgb/hsl color;
--toggle-roundness: percentage;
}

@supports(display: grid) {
 :root{
 --sidebar-width-on-desktop: calc((var(--base-font-size) * (14 / 15)) * 19);
 --body-width-on-desktop:45.75rem;
 }
 @mediaonlyscreenand (min-width:769px) {
 #side-bar .close-menu {
 display: block;
 position:fixed;
 top: unset;
 bottom:0.5rem;
 left:0.5rem;
 width:3rem;
 height:3rem;
 background: unset;
 opacity:1;
 pointer-events:all;
 z-index: -1;
 }#side-bar.close-menuimg{color:transparent;
 }#side-bar.close-menu::before,
 #side-bar.close-menu::after{content: "";
 box-sizing: border-box;
 position:fixed;
 display:block;
 top: unset;
 bottom:0.5rem;
 left:0.5rem;
 width:3rem;
 height:3rem;
 padding:0;
 margin:0;
 text-align:center;
 pointer-events:all;
 cursor:pointer;
 transition:
 opacity var(--sidebar-transition-timing);
 }#side-bar.close-menu::before{
 --mask:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' id='Hamburger' x='0' y='0' baseProfile='tiny' overflow='visible' version='1.2' viewBox='003232' xml:space='preserve'%3E%3Cpath d='M4 10h24c1.102-.92-2s-.9-2-2-2H4c-1.10-2.9-22s.9222zm24 4H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2zm0 8H4c-1.10-2.9-22s.9222h24c1.102-.92-2s-.9-2-2-2z'/%3E%3C/svg%3E");
 z-index: -1;
 background-color: var(--toggle-icon-color, rgb(var(--sidebar-links-text))) !important;
 -webkit-mask: var(--mask);
 mask: var(--mask);
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
 -webkit-mask-position:50%50%;
 mask-position:50%50%;
 -webkit-mask-size:60%;
 mask-size:60%;
 }#side-bar.close-menu::after{z-index: -2;
 background-color: var(--toggle-button-bg, rgb(var(--sidebar-bg-color))) !important;
 border-radius: var(--toggle-roundness, 50%);
 border: var(--toggle-border-color, rgb(var(--sidebar-links-text))) var(--toggle-border-width, 0.25rem) solid;
 }#side-bar:focus-within.close-menu,
 #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu{pointer-events:none;
 }#side-bar:focus-within.close-menu::before,
 #side-bar:focus-within.close-menu::after{opacity:0;
 pointer-events:none;
 }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu::before,
 #side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover.close-menu::after{opacity:0;
 pointer-events:none;
 }#side-bar{display:block;
 position:fixed;
 top:0;
 left: calc(var(--sidebar-width-on-desktop)*-1);
 z-index:10;
 transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 height:100%;
 overflow-y:auto;
 overflow-x:hidden;
 margin-top:0;
 }#side-bar:focus-within{left:0;
 }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover{left:0;
 }#side-bar.side-block{margin-top:1rem;
 background-color: rgb(0, 0, 0, 0);
 border-radius:0;
 border-left-width:0px;
 border-right-width:0px;
 }#main-content::before{content: "";
 display:block;
 position:fixed;
 top:0;
 right:0;
 z-index: -1;
 opacity:0;
 transition:
 opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
 width 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 margin-left: var(--sidebar-width-on-desktop);
 background: rgba(var(--swatch-menubg-black-color), .3) 1px1pxrepeat;
 padding-right:0;
 width:100%;
 height:100vh;
 pointer-events:none;
 z-index:99;
 }#side-bar:focus-within ~ #main-content::before{width: calc(100% - var(--sidebar-width-on-desktop));
 opacity:1;
 pointer-events:all;
 }#side-bar:not(:has(.close-menu:hover)):not(:focus-within):hover ~ #main-content::before{width: calc(100% - var(--sidebar-width-on-desktop));
 opacity:1;
 pointer-events:all;
 }@supports (-moz-appearance:none) and (background-attachment:local) and (not (-moz-osx-font-smoothing:auto)) {#side-bar{padding:inherit;
 }}#content-wrap{display: flex;
 flex-direction: row;
 width: calc(100vw - (100vw - 100%));
 min-height: calc(100vh - calc(var(--final-header-height-on-desktop, 10.125rem)));
 flex-grow:2;
 height:auto;
 position:relative;
 margin:0auto;
 max-width:inherit;
 }#main-content{width:100%;
 position: initial;
 max-height:100%;
 padding:2rem 1rem;
 max-width: var(--body-width-on-desktop, 45.75rem);
 margin:0auto;
 }#page-content{max-width: min(90vw, var(--body-width-on-desktop, 45.75rem));
 }@supports (-webkit-hyphens:none) {#side-bar{transition:left500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
 padding-right 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
 background-color 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 padding-right:0;
 background-color: rgb(0, 0, 0, 0);
 pointer-events:all;
 overflow-x:visible;
 overflow-y:visible;
 z-index:999;
 }#side-bar::-webkit-scrollbar{opacity:0;
 -webkit-transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1) 100ms;
 }#side-bar.close-menu::before{z-index:999;
 }#side-bar.close-menu::after{z-index:998;
 }#side-bar:hover.close-menu::before,
 #side-bar:hover.close-menu::after{opacity:0;
 }#side-bar:hover{left:0;
 background-color: rgba(var(--swatch-menubg-color), 1);
 padding-right:0;
 }#side-bar:hover::-webkit-scrollbar {
 opacity: 1;
 }#side-bar:hover~#main-content::before{width: calc(100% - var(--sidebar-width-on-desktop));
 opacity:1;
 pointer-events:all;
 }
 }
 }
 }
}

[フレーム]

これはACSヘッダー の読み込み時にアニメーション表示を行わせるコンポーネントです。

使い方:

以下の記述を任意の場所に挿入してください。

[[include :scp-jp:component:acs-animation]]

これで完了です。

例: SCP-5935

注:

--timeScaleと--timeDelayの2つの要素がアニメーションの表示を制御します。例えば:

[[module CSS]]
:root {
--timeScale: 2;
--timeDelay: 0.5s;
}
[[/module]]

この場合、--timeScaleによってアニメーションの表示速度はデフォルトから2倍遅くなり、--timeDelayによってアニメーションの表示は0.5秒遅れます。初期設定ではtimeScaleは1、timeDelayは0sとなっています。

これらを適用する場合、[[include]]の下部に上記を記述してください。ACSヘッダが構文の最上部に導入されない場合や、他のアニメーションモジュール(例えばFade in モジュール)等と併用される場合は--timeDelayの使用が推奨されます。

- 他のタイプのACSヘッダーとの互換性が存在しない可能性が高くなっているので注意してください。*

*PeppersGhost PeppersGhost 氏が作成したACS Liteと併用する場合には[[include]]の後に以下の記述を挿入してください:

[[module CSS]]
/*-- ACS Lite Animation Compatibility Patch --*/
.anom-bar > .bottom-box::before { display: none; }
.anom-bar > .bottom-box { box-shadow: none!important; }
div.diamond-part { clip-path: none; animation: none; box-shadow: none!important; }
@media (max-width: 480px) {
div.top-right-box { clip-path: polygon(0% -30%, 100% -30%, 100% 130%, 0% 130%); }
}
[[/module]]

- AnAnomalousWriter AnAnomalousWriter 氏の作品から着想を得ています。

ソースコード:

:root{
 --timeScale:1;
 --timeDelay:0s;
}
 
/*Convertingmiddledividerfrombox-shadowto ::beforepseudo-element*/
.anom-bar > .bottom-box{box-shadow:none!important; }.anom-bar > .bottom-box::before{position:absolute;
 content: " ";
 width:100%;
 height:0.5rem;
 background-color: rgb(var(--black-monochrome, 12, 12, 12));
 transform: translateY(-0.74rem);
}
 
/*DIVIDER*/
.anom-bar > .bottom-box::before{animation-name: divider;
 animation-duration: calc(0.74s * var(--timeScale));
 animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.32,.38,.39,.94);
 animation-fill-mode: backwards;
}
 
/*CLASSIFIEDLEVELBARS*/
div.top-center-box > *{animation-name: bar;
 animation-duration: calc(0.45s * var(--timeScale));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}div.top-center-box > :nth-child(1) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.32s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.45s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.61s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.95s * var(--timeScale) + var(--timeDelay)); }
 
/*TOPTEXT*/
div.top-left-box, div.top-right-box{clip-path: polygon( 0% -50%, 150% -50%, 150%100%, 0%100%);
}div.top-left-box > *, div.top-right-box > *{position:relative;
 animation-name: bottomup;
 animation-duration: calc(0.65s * var(--timeScale));
 animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/*CONTAINMENT, DISRUPTION, RISKCLASSES*/
div.text-part > *{clip-path: polygon( 0%0%, 100%0%, 100%100%, 0%100%);
 animation-name: expand2;
 animation-duration: calc(0.5s * var(--timeScale));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.text-part > :nth-child(1) {animation-name: expand1;
}div.text-part > :nth-child(1) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(2) {animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay)); }div.text-part > :nth-child(3) {animation-delay: calc(0.86s * var(--timeScale) + var(--timeDelay)); }div.main-class::before, div.main-class::after{animation-name: iconslide;
 animation-duration: calc(0.45s * var(--timeScale));
 animation-delay: calc(0.8s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}
 /*BOTTOMTEXT*/
div.main-class > *, div.disrupt-class > *, div.risk-class > *{white-space:nowrap;
 animation-name: flowIn;
 animation-duration: calc(0.42s * var(--timeScale));
 animation-delay: calc(0.75s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: ease-out;
 animation-fill-mode: backwards;
}
 
/*-----------------------------------*/
/*-----------------------------------*/
 
/*DIAMOND*/
div.arrows{animation-name: arrowspin;
 animation-duration: calc(0.7s * var(--timeScale));
 animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.quadrants > *{animation-name: fade;
 animation-duration: calc(0.3s * var(--timeScale));
 animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.top-icon, div.right-icon, div.left-icon, div.bottom-icon{animation-name: nodegrow;
 animation-duration: calc(0.4s * var(--timeScale));
 animation-delay: calc(1.4s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.12,.41,.27,.99);
 animation-fill-mode: backwards;
}div.diamond-part{clip-path: polygon( -10%0.37%, 120%0.37%, 120%100%, -10%100%);
 animation-name: diamondBorder;
 animation-duration: calc(0.8s * var(--timeScale));
 animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay));
 animation-iteration-count:1;
 animation-timing-function: cubic-bezier(.32,.38,.39,.94);
 animation-fill-mode: backwards;
 will-change: box-shadow;
}
 
/*MOBILEQUERY*/
@media (max-width: 480px ) {.anom-bar > .bottom-box::before{display:none;
 }.anom-bar > .bottom-box{box-shadow:0 -0.5rem 00 rgb(var(--black-monochrome, 12, 12, 12))!important;
 }div.top-center-box > *{animation-name: bar-mobile;
 animation-duration: calc(0.9s * var(--timeScale));
 }div.top-center-box > :nth-child(1) {animation-delay: calc(0.1s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(2) {animation-delay: calc(0.2s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(3) {animation-delay: calc(0.3s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(4) {animation-delay: calc(0.4s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(5) {animation-delay: calc(0.5s * var(--timeScale) + var(--timeDelay)); }div.top-center-box > :nth-child(6) {animation-delay: calc(0.6s * var(--timeScale) + var(--timeDelay)); }}
 
/*--- MotionAccessibility ---*/
@mediascreenand (prefers-reduced-motion: reduce) {div.anom-bar-container{ --timeScale:0!important; }}
 
/*-------------------------*/
 
@keyframesdivider{from{max-width:0%; }to{max-width:100%; }}@keyframesbar{from{max-width:0%; }to{max-width:100%; }}@keyframesbar-mobile{from{max-height:0%; }to{max-height:100%; }}@keyframesbottomup{from{top:100px; }to{top:0; }}@keyframesexpand1{from{opacity:0; clip-path:inset(0 calc(100% - 0.75rem) 00); }to{opacity:1; clip-path:inset(0); }}@keyframesiconslide{from{opacity:0; transform: translateX(-5rem); }to{opacity:1; transform: translateX(0); }}@keyframesexpand2{from{opacity:0; width:1%; }to{opacity:1; width: calc(100% - 0.25rem); }}@keyframesfade{from{opacity:0; }to{opacity:1; }}@keyframesflowIn{from{opacity:0; transform: translateY(20px); }to{opacity:1; transform: translateY(0); }}@keyframesarrowspin{from{clip-path:circle(0%); transform: rotate(135deg); }to{clip-path:circle(75%); transform: rotate(0deg); }}@keyframesnodegrow{from{transform: scale(0);}to{transform: scale(1);}}@keyframesdiamondBorder{from{box-shadow: -0.5rem -20rem 00 rgb(var(--black-monochrome, 12, 12, 12)); }to{box-shadow: -0.5rem 000 rgb(var(--black-monochrome, 12, 12, 12)); }}

[フレーム]

en コンポーネント

ページリビジョン: 6, 最終更新: 02 Oct 2025 02:37

SCP-JP環境再現サイト

実験、実験、爆発

クレジット

クレジット

これは何

タイトルとロゴが中央寄せになるようヘッダーを再構成します

使い方

1. 下記のコードをコピー。

2. Black Highlighterと他のテーマのincludeの後、記事にペースト。

クレジット

これは何

サイトのモバイル版と同様に、サイドバーをデフォルトで非表示にしてコーナーボタンで開閉できるようにします。

使い方

1. 下記のコードをコピー。

2. Black Highlighterと他のテーマのincludeの後、記事にペースト。

3. (オプション) テーマを使用する場合、トグルボタンのスタイル調整。

使い方:

注:

ソースコード: