超クールなACSのカスタムアドオンガイド v1.8.0
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
評価: +12+x

これは何?

これはACSバーに於いて、著者が通常サポートされている以上のカスタマイズを行うことを可能とするアドオンです。

利用方法

実装可能なサブコンポーネントは複数存在し、必要に応じて各々を独立した形で使用することが可能です。

当コンポーネントを動作させるには、先ずACSバーをあなたのページに導入する必要があります。又、次の手順に進む前にACSヘッダーの関連フィールドを全て埋めてください。特殊オブジェクトクラスをACSバーそのものに実装する場合1も同様です。

次に、以下のサブコンポーネントのリストにあるコンポーネントの内、必要なものを実装してください。青文字は全て該当する要素に置換してください。

色のガイド

デフォルトのACSコンポーネントでは、特定のクラスに対して幾つかの色を使用しています。以下は、ACSで使用されるデフォルトの色のリストとそのRGB値です。

  • 黒色(Pending)2 ( ): 12,12,12
  • 灰色(Declassified)3 ( ): 66,66,72
  • 緑色(Unrestricted)4 ( ): 0,159,107
  • 青色(Restricted)5 ( ): 0,135,189
  • 黄色(Confidential)6 ( ): 255,211,0
  • 橙色(Secret)7 ( ): 255,109,0
  • 赤色(Top-Secret)8 ( ): 196,2,51

標準クラスの操作

ACSの仕様上、このコンポーネントで通常のクラスを通常と異なる方法で使用しようとすると特定のバグが発生することがあります。通常と異なる方法で使用する場合、 クラス表記の直後にこの空文字: ( ) を配置してください。例えば(何らかの理由で)リスククラス欄にketer を挿入したい場合、リスククラス欄を|risk-class= keter このように埋めます。

サブコンポーネントのリスト

収容クラスのカスタム

収容クラスをカスタムするには以下の記述を導入します。

[[include :scp-jp:component:customizable-acs
|containment-class= 収容クラスの名称
|containment-image= 収容クラスのアイコンURL
|containment-color= 収容クラスの色(RGBコード)
|inc-containment = --]]]


撹乱クラスのカスタム

撹乱クラスをカスタムするには以下の記述を導入します。

[[include :scp-jp:component:customizable-acs
|disruption-class= 撹乱クラスの名称
|disruption-image= 撹乱クラスのアイコンURL
|disruption-color= 撹乱クラスの色(RGBコード)
|inc-disruption= --]]]


リスククラスのカスタム

リスククラスをカスタムするには以下の記述を導入します。

[[include :scp-jp:component:customizable-acs
|risk-class= リスククラスの名称
|risk-image= リスククラスのアイコンURL
|risk-color= リスククラスの色(RGBコード)
|inc-risk= --]]]


収容クラスのカスタム(Neutralizedクラスのレイアウト)

Neutralizedクラスのレイアウトで収容クラスをカスタムするには以下の記述を導入します。

[[include :scp-jp:component:customizable-acs
|containment-class= 収容クラスの名称
|containment-image= 収容クラスのアイコンURL
|containment-color= 収容クラスの色(RGBコード)
|inc-neutralized-layout = --]]]


収容クラスのカスタム(特殊クラスのレイアウト)

特殊クラスを利用したレイアウトで収容クラスをカスタムするには以下の記述を導入します。

[[include :scp-jp:component:customizable-acs
|containment-class= 収容クラスの名称
|containment-image= 収容クラスのアイコンURL
|containment-color= 収容クラスの色(RGBコード)
|inc-esoteric-layout = --]]]

これを適用するためには、ACSコンポーネントを[[div class="anom-bar-esoteric"]]の記述で囲む必要があります。

[[div class="anom-bar-esoteric"]]

[[include :scp-jp:component:anomaly-class-bar-source
|item-number=
|clearance=
|container-class=
|secondary-class=
|secondary-icon=
|disruption-class=
|risk-class=
]]

[[/div]]

これは、同じページにある別の ACS コンポーネントで同じオブジェクトクラスを適用した際に特殊クラスのフォーマットで表示させないようにするための処理です。普通に表示させたいのであればdivで囲まないでください。


