クレジット
タイトル: 平行テーマ
原題: 平行 版式
著作権者: Dr Hormress
翻訳責任者: takion00
作成年: 2024
翻訳年: 2026
初訳時参照リビジョン: rev.36
元記事リンク: 平行 版式
本記事は、CC BY-SA 4.0ライセンスの下で提供されます。これに加えて、本記事の作成者、著者、翻訳者、または編集者が著作権を有するコンテンツは、別段の定めがない限りCC BY-SA 3.0ライセンスが付与されており、同ライセンスの下で利用することができます。
「コンテンツ」とは、文章、画像、音声、音楽、動画、ソフトウェア、コードその他の情報のことをいいます。
2.0.0
[[include :scp-jp:theme:parallel]]
情報
平行テーマはSCP-CNウィキ用に開発されたCSSテーマです。Dr HormressがBasaltテーマおよびBedrockテーマを大幅に改良し、二次開発を容易にするために設計しており、磨きのかかった外観および複数のテーマプリセットが提供されています。当初、平行テーマは直接利用されることを想定して作られたものではありませんでしたが、今では誰でも使うことができます。
平行テーマはBedrockテーマのコードの大部分をフォークしていますが安定性の確保のため以前のような外部依存設計からBedrockテーマ自体をコードの内部に組み込み独立した開発ができるようにしました。GitHubのこちらのページから軽めの例を参照することができます。もちろん、平行テーマ用Githubリポジトリもあります。
テーマ導入
平行コンポーネントは平行テーマのあらゆる構造を変更するために特別に設計されたものであり、通常は平行テーマなしに動作しません。
平行テーマ クラシックヘッダー
[[include :scp-jp:component:parallel-classic-header]]
テーマプリセット
Basaltテーマと同様に[[include]]構文にプリセットを追加して平行テーマの配色を軽く変更することができます。
これらのカラープリセットは、主に二次デザインの便利なスタイルベースを提供するために使用され、個別の参照にも使用できます。以下のプリセットアイコンをクリックすると、このページのプレビュー状態が切り替わり、必要となる[[include]]構文が変更されます。
基本ページ要素使用例
引用ブロック
ネストされた引用ブロック
画像ブロック
区切り線は少なくとも4つのハイフン"----"を使用することで作成でき1、引用ブロックなどのコンポーネント内に配置されていない場合はページ全体に適用されます。
見出しは行の最初に1~6個の"+"を置くことで作成できます。
見出し1
見出し2
見出し3
見出し4
見出し5
見出し6
| これは | テーブルです。 |
|---|---|
| すでにあなたは | これらの作り方を |
| 知っているはずです | |
ユーティリティクラス
Tailwind CSS3の設計理念と同様に平行テーマも基本要素用のユーティリティークラスを大量に用意していますがTailwind CSSほど独立したものでなくほぼすべてのインライン要素を置き換えることができる単一コードはありません。平行テーマのユーティリティクラスのほとんどはblockquoteクラス4用に設計されており、事前にインポートする必要がありますが、主要な要素はdiv.blockquote要素用のバリエーションです。平行テーマバージョン2.0では、これらのクラスの使用方法がほぼ完全に再設計されていますが、古いクラス名5も引き続きサポートされています。以下は、現在使用されているバージョンの標準的なリファレンスです。
例
HTML構文と同様に[[div class="ユーティリティークラス"]]構文を使用するとクラス付きdiv要素を作成できます。divの内容を[[/div]]で閉じることを忘れないでください。
[[div class="blockquote ユーティリティークラス1 ユーティリティークラス2"]]
[[div class="blockquote round-l bwidth-base bcolor-undertone shadow-thick"]]
[[div class="blockquote bg-pri b-l bwidth-base bcolor-overtone w-625"]]
ユニバーサル
ごく一部のユーティリティークラスはブロックレベル要素を扱いますがほとんどのクラスはインライン要素のみを扱います。以下はそのリストです。
| 文章寄せ方向 | |
|---|---|
| これは要素内の文字寄せ方向の調節のために使用されます | |
| t-left | 文字を左寄せにします |
| t-center | 文字を中央寄せにします |
| t-right | 文字を左寄せにします |
| t-justify | 文字を両端寄せにします |
| オーバーフロー処理 | |
| これは要素内のオーバーフロー処理を行うために使用されます | |
| scroll-x | 要素の幅が広い場合に横スクロールバーを追加します |
引用ブロック
| 幅調節 | |
|---|---|
| これは引用ブロックの幅の調整のために使用されます。幅はページ全体のコンテンツ幅 * 相対係数 という式で計算できます | |
| w-125 | 相対係数 = 0.125 |
| w-25 | 相対係数 = 0.25 |
| w-375 | 相対係数 = 0.375 |
| w-50 | 相対係数 = 0.50 |
| w-625 | 相対係数 = 0.625 |
| w-75 | 相対係数 = 0.75 |
| w-875 | 相対係数 = 0.875 |
| w-full | 相対係数 = 1 |
| 罫線 | |
| これは引用ブロックの罫線の調整のために使用されます。引用ブロックはデフォルトでは背景と同一色の罫線を持ちます。ユーティリティークラスbは特殊な事例のみに使用されます | |
| b-n | 罫線なし引用ブロック |
| b | 罫線あり引用ブロック |
| b-l | 左辺の罫線 |
| b-r | 右辺の罫線 |
| b-lr | 左右の罫線 |
| b-t | 上辺の罫線 |
| b-b | 下辺の罫線 |
| b-tb | 上下の罫線 |
| 罫線幅 | |
| これは引用ブロックの罫線幅の調節のために使用されます | |
| bwidth-base | 罫線幅を次のように設定します:--base-border-width |
| bwidth-thin | 罫線幅を次のように設定します:--thin-border-width |
| 罫線の色 | |
| これは引用ブロックの罫線の色の調節のために使用されます | |
| bcolor-pri | 罫線の色を次のように設定します:--basalt-primary-color |
| bcolor-sec | 罫線の色を次のように設定します:--basalt-secondary-color |
| bcolor-ter | 罫線の色を次のように設定します:--basalt-tertiary-color |
| bcolor-overtone | 罫線の色を次のように設定します:--basalt-overtone |
| bcolor-undertone | 罫線の色を次のように設定します:--basalt-undertone |
| bcolor-dark | 罫線の色を次のように設定します:--basalt-dark-element-color |
| bcolor-darker | 罫線の色を次のように設定します:--basalt-darker-element-color |
| 角丸 | |
| 引用ブロックの角丸の調節のために使用し、4つの角すべてに適用されます。現時点では個々の角に設定することはできません | |
| round | 角丸を次のように設定します:--base-border-radius |
| round-s | 小さい角丸 |
| round-m | 中ぐらいの角丸 |
| round-l | 大きな角丸 |
| 影 | |
| 引用ブロックの影の調整のために使用します。ダークモードでは影が光るようになります | |
| shadow | 普通の影 |
| shadow-thin | 薄めの影 |
| shadow-thick | 厚めの影 |
| 背景色 | |
| 引用ブロックの背景色の調節のために使用します | |
| bg-pri | 背景色を次のように設定します:--basalt-primary-color |
| bg-sec | 背景色を次のように設定します:--basalt-secondary-color |
| bg-ter | 背景色を次のように設定します:--basalt-tertiary-color |
| bg-overtone | 背景色を次のように設定します:--basalt-overtone |
| bg-undertone | 背背景色を次のように設定します:--basalt-undertone |
| bg-dark | 背景色を次のように設定します:--basalt-dark-element-color |
| bg-darker | 背景色を次のように設定します:--basalt-darker-element-color |
| bg-alter | 背景色を次のように設定します:--basalt-alternate-color，透明度 0.075 |
| 文字色 | |
| color-light | 明るい文字 |
ノートブロック
div.wiki-note要素および{note}}要素には特別ユーティリティークラスを設定していません。このセクションで特に言及されているのは、div.wiki-note要素がスタイル付きのdiv.blockquote要素と視覚的に同等であり、ユーザーがdiv.wiki-note要素をスタイル付きのdiv.blockquote要素で完全に置き換えることができるためです。
[[note]]
[[div class="wiki-note"]]
[[div class="blockquote w-50 b-n bg-alter t-justify"]]
ウィキコンテンツテーブル
先ほどの例と異なり通常div.tableに使用されるユーティリティクラスはdiv要素自体ではなくその内部に配置されるウィキコンテンツテーブル、すなわちtable.wiki-content-table要素に影響を与えます。具体的に言うと、幅を変更するために使用されるユーティリティ クラスはdiv要素に影響を与え、その中のテーブルがdiv要素の幅いっぱいに広がるようにします。
以下のユーティリティークラスを有効にするには、事前にtable要素をテーブル処理に使用するdiv要素の中にいれてください。6以下はテーブルに使用できるユーティリティクラスのリストです。
| オーバーフロー処理 | |
|---|---|
| これは要素内のオーバーフロー処理を行うために使用されます | |
| scroll-x | 要素の幅が広い場合に横スクロールバーを追加します |
| 幅調節 | |
| これは引用ブロックの幅の調整のために使用されます。幅はページ全体のコンテンツ幅 * 相対係数 という式で計算できます | |
| w-125 | 相対係数 = 0.125 |
| w-25 | 相対係数 = 0.25 |
| w-375 | 相対係数 = 0.375 |
| w-50 | 相対係数 = 0.50 |
| w-625 | 相対係数 = 0.625 |
| w-75 | 相対係数 = 0.75 |
| w-875 | 相対係数 = 0.875 |
| w-full | 相対係数 = 1 |
| 特殊スタイル | |
| これはテーブルに特殊スタイルを適用するために使用されます | |
| b-d | テーブルのヘッダーの色と罫線の色を強調するために同一にします |
| b-3 | 3本線の表に変更します |
その他
以前の平行テーマでの各種要素のカスタマイズやコンポーネントの調節は引き続きサポートしていますが、一部の機能は今後の保守及び開発の予定がなく、更に一部の機能は将来的に仕様が変更される可能性があります。以下が上記のような修正あるいはカスタマイズ要素です。
現在ユーティリティークラスによって置き換えられていないカスタム引用ブロック
[[div class="blockquote title" data-title="タイトルの例"]]
Lumina Crashテーマからコードの一部をフォークしています。
[[div class="blockquote title"]]
実は、タイトルなしでも使用できます。
[[div class="blockquote warning-panel" data-title="メモタイトル" style="--warning-logo: url("背景画像リンク");"]]
コード内のリンクやタイトルを置き換えることで、警告や通知を作成できます。
代替ヘッダーフォーマットのサポート(AIM&ACS)
サポートを有効するにはこれら2つのコンポーネントの[[include]]構文をそれぞれ[[div class="Parallel-ACS"]]と[[div class="Parallel-AIM"]]内に挿入してください。そうすることで独自の配色と外見の変更を実現することができます。
Earthworm下部ナビゲーション
このテーマでEarthworm下部ナビゲーションのスタイルがよりシンプルになりました。
スペシャルサンクス
このテーマはEstrellaYoshte氏と
Liryn氏と
Placeholder McD氏が作成したBedrockテーマをベースに作り直したものです。このテーマのスタイルは
Woedenaz氏が開発したBlack Highlighterテーマに多大な影響を受けており、現在平行テーマが使用しているSCPロゴもそのテーマのロゴを採用しています。
開発初期段階で中国支部のhoah2333氏に様々な建設的提案をして頂きました。
以上の方々の貢献は、平行テーマの開発に直接的かつ大きな影響を与えました。もちろん、私に問題を報告してくれた多くのユーザーや、様々なグループチャットで出会った友人たちの存在も忘れてはいけません。皆さんがいなければ、平行テーマは今日のような姿にはなっていなかったでしょう!
