ここはSCP Wiki内部で使われているテンプレートページです。スタッフの許可なしにこのページを触れないでください。
注
以下の説明はSCP-ENの元ページに記載される説明の和訳です。SCP-JPにおいては、必ずしも適した説明ではない可能性があります。
これは
この文章の最初のセクションには紹介が、続いてhr要素について、評価モジュールについて、その他諸々についてが書かれています。
これについてはもちろん任意ですが、評価モジュールの上にhr要素を置けば、とても優雅に見えることでしょう。
使用方法
このテーマを使用する場合、下記のコードをページのどこかに書き込んでください。
[[include component:ar-theme]]
このテーマの導入の際は、CSSの@import規則を使用しないでください。誰もそれを止めはしませんけどね。[[include]]を使ってテーマを導入すれば、そのページをバックリンクのリストに追加できます。これはもしテーマを更新した際、どのページが影響を受けるのかが分かること、またその更新を原因とするエラーをいち早く発見し修正することを可能とします。
ページのバックリンクを見る場合は、このページの下部にある「+ オプション」「バックリンク」をクリックしてください。
例
hr要素とは、4つのハイフン"----"で作ることができ、そしてこれがもし引用符などの中に無ければ、ページ全体を分断できるものです。この文書のセクションを分割する線こそがhr要素です。
タイトルは、1から6個の「+」と半角スペースを文章の始めに付けることで作ることができます。
これがタブです。
タブを動かすロジックは、タブの移り変わりを考慮して調整されています。別のタブをクリックすれば、滑らか且つスムーズに表示されます。
これは、"> "を文章の始めに付けることで作ることができる引用符です。
更なるテキスト
これはhr要素
ネストすると…
これは | テーブルです。 |
---|---|
作り方は | もう |
知っていますね? |
テーマカラー
- #295183 - 光のアクセント
- #1e3c62 - 影のアクセント
- #0366d6 - ハイパーリンク
- rgba(0,0,0,0.12) - ボーダー
通常のフォントはM Plus 1p、Montserrat。タイトルはNoto Sans JP、Raleway。ヘッダーに使用されている等幅フォントはSawarabi Gothic、Roboto Mono。
ソースコード
/*-------------------------------------*\ * ANDERSON ROBOTICS THEME * \*-------------------------------------*/ /*-------------------*\ * Fonts * \*-------------------*/ @import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:300|Noto+Sans+JP:300|Sawarabi+Gothic|Montserrat:400,600|Raleway||Roboto+Mono'); body { font-family: 'M Plus 1p',sans-serif; } textarea[name=source] { font-family: 'Roboto Mono','Sawarabi Gothic',monospace; } a { color: #0366d6; } a:visited { color: #0361cc; } /*--------------------*\ * Titles/Headers * \*--------------------*/ h1, h2, h3, h4, h5, h6, #page-title { font-family: 'Noto Sans JP',sans-serif; } h1, #page-title { color: #295183; } #page-title { font-size: 3em; border: none; padding: 0; margin: 0.5em 0 0.3em 0; } #breadcrumbs { position: absolute; top: 1.5em; opacity: 0.6; } #main-content { border-left: 1px solid rgba(0,0,0,0.12); margin: 0 2em 0 20em; padding: 2em 2em 2em 4em; } /*------------------*\ * Top Header * \*------------------*/ div#container-wrap { background: url(http://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_bg.png) top left repeat-x; } #header { background-image: url(http://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_circle.png); } #header h1 a { background: transparent; font-family: 'Roboto Mono','Sawarabi Gothic',sans-serif; text-decoration: none; text-shadow: none; letter-spacing: -0.05em; font-weight: 400; /* hide real header */ line-height: 0px; max-height: 0px; color: transparent; } #header h1 a::before { content: "アンダーソン・ロボティクス"; color: #fff; } #header h2 span { background: transparent; font-family: 'Roboto Mono','Sawarabi Gothic',sans-serif; text-shadow: none; letter-spacing: -0.05em; font-weight: 500; color: #eee; /* hide real header */ line-height: 0px; max-height: 0px; color: transparent; } #header h2 span::before { content: "人間、それ以上"; color: #eee; } #search-top-box-input { background-color: #1e3c62; border: none; box-shadow: none; border-radius: 0; font-family: 'Roboto Mono','Sawarabi Gothic',monospace; } #search-top-box-input:hover, #search-top-box-input:focus { background-color: #1e3c62; border: none; box-shadow: none; } #search-top-box-form input[type=submit] { padding: 0 0.5em; border: 1px solid #1e3c62; border-radius: 0; color: #fff; background: #295183; font-family: 'Roboto Mono','Sawarabi Gothic',monospace; } #search-top-box-form input[type=submit]:hover { border: 1px solid #1e3c62; border-radius: 0; background: #295183; } #top-bar ul li ul a, #top-bar a:hover, #top-bar ul li.sfhover a, #top-bar ul li:hover a { color: #295183; } /*----------------------------------------*\ * Height Adjustment for central border * \*----------------------------------------*/ #content-wrap { margin-top: 0; } #side-bar { top: 1.5em; } /*------------------*\ * Side Bar * \*------------------*/ #side-bar .side-block { border: none; border-radius: 0; box-shadow: none; background: transparent !important; padding: 0; } #side-bar .heading, #side-bar .collapsible-block-unfolded-link a.collapsible-block-link { display: block; border: none; border-radius: 0; color: #202124; font-size: 1.2em; padding: 1em 1em 0 0; border-top: 1px solid rgba(0,0,0,.12); margin: 1em calc(-3em + 7px) 1em 0; font-weight: normal; } #side-bar div.collapsible-block-unfolded { display: block !important; } #side-bar div.collapsible-block-folded { display: none !important; } #side-bar .collapsible-block-unfolded .collapsible-block-unfolded-link { border: none; } #side-bar div.menu-item { margin: 0; font-size: 0; } #side-bar div.menu-item a { font-weight: normal; } #side-bar .menu-item > img { display: none; } #side-bar .menu-item > a { transition: all 0.1s ease-in-out; display: block; color: #5f6368; margin: 0 calc(-1em - 1px) 0 -0.5em; padding: 0.5em 1em 0.5em 0.5em; font-size: 12.8px; /* sidebar links extend to left: */ margin-left: -99rem; padding-left: 99rem; } #side-bar .menu-item > a:hover { background-color: rgba(0,0,0,0.04); color: #202124; text-decoration: none; } /*--------------------*\ * Horizontal Rules * \*--------------------*/ hr { background-color: rgba(0,0,0,0.12); } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -2em 3em -4em; } /*-------------------*\ * Blockquotes * \*-------------------*/ blockquote { border: 1px solid rgba(0,0,0,0.12); background-color: transparent; } /*-----------------------*\ * Rating & Tags * \*-----------------------*/ hr + div[style="text-align: right;"] { position: relative; } hr + div[style="text-align: right;"] .page-rate-widget-box { top: calc(-3em - 8px); right: 0; position: absolute; } .page-rate-widget-box { border-radius: 0; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2); } div.page-rate-widget-box .rate-points { background-color: #295183; border-color: #1e3c62; border-radius: 0; } .page-rate-widget-box .rateup, .page-rate-widget-box .ratedown { background-color: #fff; border-color: #1e3c62; } .page-rate-widget-box .rateup a, .page-rate-widget-box .ratedown a { color: #1e3c62; } .page-rate-widget-box .rateup a:hover, .page-rate-widget-box .ratedown a:hover { color: #fff; background-color: #295183; } .page-rate-widget-box .cancel { background-color: #295183; border-color: #1e3c62; border-radius: 0; } .page-rate-widget-box .cancel a { color: #fff; } .page-rate-widget-box .cancel a:hover { border-radius: 0; color: #1e3c62; background-color: #295183; } #main-content .page-tags { margin-top: 3em; } #main-content .page-tags span { border-color: rgba(0,0,0,0.12); margin-left: -4.7em; padding-left: 4.7em; } /*------------------*\ * Tabs * \*------------------*/ .yui-navset.yui-navset-top { border-left: 3px solid #295183; } .yui-navset .yui-nav { position: relative; z-index: 0; border: none; padding-left: 0.2em; } .yui-navset .yui-nav li { padding: 0; margin: 0.2em 0.3em; transition: transform 0.2s ease-in-out; } .yui-navset .yui-nav li a { background: transparent; color: #5f6368; border: 1px solid rgba(0,0,0,0.12); transition: background 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out; } .yui-navset .yui-nav li a:hover { background: rgba(0,0,0,0.04); color: #202124; border: 1px solid rgba(0,0,0,0.12); } .yui-navset .yui-nav li a em { border: none; padding: 0.5em 0.5em calc(0.5em - 2px) 0.5em; } .yui-navset .yui-nav .selected { padding: 0; margin: 0.2em 0.3em; transform: scale(1.1); } .yui-navset .yui-nav .selected a, .yui-navset .yui-nav .selected a:focus, .yui-navset .yui-nav .selected a:hover { padding: 0; border: 1px solid #1e3c62; background: #295183; } .yui-navset .yui-nav .selected a em { padding: 0.5em 0.5em calc(0.5em - 2px) 0.5em; border: none; } .yui-navset .yui-content { display: flex; flex-direction: column; background-color: transparent; border: none; padding: 0; position: relative; margin-top: 0.2em; transform-origin: 0 0; } .yui-navset .yui-content > div { border: 1px solid rgba(0,0,0,0.12); border-left: none; background-color: #f5f5f5; padding: 0.25em 0.5em; display: block; top: 0; overflow: hidden; transform-origin: 0 0; } #page-content .yui-navset .yui-content > div > * { transform-origin: 0 0; } #page-content .yui-navset .yui-content > div[style*="none"] { display: block !important; flex: 0; max-height: 0; padding: 0 0.5em; border-width: 0; /* The following transition affects the one that DISAPPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.0,1.27,.0,.89) 0s; animation: tab-disappear 0.5s ease-in-out 0s 1 both; } #page-content .yui-navset .yui-content > div[style*="block"] { display: block !important; flex: 1; max-height: 9999rem; /* The following transition affects the one that APPEARS */ transition: padding 0s linear 0.5s, border-width 0s linear 0.5s, flex 0.5s cubic-bezier(.99,.0,.99,.0) 0.5s; animation: tab-appear 0.5s ease-in-out 0.5s 1 both; } @keyframes tab-disappear { 0% { max-height: 9999rem; } 1% { max-height: 100vh; } 100% { max-height: 0; } } @keyframes tab-appear { 0% { max-height: 0; } 99% { max-height: 100vh; } 100% { max-height: 9999rem; } } /*--------------------*\ * Tables * \*--------------------*/ table.wiki-content-table td { /* rgba is useless here */ border-color: #e1e1e1; } table.wiki-content-table th { border-color: #e1e1e1; background-color: #f5f5f5; } /*------------------*\ * Images * \*------------------*/ #page-content .scp-image-block { border-color: rgba(0,0,0,0.12); box-shadow: none; } #page-content .scp-image-block .scp-image-caption { border-color: rgba(0,0,0,0.12); background-color: #f5f5f5; } /*-------------------*\ * Animation * \*-------------------*/ #header::before { content: ""; background-image: url(http://scp-wiki.wdfiles.com/local--files/theme%3Aar/ar_logo_blue.png); position: absolute; opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: translate (0,0) scale(1,1); transform-origin: 50% 50%; transform: translate (0,0) scale(1,1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; zoom: 1; } /*------------------*\ * Mobile * \*------------------*/ @media (max-width: 767px) { #main-content { padding: 0; margin: 0 5%; border-left: none; } #page-title { margin-top: 0.7em; } #side-bar { background-color: #fff; left: -23em; } #side-bar:target { border: none; box-shadow: 3px 0 1px -2px rgba(0,0,0,0.04), 1px 0 5px 0 rgba(0,0,0,0.2); } #side-bar .close-menu { transition: width 0.5s ease-in-out 0.1s, opacity 1s ease-in-out 0s; display: block; position: fixed; width: 100%; height: 100%; top: 0; right: 0; background: rgba(0,0,0,0.3); background-position: 19em 50%; z-index: -1; opacity: 0; pointer-events: none; } #side-bar:target .close-menu { width: calc(100% - 19em); right: 0; left: auto; opacity: 1; pointer-events: auto; } #page-content > hr, #page-content > .list-pages-box > .list-pages-item > hr { margin: 3em -5.5%; } #breadcrumbs { position: relative; top: 0; font-style: italic; } #side-bar { top: 0; } #side-bar .heading { padding-left: 1em; margin-left: -1em; } #search-top-box { top: 107px; } .open-menu a { border-radius: 0; border: none !important; padding: 0.1em; box-shadow: 0px 1px 4px 0 rgba(0, 0, 0, 0.2), 0px 3px 10px 0 rgba(0, 0, 0, 0.19); color: #295183 !important; } } /*--------------------*\ * Responsivity * \*--------------------*/ @media (max-width: 479px) { #header::before { animation: logo-expand-479 3s ease-in-out 0s 1 forwards; background-size: 55px; } } @media (max-width: 580px) and (min-width: 480px) { #header::before { animation: logo-expand-580-480 3s ease-in-out 0s 1 forwards; background-size: 66px; } } @media (max-width: 767px) and (min-width: 581px) { #header { background-position: 1em 4.3em; background-size: 70px; } #header::before { animation: logo-expand-767-581 3s ease-in-out 0s 1 forwards; background-size: 70px; } #search-top-box-input.empty { width: initial; } } @media (max-width: 979px) and (min-width: 768px) { #header { background-position: 1.8em 4em; background-size: 70px; } #header::before { animation: logo-expand-979-768 3s ease-in-out 0s 1 forwards; animation-fill-mode: forwards; background-size: 70px; } } @media (min-width: 980px) { #header { background-position: 1.8em 3.7em; background-size: 80px; } #header::before { animation: logo-expand-980 3s ease-in-out 0s 1 forwards; animation-fill-mode: forwards; background-size: 80px; } } /*------------------*\ * Keyframes * \*------------------*/ @keyframes logo-expand-980 { 0%, 74% { background-size: 80px 80px; top: 3.7em; left: 1.8em; height: 80px; width: 80px; -webkit-transform: translate(0px,16.31px) scale(0.43,0.43); transform: translate(0px,16.31px) scale(0.43,0.43); opacity: 0; } 75% { background-size: 80px 80px; top: 3.7em; left: 1.8em; height: 80px; width: 80px; -webkit-transform: translate(0px,16.31px) scale(0.43,0.43); transform: translate(0px,16.31px) scale(0.43,0.43); opacity: 1; } 100% { background-size: 80px 80px; top: 3.7em; left: 1.8em; height: 80px; width: 80px; -webkit-transform: translate(0,0) scale(1,1); transform: translate(0,0) scale(1,1); opacity: 1; } } @keyframes logo-expand-979-768 { 0%, 74% { background-size: 70px 70px; top: 4em; left: 1.8em; height: 70px; width: 70px; -webkit-transform: translate(0px,14.15px) scale(0.43,0.43); transform: translate(0px,14.15px) scale(0.43,0.43); opacity: 0; } 75% { background-size: 70px 70px; top: 4em; left: 1.8em; height: 70px; width: 70px; -webkit-transform: translate(0px,14.15px) scale(0.43,0.43); transform: translate(0px,14.15px) scale(0.43,0.43); opacity: 1; } 100% { background-size: 70px 70px; top: 4em; left: 1.8em; height: 70px; width: 70px; -webkit-transform: translate(0,0) scale(1,1); transform: translate(0,0) scale(1,1); opacity: 1; } } @keyframes logo-expand-767-581 { 0%, 74% { background-size: 70px 70px; top: 4.3em; left: 1em; height: 70px; width: 70px; -webkit-transform: translate(0px,14.15px) scale(0.43,0.43); transform: translate(0px,14.15px) scale(0.43,0.43); opacity: 0; } 75% { background-size: 70px 70px; top: 4.3em; left: 1em; height: 70px; width: 70px; -webkit-transform: translate(0px,14.15px) scale(0.43,0.43); transform: translate(0px,14.15px) scale(0.43,0.43); opacity: 1; } 100% { background-size: 70px 70px; top: 4.3em; left: 1em; height: 70px; width: 70px; -webkit-transform: translate(0,0) scale(1,1); transform: translate(0,0) scale(1,1); opacity: 1; } } @keyframes logo-expand-580-480 { 0%, 74% { background-size: 66px 66px; top: 4.5em; left: 0.5em; height: 66px; width: 66px; -webkit-transform: translate(0px,13.28px) scale(0.43,0.43); transform: translate(0px,13.28px) scale(0.43,0.43); opacity: 0; } 75% { background-size: 66px 66px; top: 4.5em; left: 0.5em; height: 66px; width: 66px; -webkit-transform: translate(0px,13.28px) scale(0.43,0.43); transform: translate(0px,13.28px) scale(0.43,0.43); opacity: 1; } 100% { background-size: 66px 66px; top: 4.5em; left: 0.5em; height: 66px; width: 66px; -webkit-transform: translate(0,0) scale(1,1); transform: translate(0,0) scale(1,1); opacity: 1; } } @keyframes logo-expand-479 { 0%, 74% { background-size: 55px 55px; top: 5.5em; left: 0em; height: 55px; width: 55px; -webkit-transform: translate(0px,10.9px) scale(0.43,0.43); transform: translate(0px,10.9px) scale(0.43,0.43); opacity: 0; } 75% { background-size: 55px 55px; top: 5.5em; left: 0em; height: 55px; width: 55px; -webkit-transform: translate(0px,10.9px) scale(0.43,0.43); transform: translate(0px,10.9px) scale(0.43,0.43); opacity: 1; } 100% { background-size: 55px 55px; top: 5.5em; left: 0em; height: 55px; width: 55px; -webkit-transform: translate(0,0) scale(1,1); transform: translate(0,0) scale(1,1); opacity: 1; } } /*-----------------------------------------*\ * MANUAL SIDE BAR ADJUSTMENTS * *-----------------------------------------* * These account for errors in the side- * * -bar CSS. They need to be manually re- * * -adjusted whenever the side bar is * * updated. They will also need to be * * changed for translations of this theme.* \*-----------------------------------------*/ #side-bar .menu-item > a[href="/random:random-tale"]::before { content: "ランダム "; } #side-bar .menu-item > a[href="http://www.scp-wiki.net/most-recently-edited"]::before { content: "最近の "; } #side-bar .menu-item > a[href*="/scp-series"]::after { font-size: 80%; opacity: 0.5; margin-left: 0.5em; } #side-bar .menu-item > a[href="/scp-series"]::after { content: "(001–999)"; } #side-bar .menu-item > a[href="/scp-series-2"]::after { content: "(1000–1999)"; } #side-bar .menu-item > a[href="/scp-series-3"]::after { content: "(2000–2999)"; } #side-bar .menu-item > a[href="/scp-series-4"]::after { content: "(3000–3999)"; } #side-bar .menu-item > a[href="/scp-series-5"]::after { content: "(4000–4999)"; }