クラス色の分割

注: 当コンポーネントは、特殊クラスのレイアウトのコンポーネントと同時に使用することを意図しています。

副次クラスに色を割当て、同時に収容クラスの背景に於いて双方の色が分割された状態での表示を可能とします。同様のサブコンポーネントについては、PepperGhostのACS Splitterを参考にしてください。

使用するには以下の記述を導入します。

[[include :scp-jp:component:customizable-acs
|containment-class= 収容クラスの名称
|containment-color= 収容クラスの色(RGBコード)
|secondary-class= 副次クラスの名称
|secondary—color= 副次クラスの色(RGBコード)
|inc-split-color= --]]]


クリアランスバーの色のカスタム

このコンポーネントを利用することで、クリアランスレベルバーの色を変更することが可能です!導入するには以下の記述を導入し、該当するレベルに色をRGBコードで入力してください。

[[include :scp-jp:component:customizable-acs
|clearance-six= レベル6のクリアランスバーの色(RGBコード)
|clearance-five= レベル5のクリアランスバーの色(RGBコード)
|clearance-four= レベル4のクリアランスバーの色(RGBコード)
|clearance-three= レベル3のクリアランスバーの色(RGBコード)
|clearance-two= レベル2のクリアランスバーの色(RGBコード)
|clearance-one= レベル1のクリアランスバーの色(RGBコード)
|inc-clearance= --]]]

全ての項目を記入する必要はなく、該当するクリアランスレベルの項目のみを記入する点に留意してください。


画像を利用したクリアランスレベルのカスタム

このサブコンポーネントもクリアランスバーを変更しますが、今回はレベル6のクリアランスのデフォルト設定と同様の方法を利用してバーの背景に画像を表示させられようにします。実装するには以下のコードを入力してください。

[[include :scp-jp:component:customizable-acs
|clearance-six-image= レベル6のクリアランスバーの画像
|clearance-five-image= レベル5のクリアランスバーの画像
|clearance-four-image= レベル4のクリアランスバーの画像
|clearance-three-image= レベル3のクリアランスバーの画像
|clearance-two-image= レベル2のクリアランスバーの画像
|clearance-one-image= レベル1のクリアランスバーの画像
|inc-clearance-image= --]]]

上記と同様に此処では全ての項目を記入する必要はなく、該当するクリアランスレベルの項目のみを記入する点に留意してください。


プライド・クリアランスバー

当サブコンポーネントは、以下のコードを適用することでクリアランスバーをプライド色に変更可能です。

[[include :scp-jp:component:customizable-acs
|inc-trans/lgbt/bi/pan/nb-clearance = --]]]

上記の青文字のリスト内から変数を1つ正確に選択する必要があります。クリアランスバーに各々のプライドフラッグの色を割当てられます。


色のアクセント

当サブコンポーネントは、ACSヘッダーの色々な部分に色付けを行うことが可能です。色が変更される対象はアイコンの縁部分、矢印部分9、分割バー10の部分です。

[[include :scp-jp:component:customizable-acs
|accent-one= 分割バーと矢印部分の色(RGBコード)
|accent-two= アイコンの縁の色(RGBコード)
|class-number-color= リスククラス・撹乱クラス部分の文字色(RGBコード)
|inc-color-accent = --]]]


プライド・アクセント

当サブコンポーネントは、メインの水平バー11をプライド色のグラデーションに変更します!これは水平バー部分のみを変更し、"色のアクセント"と互換性を有します。実装するには以下のコードを入力してください。

[[include :scp-jp:component:customizable-acs
|inc-trans/lgbt/bi/pan/nb-accent = --]]]

上記の青文字のリスト内から変数を1つ正確に選択する必要があります。水平バーに各々のプライドフラッグの色が割当てられます。


フォントのカスタマイズ

当サブコンポーネントでは、ACSヘッダーのフォントのカスタマイズが可能です。実装するには以下のコードを入力してください。

[[include :scp-jp:component:customizable-acs
|font-import= フォントのimportコード
|font-name= フォント名
|inc-custom-font= --]]]

