基本的な使い方
-
- _
PART1
-
- _
PART2
-
- _
Include
- top-text: "NEXT"部分の文字列を指定
- bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode1を入力
- image: 背景画像を指定 基本的に正方形で
- class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる やり方は後述
- size: 単位はpx、単位抜きで数値だけ入力 200~300推奨
- strict: これをtrueにしないと、classを使って複数の折りたたみを使い分けるときにバグる trueのままにしておけばいい
[[include :incbox:animated-col
|top-text=NEXT
|bot-icon=f0ab
|image=url('http://incbox.wikidot.com/local--files/svg-base/origin-1.svg')
|class=fd-col
|size=300
|strict=true
]]メインコード
- いつものcomponent:coltop/colendじゃないので注意
[[include :incbox:animated-coltop |class=fd-col |show=PART 1 |hide=PART 1]]
PART1
[[include :incbox:animated-coltop |class=fd-col |show=PART 2 |hide=PART 2]]
PART2
[[include :incbox:animated-coltop |class=fd-col |show=PART 3 |hide=PART 3]]
PART3
[!--この下にanimated-coltopと同数のanimated-colendを配置--]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
蒐集院ロゴ(飛散アニメーション付き)
-
- _
PART1 これはreverse=falseの例
-
- _
PART2 これはreverse=trueの例
-
- _
Include
- top-text: "NEXT"部分の文字列を指定
- bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode2を入力
- dur: 飛散アニメーションにかける時間を入力
- class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる ここでは上記の財団ロゴ版と使い分けるため"ssi-col"となっている
- size: 単位はpx、単位抜きで数値だけ入力 200~300推奨
- reverse: trueで「飛散・透明 → 集合・半透明」に、falseで逆になります
[[include :incbox:animated-col-ssi
|top-text=次章
|bot-icon=f0ab
|dur=1s
|class=ssi-col
|size=300
|reverse=false
]]メインコード
- いつものcomponent:coltop/colendじゃないので注意
[[include :incbox:animated-coltop |class=ssi-col |show=第壱章 |hide=第壱章]]
PART1
[[include :incbox:animated-coltop |class=ssi-col |show=第弐章 |hide=第弐章]]
PART2
[[include :incbox:animated-coltop |class=ssi-col |show=第参章 |hide=第参章]]
PART3
[!--この下にanimated-coltopと同数のanimated-colendを配置--]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
蝶イラスト(アニメーション付)
-
- _
PART1
-
- _
PART2
-
- _
Include
- top-text: "NEXT"部分の文字列を指定
- bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode3を入力
- dur: 飛散アニメーションにかける時間を入力
- class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる ここでは上記の財団ロゴ版と使い分けるため"ssi-col"となっている
- size: 単位はpx、単位抜きで数値だけ入力 200~300推奨
[[include :incbox:animated-col-morpho
|top-text=NEXT
|bot-icon=f0ab
|dur=1s
|class=mor-col
|size=300
]]メインコード
- いつものcomponent:coltop/colendじゃないので注意
[[include :incbox:animated-coltop |class=mor-col |show=PART1 |hide=PART1]]
PART1
[[include :incbox:animated-coltop |class=mor-col |show=PART2 |hide=PART2]]
PART2
[[include :incbox:animated-coltop |class=mor-col |show=PART3 |hide=PART3]]
PART3
[!--この下にanimated-coltopと同数のanimated-colendを配置--]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
GOCアイコン
-
- _
PART1
-
- _
PART2
-
- _
Include
- top-text: "NEXT"部分の文字列を指定
- bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode4を入力
- dur: 飛散アニメーションにかける時間を入力
- class: animated-coltopに入れるクラスを指定 これを変えることで、同じ財団ロゴでも大きさやtop-textを変えたりできる ここでは上記の財団ロゴ版と使い分けるため"ssi-col"となっている
- size: 単位はpx、単位抜きで数値だけ入力 200~300推奨
[[include :incbox:animated-col-goc
|top-text=NEXT
|bot-icon=f0ab
|dur=1s
|class=goc-col
|size=300
]]メインコード
- いつものcomponent:coltop/colendじゃないので注意
[[include :incbox:animated-coltop |class=goc-col |show=PART1 |hide=PART1]]
PART1
[[include :incbox:animated-coltop |class=goc-col |show=PART2 |hide=PART2]]
PART2
[[include :incbox:animated-coltop |class=goc-col |show=PART3 |hide=PART3]]
PART3
[!--この下にanimated-coltopと同数のanimated-colendを配置--]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
[[include :incbox:animated-colend]]
複数の折りたたみを定義して使い分ける
- class引数の使い所です。
- 「top-textの違う2つのanimated-col」や「画像の違う(ry」、更に「財団ロゴ版と蒐集院ロゴ版」などを同居させ、簡単に使い分けることができます。これを行うためにcoltop/colendを独自のものにしています。
ライセンス
ディスカッション等にライセンスを記述するのを忘れないでください!
共通
- "Animated Collapsible Link"(CSS Code)
- © 2020 ukwhatn
- Licensed under the MIT License
財団ロゴ版
- Animated SCP Logo by ukwhatn
- URL: http://incbox.wikidot.com/svg-gallery
- Based on: SCP Foundtion (emblem).svg by Aelanna
- Licensed under CC BY-SA 3.0
蒐集院ロゴ版
- 要注意団体アイコン by tsucchii0301
- URL: http://scp-jp.wikidot.com/goi-icon
- Licensed under CC BY-SA 3.0
GOCロゴ版
- 要注意団体アイコン by tsucchii0301
- URL: http://scp-jp.wikidot.com/goi-icon
- Licensed under CC BY-SA 3.0
蝶イラスト版
- Morpho.png by Nika_Nayuki
- URL: http://incbox.wdfiles.com/local--files/animated-col-morpho/Morpho.png
- Licensed under CC BY-SA 3.0
何か要望や作って欲しいものがあれば、ukwhatn に何かしらの手段で伝えてください
ページコンソール
批評ステータス
カテゴリ
SCP-JP本投稿の際にscpタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にgoi-formatタグを付与するJPでのオリジナル作品の下書きが該当します。
本投稿の際にtaleタグを付与するJPでのオリジナル作品の下書きが該当します。
翻訳作品の下書きが該当します。
他のカテゴリタグのいずれにも当て嵌まらない下書きが該当します。
言語
EnglishРусский한국어中文FrançaisPolskiEspañolภาษาไทยDeutschItalianoУкраїнськаPortuguêsČesky繁體中文Việtその他日→外国語翻訳日本支部の記事を他言語版サイトに翻訳投稿する場合の下書きが該当します。
コンテンツマーカー
ジョーク本投稿の際にジョークタグを付与する下書きが該当します。
本投稿の際にアダルトタグを付与する下書きが該当します。
本投稿済みの下書きが該当します。
イベント参加予定の下書きが該当します。
フィーチャー
短編構文を除き数千字以下の短編・掌編の下書きが該当します。
短編にも長編にも満たない中編の下書きが該当します。
構文を除き数万字以上の長編の下書きが該当します。
特定の事前知識を求めない下書きが該当します。
SCPやGoIFなどのフォーマットが一定の記事種でフォーマットを崩している下書きが該当します。
シリーズ-JP所属
JPのカノンや連作に所属しているか、JPの特定記事の続編の下書きが該当します。
JPではないカノンや連作に所属しているか、JPではない特定記事の続編の下書きが該当します。
JPのGoIやLoIなどの世界観用語が登場する下書きが該当します。
JPではないGoIやLoIなどの世界観用語が登場する下書きが該当します。
ジャンル
アクションSFオカルト/都市伝説感動系ギャグ/コミカルシリアスシュールダーク人間ドラマ/恋愛ホラー/サスペンスメタフィクション歴史任意
任意A任意B任意C- portal:3396310 (05 Aug 2021 16:19)
コメント投稿フォームへ
注意: 批評して欲しいポイントやスポイラー、改稿内容についてはコメントではなく下書き本文に直接書き入れて下さい。初めての下書きであっても投稿報告は不要です。批評内容に対する返答以外で自身の下書きにコメントしないようお願いします。
批評コメントTopへ