collapsible

[フレーム]

tabs

[フレーム]

footnote

[フレーム]

SCP format(EN)

[フレーム]

div

[フレーム]

include

[[module CSS]]
@import url(/component:wandererslibrary-theme/code/1);
[[/module]]

[[module CSS]]
@import url(/component:ci-outersite-theme/code/1);
[[/module]]

[フレーム]

+ 注意点と、その概説

- 閉じる

消したい単語と出現させたい単語は、次のようにひと固まりにして該当箇所と置き換えてください。

[[span class="vbox"]][[span class="g1"]]シェリー[[/span]][[span class="v1"]]SCP-XXXX-JP[[/span]][[/span]]

v1: 消したい単語, g1: 出現させたい単語

---

留意すべき点として、"g1(出現させたい単語: シェリー)"を"v1(消したい単語: SCP-XXXX-JP)"よりも短くしなければ見た目が崩れてしまうことに注意してください。もちろん例外はあります。次の項をご確認ください。

このひと固まりの右に文章がない場合、以下の構文を代用することで、消失箇所の真ん中ではなく左詰めに単語を出現させることができます。この際、g1とv1の長さを気にする必要はありません。

[[span class="vbox"]][[span class="g1" style="transform: none; left: 0%;"]]Sherry[[/span]][[span class="v1"]]Safe[[/span]][[/span]]

- 閉じる

/*animation-durationは、アニメーションの始点から終点までにかかる時間です。
基本的には弄る必要はないでしょう。
*/
/*animation-delayは、ページ読み込みからアニメーションが始まるまでの時間です。
例として、
 animation-delay: 5s; 
は、ページ読み込みから5秒後にアニメーションが始まる、という意味です。
これを動かすことで、文字や画像の消失・出現タイミングを動かすことができます。
*/
 
/*
ここから下が文字や画像を消失・出現させる部分です。
*/
 
.vbox{position:relative;
}.vbox.v1{animation-name: v;
 animation-duration:3s;
 animation-delay:5s; 
 animation-fill-mode: forwards;
 /*消失する文字列*/
}.vbox.g1{position:absolute;
 transform: translateX(-50%);
 left:50%;
 white-space:nowrap;
 animation-name: g;
 animation-duration:3s;
 animation-delay:8s; /*ここ*/
 animation-fill-mode: forwards;
 opacity:0;
 /*出現する文字列*/
}.t1{position:relative;
 animation-name: g-ex;
 animation-duration:3s;
 animation-delay:8s; /*ここ*/
 animation-fill-mode: forwards;
 opacity:0;
 height:0px;
 /*出現する画像*/
}
 
/*
ここから下が偽装タイトルです
*/
 
#page-title{display:none;
}.space{position:relative;
 height:22.5px;
 border-top:1pxsolid#bbb;
}.faketitlebox{position:relative;
}.faketitlebox.faketitle1{position:relative;
 left:0%;
 font-size:200%;
 font-weight:normal;
 color:#901;
 padding:000.25em;
 margin:000.6em;
}.faketitlebox.faketitle2{position:absolute;
 left:0%;
 font-size:200%;
 font-weight:normal;
 color:#901;
 padding:000.25em;
 margin:000.6em;
}.faketitle1{animation-name: v;
 animation-duration:3s;
 animation-delay:5s; /*ここと*/
 animation-fill-mode: forwards;
 /*消失する偽装タイトル*/
}.faketitle2{animation-name: g;
 animation-duration:3s;
 animation-delay:8s; /*ここです*/
 animation-fill-mode: forwards;
 opacity:0;
 /*出現する偽装タイトル*/
}
 
/*
ここから下がアニメーション(消失・出現)を規定する部分です。
弄る必要はおそらくありません。
*/
 
@keyframesv{
 0% {opacity:1;
 }
 
 100% {opacity:0;
 }}@keyframesg{
 0% {opacity:0;
 }
 100% {opacity:1;
 }}@keyframesg-ex{
 0% {opacity:0;
 height:0px;
 }
 100% {opacity:1;
 height:315px;
 }}