クレジット
翻訳責任者: oplax-counterpoint
翻訳年: 2025
著作権者: EstrellaYoshte
作成年: 2023
参照リビジョン: 35
元記事リンク: https://scp-wiki.wikidot.com/component:sigma-plus
参照リビジョン: 35 (2025/02/03)
最終更新日: 24 May 2025 02:03
これはテーマ作成の補助的なレイヤーとして使用するために EstrellaYoshte によって作成されたメタコンポーネントです。
使用するには、以下の構文をページに置いてください。
[[include :pseudo-scp-jp:component:sigma-plus]]
Sigma+はこれ単体で、以下を含むより最近のCSSの慣習やプロパティを使用しながら、元の外観のほとんどを保持しています。
- 拡張可能なCSS変数
- グリッドとフレックスを基にしたレイアウト
- 完全にタブ選択可能なナビゲーション
- RTL (右横書き) への対応
開発者ノート
このコンポーネントの主な目的は、時代遅れになったサイトテーマの基本レイアウトを解消する負担を軽減することです。こうした負担は実装されるカスタマイズの量を制限したり、望むレイアウトを実現するためのCSSの複雑性/オーバーヘッドを大幅に増加させたり、最適化されていないCSSが増えることで状況をさらに悪化させたり、あるいはこれら3つが不適切に組み合わさったりする傾向があります。
Sigma+は互換レイヤーとして可能な限り高いパススルーを維持するために、セマンティックフローおよびビジュアルフローの大部分を再実装するのみに留めていますが、いくつかの例外があります。
- ヘッダーの装飾: ヘッダーおよびページ全体の背景は元々#container-wrapの背景画像でしたが、実際の#headerと#top-barから意味的に分離されていて、サイズやレイアウトの変更 (エンドユーザー設定、ブラウザのデフォルト設定、画面サイズなど) に反応しなくなっていました。そのため、両方のdiv要素のbackground-imageに変更しました。
- Top Bar dropdowns: modified to be better responsive to screen sizes, as well as overriding generally annoying styles from Wikidot's default. Made tab-navigable.
- Rate & Info module: significantly restyled for better semantic separation and easier to modify with variables. Undid Info module's idiosyncratic CSS.
- Tabs: Replaced the spritesheet used to style the tabs with CSS variables. Slightly less annoying to deal with.
訳者ノート
日本語化に際して、以下の変更を加えています。
- メインフォント変更: 本文等の日本語フォントをM PLUS 1に変更しています。この設定は--spj_jafont-base変数によって制御されています。
- フォントサイズ変更: 基本的に日本語フォントは上下幅が大きいため、文字サイズを.82emから.85emに拡大しています。
- 行間隔変更: 日本語フォントに合わせて、行間隔も変更しています。この値は--spj_base-line-height変数で制御されています (デフォルト: 1.5)。
- クレジットモジュール用コード追加: SCP-JPでRateモジュールの代わりに使用されているクレジットモジュールのためのコードを追加しています。
- Jstyles併用時用カスタムプロパティ: 日本語表現用Wiki構文拡張スタイルを使用したい場合は、次のコードをCSSモジュールに挿入してください。この機能のために--spj_lafont-mono, --mono-font変数を用意しています。必要に応じて変更・カスタムしてください。
tt {
font-family: var(--body-font);
}
.tt {
font-family: var(--mono-font);
font-size: 98%;
}
Example

