gradually-article-re

Finally it works

… in iPhone!
UPDATE 1.08: 2018/11/21
UPDATE 1.07: 2018/11/03
UPDATE 1.06: 2018/10/30
UPDATE 1.05: 2018/9/29
UPDATE 1.04: 2018/9/16
UPDATE 1.03: 2018/9/06
UPDATE 1.02: 2018/9/05
UPDATE 1.01: 2018/8/25

Useful Pages

You wanna add your "Useful Pages"? CLICK ME!

Useful Pages-EN

Wiki Syntax
SCP Style Resource
Advanced Formatting and You

Included page "octool:ru" does not exist (create it now)

Useful Pages-KO

위키 구문
접을 수 있는 목록

Useful Pages-CN

维基语法
常用Module(ListPages與ListUsers)簡易教學
放在人事里的懒人页面检索工具的使用方法

Included page "octool:fr" does not exist (create it now)

Included page "octool:pl" does not exist (create it now)

Included page "octool:es" does not exist (create it now)

Included page "octool:th" does not exist (create it now)

Useful Pages-JP

Wikidotシンタックス
日本語表現用Wiki構文拡張スタイル
難解Wikidot構文
Multiple Collapsible

Included page "octool:de" does not exist (create it now)

Included page "octool:it" does not exist (create it now)

Included page "octool:ua" does not exist (create it now)

Included page "octool:ptbr" does not exist (create it now)

STANDALONE BUTTONS

Hmm… you're editing this page, aren't you. I can't show you this function due to prevent accidents.This super awesome function is created by Boyu12!

Edit	Page Source
History	Files

SCROLL

Page top

Page bottom

Page option

Table of Contents

★COPY TOOLS★

collapsible

ruby

tabs

picture

footnote

table

blackbox (█)

color

module CSS

Equations

Inline math

SCPテンプレート

Please reload the page if the tool doesn't be displayed.

About this

Title: ワンクリックコピーツール
Author: 7happy7
Adviser: C-take
License: CC BY-SA 3.0

Reference materials

Title: サイドバー
Source: SCP-JPサンドボックスII
Author: UNKNOWN, SCP-JPwiki
License: CC BY-SA 3.0

Title: Cocoonist's Sidebar
Source: 椎茸天然製造
Author: Cocoonist
Author: Dr Devan
License: CC BY-SA 3.0

How to introduce this tool.

Copy the following code and paste it in your sandbox page.

SCP-XXXX-JPメタタイトル

確保、収容、保護

アイテム番号: SCP-XXXX-JPアイテム番号: シェリー

オブジェクトクラス: Euclid

特別収容プロトコル: SCP-XXXX-JPはあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。特別収容プロトコル: メタタイトルはあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。

変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化前の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章変化後の文章

説明: 段落総入れ替えをしているのでまったく違う文章を出現させることもできますが、下を見るとやけに間隔が空いているように見えますね？説明: 変化前と変化後の文字数(文章の長さ)を可能な限り揃えないと、このように妙な場所に改行が入る、あるいは文章が重なるなどの症状を引き起こしてしまいます。ああああああああああああああああああああああああああああああああああああああああああああああ。ああああああああああああああああああああああああああああああああああああああああああああああ。

個人的な見解ですが、SCP-XXXX-JPとメタタイトルの長さを同程度にすると、上記のような不具合は起きにくいと思われます。つまるところ、SCP-XXXX-JPを「シェリー」ではなく「シェリーちゃん/シェリーさん」などにすると、文章の長さが揃って都合が良いのではと私は考えます。

補遺1: あいうえお補遺: かきくけこ

補遺2:

さしすせそたちつてと
なにぬねの
はひふへほ

---

以下が基本的な段落入れ替え構文

[[div class="pbox"]]
[[span class="be"]]変化前？[[/span]][[span class="af"]]変化後！[[/span]]
[[/div]]

以下が疑似引用符構文

[[div class="block"]]
引用符内の文章
[[/div]]

記事概観

+ open

[[span class="faketitlebox"]][[span class="faketitle1"]]SCP-XXXX-JP[[/span]][[span class="faketitle2"]]シェリー[[/span]][[/span]]

[[div class="space"]]
[[/div]]
[!--最初が消えるタイトル、最後が現れるタイトルです。--]

[[>]]
[[module Rate]]
[[/>]]

[[div class="g-pic"]]