importコードは、フォントをインポートするための完全なコード行です。Google Fontsを筆頭とするフォントを提供するWebサイトは、適切なインポートコード行を提供しています。例えば、以下はRoboto Slabフォントをインポートするためにfont-import変数に適用されるものです。

|font-import= @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap');

font-name変数は単にフォント名、即ち"Roboto Slab"を指します。使用されるフォントが、当サイトのライセンスであるCC BY-SA 3.0と互換性を有するものであることを確認してください。


ACSへの新たな項目の追加

当サブコンポーネントを利用すると、ACSヘッダーの下部に追加のクラスを実装することが可能です。実装するには以下のコードを追加のセクションを表示させたい部分に入力してください。

[[include :scp-jp:component:customizable-acs
|category-count= 追加したいカテゴリの数(最小値1、最大値4)
|class-color-1= 1番目のカテゴリーの色(RGBコード)
|class-category-1= 1番目のカテゴリーの名称
|class-text-1= 1番目のカテゴリーの内容
|class-icon-1= 1番目のカテゴリーの画像URL(オプション)
|class-color-2= 2番目のカテゴリーの色(RGBコード)
|class-category-2= 2番目のカテゴリーの名称
|class-text-2= 2番目のカテゴリーの内容
|class-icon-2= 2番目のカテゴリーの画像URL(オプション)
|class-color-3= 3番目のカテゴリーの色(RGBコード)
|class-category-3= 3番目のカテゴリーの名称
|class-text-3= 3番目のカテゴリーの内容
|class-icon-3= 3番目のカテゴリーの画像URL(オプション)
|class-color-4= 4番目のカテゴリーの色(RGBコード)
|class-category-4= 4番目のカテゴリーの名称
|class-text-4= 4番目のカテゴリーの内容
|class-icon-4= 4番目のカテゴリーの画像URL(オプション)
|inc-extra-categories= --]]]

追加されるカテゴリーが4つ未満の場合、最小の番号のカテゴリーのみが表示されます。例えば2つのカテゴリーを追加する場合カテゴリー1及び2は表示されますが、3及び4は表示されません。更に、4つ以上の追加カテゴリーが必要な場合、或いは新しいカテゴリーがサイズの異なる範囲を占めるようにしたい場合には当コンポーネントを複数回実装することでそれが実現可能です。


テキストのカスタマイズ

警告: 当サブコンポーネントと同時に、通常のACSコンポーネントをインクルードしないでください。CSSでテキストの内容を完全に置換できないため、当コンポーネントはACS自体を直接インポートしdivコンテンツの一部を書き換えることで動作しています。

当サブコンポーネントを使用すると、ACSコンポーネントに表示される文章の一部を置換することが可能です(このコンポーネントページでカバーされている部分を除きます)。実装するには以下のコードを入力してください。

[[include :scp-jp:component:customizable-acs
|item-number= アイテム番号
|clearance= クリアランスレベル
|container-class= 収容クラス
|secondary-class= 副次クラス(オプション)
|secondary-icon= 副次クラスのアイコンURL(副次クラスが存在する場合以外オプション)
|disruption-class= 撹乱クラス
|risk-class= リスククラス
|item-text= "アイテム番号:"部分を置換する内容
|level-text= "レベル"部分を置換する内容
|clearance-number-text= レベル部分の数字を置換する内容
|clearance-text= クリアランスの名称部分を置換する内容(例: レベル2なら"Unrestricted")
|containment-text= "収容クラス:"部分を置換する内容
|secondary-text= "副次クラス:"部分を置換する内容
|disruption-text= "撹乱クラス:"部分を置換する内容
|risk-text= "リスククラス:"部分を置換する内容
|inc-custom-text= --]]]

コンポーネントの機能のためには、必ず上記の全てのパラメータが必要です(オプションと明記されている場合を除く)。


評価: +12+x
特に指定がない限り、このサイトのすべてのコンテンツはクリエイティブ・コモンズ 表示 - 継承3.0ライセンス の元で利用可能です。