:root {
--header-title: "We don't have a 55";
--sp_header-height: 21.75rem;
}
Source Code:
:where(:root) { --header-title: "SCP財団"; --header-subtitle: "確保、収容、保護"; --spj_jafont-base: "M PLUS 1"; --spj_lafont-base: verdana, arial, helvetica; --spj_lafont-header: "Trebuchet MS", Trebuchet, Verdana, Arial, Helvetica; --spj_lafont-mono: 'Andare Mono', 'Courier New', Courier; --spj_base-line-height: 1.5; --body-font: var(--spj_lafont-base), var(--spj_jafont-base), sans-serif; --header-font: var(--spj_lafont-header), var(--spj_jafont-base); --mono-font: var(--spj_lafont-mono), monospace; /*---------- Sigma-plus-origin properties ----------*/ --sp_header-title-size: min(calc(2.675rem * var(--sp_header-title-scale)), calc(1.25rem * var(--sp_header-title-scale) + 2.5vw)); --sp_header-subtitle-size: min(calc(.875rem * var(--sp_header-subtitle-scale)), calc(0.475rem * var(--sp_header-subtitle-scale) + 1.25vw)); --sp_header-title-scale: 1; --sp_header-subtitle-scale: 1; --sp_header-logo: url(https://scp-jp.github.io/files/util/common/media/component/theme/logo.png); --sp_header-logo-size: 6.25rem; --sp_header-logo-adaptive-size: min(var(--sp_header-logo-size), calc(var(--sp_header-logo-size)*0.575 + 5vw)); --sp_header-height: 8.75rem; --sp_header-gradient-top-color: #000000; --sp_header-gradient-top-stop: .4; --sp_header-gradient-bottom-color: #6B4040; --sp_header-gradient-bottom-stop: .95; --sp_diagonal-stripes-angle: 45deg; --sp_diagonal-stripes-width: .08rem; --sp_diagonal-stripes-gap: .22rem; --sp_diagonal-stripes-color: #FFAFAF09; --sp_top-bar-height: 1.375rem; --sp_top-bar-gradient-top-color: #535353; --sp_top-bar-gradient-bottom-color: #3B3B3B; --sp_top-bar-link-color: #fff; --sp_top-bar-link-hover-color: #a01; --sp_top-bar-link-hover-background: #fff; --sp_dropdown-width: calc(8.25rem + 2.25vw); --sp_dropdown-background: #eee; --sp_dropdown-link-color: var(--sp_top-bar-link-hover-color); --sp_dropdown-link-hover-color: var(--sp_top-bar-link-hover-color); --sp_dropdown-link-background: transparent; --sp_dropdown-link-border: 0.05rem solid #ddd; --sp_dropdown-link-hover-background: var(--sp_top-bar-link-hover-background); --sp_side-bar-width: 14rem; --sp_area-max-width: 62.5rem; --sp_area-min-margin: 1.25rem; --sp_area-comp-margin: max(calc((100vw - var(--sp_area-max-width))/2), var(--sp_area-min-margin)); --sp_final-header-height: calc(var(--sp_header-height) + var(--sp_top-bar-height)); --sp_rate-module-text-color: #FFF; --sp_rate-module-background: #633; --sp_rate-module-sub-color: var(--sp_rate-module-text-color); --sp_rate-module-active-color: var(--sp_rate-module-text-color); --sp_rate-module-button-color: var(--sp_rate-module-background); --sp_rate-module-button-background: #fff6f0; --sp_rate-module-button-hover-color: var(--sp_rate-module-active-color); --sp_rate-module-button-hover-background: var(--sp_rate-module-background); --sp_tab-text-color: #000; --sp_tab-background: #fefefe; --sp_tab-border-color: #a3a3a3; --sp_tab-hover-text-color: var(--sp_tab-text-color); --sp_tab-hover-background: #ffd3d3; --sp_tab-hover-border-color: var(--sp_tab-border-color); --sp_tab-selected-text-color: #fff; --sp_tab-selected-background: #901; --sp_tab-selected-border-color: #65000b; --sp_hovertip-background: #fff; --sp_hovertip-border: 0.05rem solid black; } textarea, input { font-family: inherit; } /* Font patch for SCP-JP */ body { font-family: var(--body-font); font-size: .85em; } #header h1 a { font-family: "BauhausLTDemi", "Arial", var(--spj_jafont-base), sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: var(--header-font); } li, p { line-height: var(--spj_base-line-height); } /*--------------*/ /*--- HEADER ---*/ /*--------------*/ /* unset the faux header bg */ div#container-wrap { background-image: none; } #header { /* Recreating (sans top bar) with gradients */ background-image: /* Diagonal stripes */ repeating-linear-gradient(var(--sp_diagonal-stripes-angle), var(--sp_diagonal-stripes-color), var(--sp_diagonal-stripes-color) var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-width), transparent var(--sp_diagonal-stripes-gap)), /* Header gradient colors */ linear-gradient(to bottom, var(--sp_header-gradient-top-color) calc(var(--sp_header-gradient-top-stop) * var(--sp_header-height)), var(--sp_header-gradient-bottom-color) calc(var(--sp_header-gradient-bottom-stop) * var(--sp_header-height)) ); background-repeat: repeat-x; background-size: auto; background-position: initial; /* De-styling sigma */ padding-bottom: 0; height: auto; width: 100%; max-width: unset; min-height: var(--sp_final-header-height); z-index: initial; /* Grid layout */ display: grid; grid-template-areas: ". login login ." ". . . ." ". h1 search ." ". h2 search ." ". . . ." "top-bar top-bar top-bar top-bar"; grid-template-rows: auto 1fr auto auto 1fr auto; grid-template-columns: var(--sp_area-comp-margin) 1fr auto var(--sp_area-comp-margin); } /* Header logo */ #header::before { content: ""; display: block; background: var(--sp_header-logo) no-repeat center; background-size: contain; grid-row: 2/6; grid-column: 2/3; width: var(--sp_header-logo-adaptive-size); } /*--------------*/ /*--- TOP BAR ---*/ /*--------------*/ #top-bar { grid-area: top-bar; /* De-styling sigma-9 */ position: relative; z-index: initial; top: initial; right: initial; max-width: unset; line-height: unset; height: 100%; font-size: .875em; padding-inline: var(--sp_area-min-margin); box-sizing: border-box; min-height: var(--sp_top-bar-height); /* Recreating top bar image with gradients */ background-image: linear-gradient(to bottom, var(--sp_top-bar-gradient-top-color) 0%, var(--sp_top-bar-gradient-bottom-color) 100%); } #top-bar > div[class*="top-bar"] { max-width: var(--sp_area-max-width); height: 100%; margin: auto; position: static; left: initial; bottom: initial; z-index: initial; } #top-bar ul, #top-bar li { float: none; } #top-bar div[class*="top-bar"] > ul { height: 100%; display: flex; justify-content: end; } #top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a { display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; max-height: unset; border: none; line-height: 1.275; color: var(--sp_top-bar-link-color); padding: 0; padding-inline: calc(var(--sp_dropdown-width)*0.05 + 0.25vw); box-sizing: border-box; } #top-bar :is(.top-bar, .mobile-top-bar) > ul > li > a:hover, #top-bar :is(.top-bar, .mobile-top-bar) > ul > li:is(.sfhover, :hover, :focus-within) > a { color: var(--sp_top-bar-link-hover-color); background: var(--sp_top-bar-link-hover-background); } #top-bar :is(.top-bar, .mobile-top-bar) ul li ul { left: initial; min-width: max(100%, var(--sp_dropdown-width)); width: max-content; background: var(--sp_dropdown-background); box-sizing: border-box; z-index: 3; visibility: visible; pointer-events: none; opacity: 0; } #top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:not(:last-child)) > ul { inset-inline-start: 0; } #top-bar :is(.top-bar, .mobile-top-bar) > ul > li:where(:last-child) > ul { right: initial; inset-inline-end: 0; } #top-bar :is(.top-bar, .mobile-top-bar) ul li:is(.sfhover, :hover, :focus-within) ul { pointer-events: auto; opacity: 1; } #top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a { min-width: max-content; width: 100%; box-sizing: border-box; line-height: 1.5; overflow: initial; max-height: initial; padding: 0.125em 0.75em; border-top: var(--sp_dropdown-link-border); color: var(--sp_dropdown-link-color); background: var(--sp_dropdown-link-background); text-align: start; } #top-bar :is(.top-bar, .mobile-top-bar) ul li ul li a:is(:hover,:focus) { color: var(--sp_dropdown-link-hover-color); background: var(--sp_dropdown-link-hover-background); } #top-bar .open-menu, #top-bar .open-menu > p { display: contents; } #top-bar .open-menu a { z-index: 9; } /*--------------*/ /*--- LOGIN ---*/ /*--------------*/ #login-status { top: initial; right: initial; position: relative; z-index: 3; grid-area: login; text-align: end; padding-block-start: 0.5rem; } #account-options { right: initial; inset-inline-end: 0; inset-block-start: 100%; display: block!important; opacity: 0; pointer-events: none; transition: opacity 0.075s linear; } #account-topbutton:focus + #account-options, #account-options:is(:hover, :focus-within) { opacity: 1; pointer-events: auto; } /* Safari support */ @media not all and (min-resolution:.001dpcm) { @media { #account-topbutton:hover + #account-options { opacity: 1; pointer-events: auto; } }} /*--------------*/ /*--- SEARCH ---*/ /*--------------*/ #search-top-box { grid-area: search; position: relative; right: initial; top: initial; width: auto; display: flex; align-items: center; text-align: unset; z-index: initial; } #search-top-box-form { display: flex; gap: 0.325rem; } #search-top-box-input, #search-top-box-form input[type=submit] { margin: 0; appearance: none; } /*------------------*/ /*--- HEADER TEXT ---*/ /*------------------*/ #header h1 { grid-area: h1; } #header h2 { grid-area: h2; } #search-top-box { grid-area: search; } #header h1, #header h2 { margin-left: initial; padding: 0; padding-inline-start: calc(var(--sp_header-logo-adaptive-size)*1.05); float: none; max-height: initial; font-size: 1rem; } #header h1 a, #header h2 span { margin: 0; padding: 0; line-height: 1.125; max-height: initial; max-width: max-content; display: inline-block; font-size: 0rem; letter-spacing: 0; } #header h1 a::before { content: var(--header-title); font-size: var(--sp_header-title-size); } #header h2 span::before { content: var(--header-subtitle); font-size: var(--sp_header-subtitle-size); letter-spacing: 0.05vw; } /*-----------------------*/ /*-----------------------*/ /*-----------------------*/ /*------------------*/ /*--- MAIN AREA ---*/ /*------------------*/ #content-wrap { min-height: unset; width: calc(100% - var(--sp_area-min-margin)*2); display: flex; max-width: var(--sp_area-max-width); column-gap: 2.325rem; } #main-content { padding: 0; margin: 0; max-width: 100%; min-width: 0rem; flex: 1 1 auto; overflow-wrap: break-word; } #page-content { font-size: unset; } /* Side Bar */ @media not all and (max-width: 767px) { #side-bar { position: static; inset: initial; } } div#side-bar { width: var(--sp_side-bar-width); flex: 0 0 var(--sp_side-bar-width); } /* Breadcrumbs */ #breadcrumbs, .pseudocrumbs { display: flex; flex-wrap: wrap; column-gap: 0.55ch; } .pseudocrumbs > p { display: contents; } /*--------------------*/ /*--- USER DISPLAY ---*/ /*--------------------*/ .printuser { display: inline-flex; align-items: baseline; grid-gap: 0.25em; text-indent: 0; } .printuser a { margin-right: 0; } .printuser > a:first-child { display: flex; user-select: none; align-self: center; min-width: max-content; } .printuser > a:first-child img { height: 1.25em; width: 1.25em; padding: 0; padding-left: 0.5em; object-fit: contain; background-size: cover; overflow: hidden; margin: 0; } /*-----------------*/ /*--- RATE & INFO MODULE ---*/ /*-----------------*/ /* Baseline reset */ div.page-rate-widget-box, div.rate-box-with-credit-button { display: inline-flex; align-items: center; background-color: var(--sp_rate-module-background); border: none; padding: 0.075em; margin-right: 0; } div.page-rate-widget-box .cancel a:hover { background: transparent; } /*-----------------*/ div.page-rate-widget-box { flex-wrap: wrap; } div.page-rate-widget-box .rate-points { padding: 0 .675em; color: var(--sp_rate-module-text-color); } #main-content div.page-rate-widget-box span:is(.rate-points, .btn) { border: none; border-radius: unset; background: transparent; } .page-rate-widget-box :is(.rateup, .ratedown) a { margin: 0; color: var(--sp_rate-module-button-color); background-color: var(--sp_rate-module-button-background); } .page-rate-widget-box :is(.rateup, .ratedown) a:is(:hover,:focus) { color: var(--sp_rate-module-button-hover-color); background-color: var(--sp_rate-module-button-hover-background); } div.page-rate-widget-box .cancel a { color: var( --sp_rate-module-sub-color); } div.page-rate-widget-box .cancel a:is(:hover,:focus) { color: var( --sp_rate-module-active-color); } /*-----------------*/ div.rate-box-with-credit-button { align-items: stretch; } div.rate-box-with-credit-button .page-rate-widget-box { background-color: transparent; border-radius: inherit; padding: 0; } div.rate-box-with-credit-button .creditButton { display: block; } div.rate-box-with-credit-button .creditButton p { display: contents; font-size: unset; } div.creditButton p a { display: flex; align-items: center; justify-content: center; font-size: .925em; width: 1.375em; height: 100%; color: var( --sp_rate-module-text-color); padding: 0; padding-top: .1425em; border: 0; border-inline-start: solid 0.05em var( --sp_rate-module-sub-color); box-sizing: border-box; margin: 0; } div.creditButton p a:is(:hover,:focus) { color: var(--sp_rate-module-button-hover-color); } :is(div,ul).creditRate { display: block; float: none; text-align: end; margin-right: 0; } div.creditRate .rateBox { display: contents; } div#u-credit-view, div#u-credit-otherwise { display: grid; place-content: center; } div.modalcontainer { position: relative; top: unset; bottom: unset; left: unset; right: unset; height: auto; } div.modalbox { display: flex; flex-direction: column; } /*-------------*/ /*--- IMAGE BLOCK ---*/ /*-------------*/ div.scp-image-block.block-right { margin-right: 0; } div.scp-image-block.block-left { margin-left: 0; } @media screen and (max-width: 640px) { div.scp-image-block:is(.block-right,.block-left) { margin: .75em auto; float: none; } } /*-------------*/ /*--- TABS ---*/ /*-------------*/ .yui-navset { clear: both; } .yui-navset .yui-nav { display: flex; flex-wrap: wrap; } .yui-navset.yui-navset-top .yui-nav :is(li, .selected) { display: block; margin: 0; padding: 0; } .yui-navset.yui-navset-top .yui-nav li a { display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; border-width: 0.05rem; box-sizing: border-box; padding: 0.325rem 0.625rem; } .yui-navset.yui-navset-top .yui-nav :is(li, .selected) a em { position: static; inset: unset; border: none; padding: 0; } /* ------------------------- */ .yui-navset.yui-navset-top .yui-nav li a { color: var(--sp_tab-text-color); background: var(--sp_tab-background); border-color: var(--sp_tab-border-color); } .yui-navset.yui-navset-top .yui-nav li a:where(:hover,:focus) { color: var(--sp_tab-hover-text-color); background: var(--sp_tab-hover-background); border-color: var(--sp_tab-hover-border-color); } .yui-navset.yui-navset-top .yui-nav .selected a { color: var(--sp_tab-selected-text-color); background: var(--sp_tab-selected-background); border-color: var(--sp_tab-selected-border-color); } /*-------------*/ /*--- FOOTNOTE ---*/ /*-------------*/ .hovertip { background: var(--sp_hovertip-background)!important; border: var(--sp_hovertip-border)!important; } /*-------------*/ /*--- TAGS ---*/ /*-------------*/ #main-content .page-tags { text-align: start; } #main-content .page-tags span { max-width: max-content; display: flex; flex-wrap: wrap; grid-gap: 0.375rem; } #main-content .page-tags a { margin: 0; } /*------------------*/ /*--- BOTTOM OPTIONS ---*/ /*------------------*/ #page-info, .page-watch-options, .page-options-bottom { text-align: end; height: auto; } :where(#page-options-container) .page-options-bottom a { display: inline-block; } #who-rated-page-area > div { column-width: 13.75em; column-gap: 0.75rem; } /*------------------*/ /*--- END AREA ---*/ /*------------------*/ #footer { display: flex!important; flex-wrap: wrap; text-align: center; justify-content: center; align-items: baseline; grid-gap: 0.5ch; } #footer .options { display: flex!important; flex-wrap: wrap; justify-content: center; align-items: stretch; float: none; order: 1; width: auto; font-size: 0; margin-inline: 0.25rem; text-align: inherit; } #footer .options a { display: flex; align-items: center; font-size: 0.625rem; padding-inline: 0.375rem; border-inline-start: currentColor solid 0.05rem; } #license-area { padding-inline: var(--sp_area-min-margin); } #footer-bar { max-width: 100%; margin: 0 auto; border: none; padding: 0 var(--sp_area-comp-margin); } #footer-bar .units { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; padding: .5rem; } #footer-bar .unit { float: none; width: auto; flex-basis: 10.25rem; } /*------------------*/ /*--- MOBILE Q ---*/ /*------------------*/ @media (max-width: 767px) { #top-bar { padding-inline: 0; } #top-bar div[class*="top-bar"] > ul { justify-content: center; } #top-bar div[class*="top-bar"] > ul > li { flex-grow: 1; } } /* ===== Patch for SCP-JP ===== */ /* クレジットモジュールの表示パッチ */ div.rate-box-with-credit-button .creditButton { display: inline-flex; } div.rate-box-with-credit-button .page-rate-widget-box { background-color: var(--sp_rate-module-background); } div.page-rate-widget-box .rate-points { padding-top: .1425em; } .creditButton a { display: flex; align-items: center; justify-content: center; height: 100%; box-sizing: border-box; padding:0; padding-top: .1425em; border: 0; margin: 0; color: var(--sp_rate-module-text-color); } .creditButton a:is(:hover, :focus) { color: var(--sp_rate-module-button-hover-color); } .heritage-rating-module ~ .creditButton a:hover { color: var(--sp_rate-module-button-hover-color); }