SCPスタイルリソース-JP

ようこそ！

ここは、応用的なSCPファイルのログやフォーマットを、簡単かつ素早く「コピペ」で使えるようにすることを目的としたスタイルリソースです。基礎的なWikidotフォーマットを探しているならWikidotシンタックスを参照してください。

このページは、ENのscp-style-resourceを参考に作成されました。こちらにもたくさんのフォーマットが掲載されていますので、ぜひご覧ください。

このページは剪定対象合作ページです。追記・編集は自由ですが、いくつかのローカルルールが存在します。詳しいルールやフォーマットの追加方法は、下の「フォーマットを追加する」を参照してください。

フォーマットを追加する

テンプレート

フォーマットを追加する際は、下のテンプレートや既に掲載されているフォーマットを参考にしてください。
このテンプレートに必ずしも従う必要はありませんが、フォーマットの作成者名は最低限記載していただくようお願いします。

++ フォーマットのタイトル
[[div_ class="ssr-sys-author"]]
**by [[*user your-user-name]]**
[[/div]]

【フォーマットのサンプルや使い方など】

[[div class="divider"]]
----
[[/div]]

----

合作のローカルルール

以下は、このページの合作としてのローカルルールです。
フォーマットを追加する際は必ず目を通してください。また、この内容は変更される場合があります。その際はページのディスカッションで告知します。

• このページは、サイトスタッフによって管理されています。
  • サイトスタッフは、このページの全内容の編集、削除や、編集の許可を含む管理を行うことができます。

• このページへのフォーマットの追加や、自分で掲載したフォーマットの編集は自由です。
  • 但し、他のユーザーが追加したフォーマットの編集は極力避けてください。必要がある場合は追加者の承諾を得るか、難しい場合はサイトスタッフに連絡してください。
  • フォーマットを追加、編集した場合は、このページのディスカッションで報告を行ってください。

• フォーマットに問題があると判断された場合やクオリティコントロール等の理由により、掲載されているフォーマットを削除することがあります。その際は、ディスカッションで事前に告知を行います。
  • これは、サイトスタッフにより行われます。

• このページに掲載される内容は、CC BY-SA 3.0で公開可能である必要があります。
  • これは、フォーマットのサンプル画像等も同様です。また、画像の出典等は脚注等を利用して適宜記載してください。
  • 画像は原則としてストレージサイトからリンクしてください。原則としてこのページへのファイルアップロードは禁止です。

• SB3やストレージサイトを含む外部サイトからのinclude等の使用は禁止されています。
  • 当サイト上に存在するコンポーネントページ等のincludeは可能です。

注意

CSSモジュールを使用した場合、その内部に記述されたコードはページを保存・更新した後に適用されます。プレビューでは適用されません。

CSSモジュールに関する変更を確認するためには、ページを保存しなければなりません。

---

動く折りたたみリンク

by ukwhatn

• • _
  HOW TO USEWELCOME!

  基本的な使い方

  • • _
    PART 1PART 1

    PART1

    • • _
      PART 2PART 2

      PART2

      • • _
        コードコード

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode¹を入力
        • 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のUnicode²を入力
        • 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]]

  
  

  ---

  ---

  
  

  蝶イラスト(アニメーション付)

  • • _
    PART1PART1

    
    
    

    PART1

    
    
    

    • • _
      PART2PART2

      
      
      

      PART2

      
      
      

      • • _
        コードコード

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode³を入力
        • 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アイコン

  • • _
    PART1PART1

    
    
    

    PART1

    
    
    

    • • _
      PART2PART2

      
      
      

      PART2

      
      
      

      • • _
        コードコード

        Include

        • top-text: "NEXT"部分の文字列を指定
        • bot-icon: 矢印部分のアイコンを指定 FontAwesomeのUnicode⁴を入力
        • 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の違う２つのanimated-col」や「画像の違う(ry」、更に「財団ロゴ版と蒐集院ロゴ版」などを同居させ、簡単に使い分けることができます。これを行うためにcoltop/colendを独自のものにしています。

  • • _
    PART 1PART 1

    PART1 - 財団アイコンが300px四方

    • • _
      PART 2PART 2

      PART2 - 財団アイコンが200px四方

      • • _
        PART 3PART 3

        PART3 - 違うアイコン

        • • _
          PART 4PART 4

          PART4 - 蒐集院ロゴ版

          • • _
            コードコード

            Include

            以下がこのデモで使用したincludeです

            [!--PART 1--]
            [[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-300px
            |size=300
            |strict=true
            ]]

            [!--PART 2--]
            [[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-200px
            |size=200
            |strict=true
            ]]

            [!--PART 3--]
            [[include :incbox:animated-col
            |top-text=NEXT
            |bot-icon=f0ab
            |image=url('http://incbox.wikidot.com/local--files/svg-base/origin-2.svg')
            |class=fd-col-icon2
            |size=200
            |strict=true
            ]]

            [!--PART 4--]
            [[include :incbox:animated-col-ssi
            |top-text=次章
            |bot-icon=f0ab
            |dur=1s
            |class=ssi-col
            |reverse=false
            ]]

            メインコード

            • coltopのclass引数を各includeで指定したものにする

            [[include :incbox:animated-coltop |class=fd-col-300px |show=PART 1 |hide=PART 1]]

            PART1 - 財団アイコンが300px四方

            [[include :incbox:animated-coltop |class=fd-col-200px |show=PART 2 |hide=PART 2]]

            PART2 - 財団アイコンが200px四方

            [[include :incbox:animated-coltop |class=fd-col-icon2 |show=PART 3 |hide=PART 3]]

            PART3 - 異なるアイコン

            [[include :incbox:animated-coltop |class=ssi-col |show=PART 4 |hide=PART 4]]

            PART4 - 蒐集院ロゴ版

            [[include :incbox:animated-coltop |class=ssi-col |show=コード |hide=コード]]

            【このコード】

            [!--この下にanimated-coltopと同数のanimated-colendを配置--]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-colend]]
            [[include :incbox:animated-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

---

Footnotes

1. それぞれのアイコンのページの上の方にある英数字4桁の組合せ

2. それぞれのアイコンのページの上の方にある英数字4桁の組合せ

3. それぞれのアイコンのページの上の方にある英数字4桁の組合せ

4. それぞれのアイコンのページの上の方にある英数字4桁の組合せ