[[div class="scp-image-block block-right scp-clear-false" style="width:300px;"]]
[[image http://unofficial-scp-sandbox-jp.wikidot.com/local--files/gradually-article/scp_trans.png style="width:300px;" size="{$size}" link="#"]]
[[div class="scp-image-caption" style="width:300px;"]]
確保、収容、保護
[[/div]]
[[/div]]
[[module CSS]]
@media (max-width: 768px) {
.scp-clear-true.scp-image-block {
float: none;
clear: both;
margin-left: auto;
margin-right: auto;
}
}
[[/module]]

[[/div]]

[[div class="pbox"]]
[[span class="be"]]**アイテム番号:** SCP-XXXX-JP[[/span]][[span class="af"]]**アイテム番号:** シェリー[[/span]]
[[/div]]

**オブジェクトクラス:** Euclid

[[div class="pbox"]]
[[span class="be"]]**特別収容プロトコル:**  SCP-XXXX-JPはうわあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。[[/span]][[span class="af"]]**特別収容プロトコル:** シェリーはうわあああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ。[[/span]]
[[/div]]

[[div class="pbox"]]
[[span class="be"]]変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？変化前の文章？[[/span]][[span class="af"]]変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！変化後の文章！[[/span]]
[[/div]]

[[div class="pbox"]]
[[span class="be"]]**説明:** 段落総入れ替えをしているのでまったく違う文章を出現させることもできますが、下を見るとやけに間隔が空いているように見えますね？[[/span]][[span class="af"]]**説明:** 変化前と変化後の文字数(文章の長さ)をある程度揃えないと、このように妙な場所に改行が入る、あるいは文章が重なるなどの症状を引き起こしてしまいます。ああああああああああああああああああああああああああああああああああああああああああああああ。ああああああああああああああああああああああああああああああああああああああああああああああ。[[/span]]
[[/div]]

[[div class="pbox"]]
[[span class="be"]]個人的な見解ですが、SCP-XXXX-JPとメタタイトルの長さを同程度にすると、上記のような不具合は起きにくいと思われます。[[/span]][[span class="af"]]つまるところ、SCP-XXXX-JPを「シェリー」ではなく「シェリーちゃん/シェリーさん」などにすると、文章の長さが揃って都合が良いのではと私は考えます。[[/span]]
[[/div]]

[[div class="pbox"]]
[[span class="be"]]**補遺1:** あいうえお[[/span]][[span class="af"]]**補遺:** かきくけこ[[/span]]
[[/div]]

**補遺2:**
[[div class="block"]]
[[div class="pbox"]]
[[span class="be"]]さしすせそ[[/span]][[span class="af"]]たちつてと[[/span]]
なにぬねの
はひふへほ
[[/div]]
[[/div]]

使用する際は、以下の記述をページのどこかに入れてください

+ open

[[module CSS]]
/*
animation-durationは、アニメーションの始点から終点までにかかる時間です
animation-delayは、ページ読み込みからアニメーションが始まるまでの時間です
*/

/*出現する画像*/
.g-pic {
    position: relative;
    animation-name: g-ex;
    animation-duration: 6s;
    animation-delay: 8s; /*ここ*/
    animation-fill-mode: forwards;
    opacity: 0;
    height: 0px;
}

/*ここから下が文字を消失・出現させる部分です。*/
.pbox {
    position: relative;
    width: 100%;
}
.block {
    border: 1px dashed #999;
    padding: 0 1em;
    background-color: #f4f4f4;
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}
.be {
    position: absolute;
    width: 100%;
    white-space: pre-wrap;
    animation-name: v;
    animation-duration: 3s;
    animation-delay: 5s; 
    animation-fill-mode: forwards;
    /*消失する文字列*/
}
.af {
    top: -0.8em;
    animation-name: g;
    animation-duration: 3s;
    animation-delay: 5s; /*ここ*/
    animation-fill-mode: forwards;
    opacity: 0;
    /*出現する文字列*/
}

/*
ここから下が偽装タイトルです
タイトル変換が行われる時間の制御は、以下に示す二箇所の秒数を必ず3秒差のまま増やしてください
*/

#page-title {
     display: none;
}

.space {
     position: relative;
     height: 22.5px;
     border-top: 1px solid #bbb;
}

.faketitlebox {
     position: relative;
}

.faketitlebox .faketitle1 {
     position: relative;
     left: 0%;
     font-size: 200%;
     font-weight: normal;
     color: #901;
     padding: 0 0 0.25em;
     margin: 0 0 0.6em;
     animation-name: v;
     animation-duration: 3s;
     animation-delay: 5s; /*ここと*/
     animation-fill-mode: forwards;
    /*消失する偽装タイトル*/
}
.faketitlebox .faketitle2 {
     position: absolute;
     left: 0%;
     font-size: 200%;
     font-weight: normal;
     color: #901;
     padding: 0 0 0.25em;
     margin: 0 0 0.6em;
     animation-name: g;
     animation-duration: 3s;
     animation-delay: 8s; /*ここです*/
     animation-fill-mode: forwards;
     opacity: 0;
    /*出現する偽装タイトル*/
}

/*
ここから下がアニメーション(消失・出現)を規定する部分です。
弄る必要はおそらくありません。
*/

@keyframes v {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes g {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes g-ex {
    0% {
        opacity: 0;
        height: 0px;
    }
    100% {
        opacity: 1;
        height: 318px;
    }
}
[[/module]]