Basaltテーマ
このページはカスタムテーマページです。
Wiki内で使用されているカスタムテーマのためのページです。





basalt-thumbnail.png

Basalt

評価: +31+x
blank.png


BASALT THEME

VERSION 1.5

これは何?

BASALTテーマは、EstrellaYoshteEstrellaYoshtePaperstackの拡張としてLirynLirynPlaceholder McDPlaceholder McDによって開発された、いずれのカノン・シリーズ・GoIにも縛られない、美しさにこだわったテーマです。

Black Highlighterと同様に、BASALTはサイトのレイアウトを大幅に見直し、生産性やアクセシビリティの向上のため、大半のテーマでは通常は見落とされている多くのUI要素を変更しました。そして外観もCoolです。

BASALTテーマを使用するには、次の構文を記事にコピー&ペーストするだけです。

[[include :scp-jp:theme:basalt]]

Please make sure this is at the very top of the page to avoid display issues.

表示上の問題を避けるため、必ずページの最上部に構文を置いてください。

テーマ設定

テーマ設定 (引数と呼ばれることもあります) は、BASALTのinclude構文に書き加えることで特定の機能の使用/不使用を選択することができる追加の文字列です。

設定を適用するためには、include構文の本体と最後の2つの括弧のに、下記のリストにある例のひとつを次のように挿入します。

[[include :scp-jp:theme:basalt themesetting=a]]

テーマ設定を組み合わせて使うのは簡単です。同時に複数を使用するには、以下の書式に従ってください。

[[include :scp-jp:theme:basalt firstthemesetting=a|secondthemesetting=a|thirdthemesetting=a]]

テーマ設定一覧 (バージョン1.0現在)

hidetitle=a

ページタイトルを非表示化します。

acsanimation=a

デフォルトで有効になっているACSアニメーションを無効化します。

darkmode=a

ダークモードを有効化します。 (参照: ONYX (ダークモード))

redmode=a

レッドモードを有効化します。この機能を適用するにはダークモードを使用している必要があります。 (参照: GARNET (レッドモード))

darksidebar=a

ダークモードでのサイドバーのスタイルをライトモードに適用します。

infostyle=a

creditモジュールの外見をinfo-rateモジュールと似たものに変更します。

engtitle=a

ヘッダータイトルの日本語用の調整を取り消します。ヘッダータイトルを英字のみに変更したときなどに、文字がずれるのを解消するのに使用します。


カスタマイズ

タイトル・サブタイトル・ロゴの変更

ヘッダーに表示されるタイトル・サブタイトル・ロゴを変更したいときは、次のコードを使用してください。

:root {
--logo: url(<画像リンク>);
--title: "<タイトルテキスト>";
--subtitle: "<サブタイトルテキスト>";
}

--titleプロパティは、モバイル機器での表示上の問題を避けるため、デフォルトの文字列と概ね同じ (あるいはより短い) 文字数にすることを推奨します。

※JP版テーマでは事情が少し異なります。"SCP FOUNDATION"と比べて"SCP財団"は文字数がかなり少なく、それに合わせてトップバーの位置を変更した関係で、状況によっては改変する必要があります。次のコードを使用して調整することで、ヘッダータイトルおよび/またはヘッダーサブタイトルを長くしたときに、1020px以上の画面幅のレイアウトでトップバーと重なるのを防ぐことができます。

:root {
--titleLength: <長さの値>;
}

ただし、--titleLengthプロパティの値は15.7rem (約250px) 以下にすることを推奨します。これは、原語版テーマと同じく表示上の問題を避けるためです。

デフォルトでは、サイドバーに表示されるロゴとテキストはヘッダーのものと同一になります。これを変更したいときは、次のコードを使用してください。

:root {
--sidelogo: url(<画像リンク>);
--sidesubtitle: "<テキスト>";
}

ONIX (ダークモード)

BASALT_DARKMODE_JP.png

ONYX

ダークモードを有効化するには、前述したとおり、次のコードを使用してください。

[[include :scp-jp:theme:basalt darkmode=a]]

GARNET (レッドモード)

BASALT_APOLLYON_JP.png

GARNET

レッドモードを有効化するには、前述したとおり、次のコードを使用してください。

[[include :scp-jp:theme:basalt darkmode=a|redmode=a]]

BASALTが導入しているもの

コンポーネント

BASALTには、コミュニティ製のいくつかのコンポーネントがあらかじめパッケージされています。

また、もしこれらのコンポーネントを使ったなら、それらの外見が変化しています。

テーマ

BASALTはこれらのテーマの要素を 盗用 借用しています。


basalt_logotype_black.png

画像ブロック

分割線は4つのハイフン(----)で作ることができ、何かの中でない限り(例えば引用ブロック)ページ全体に展開されます。この文章を区切る線が分割線です。

訪問したことのあるであろうリンク


見出しは行の先頭に1から6個のプラス(+)を置くことで作れます。

これはビッグテキストのspan要素です。これを作るには [[span class="bigtext"]] を使用してください。

これはスペシャルテキストのspan要素です。これを作るには [[span class="st"]] を使用してください。
スペシャルテキストspanは、後述するカラーテーブルdivの中では文字色も変更します。 あなたのためだよ、Placeholder。

これは圏点のspan要素です。これを作るには [[span class="kt"]] を使用してください。

シャベルの何が革新的なんだい?

そいつは未知を切り開いた道具なのさ。


これは引用ブロックです。行の先頭に"> "を書くことで作成できます。
追加の文章


分割線

入れ子になった引用ブロック

これは通常のテーブルです
ここに文章

テーブルは特殊なdivで囲むことでカラーリングが可能です。また、これらのdivで囲まれた画像ブロックと スペシャルテキストspan も、それに応じて色が変更されます。

[[div class="table1"]]

これは緑色のテーブルです。
ここに文章

[[div class="table2"]]

これは青色のテーブルです。
ここに文章

[[div class="table3"]]

これは黄色のテーブルです。
ここに文章

[[div class="table4"]]

これは橙色のテーブルです。
ここに文章

[[div class="table5"]]

これは赤色のテーブルです。
ここに文章

[[div class="table6"]]

これは紫色のテーブルです。
ここに文章

次のdiv要素を使うことで分割テーブルを作ることもできます。

[[div class="tableb"]]

これは分割テーブルです。
ここに文章

これは ドキュメントdivです。これを作るには [[div class="document"]] を使用してください。 他のdiv要素の中に入れないことを推奨します。

これはダークドキュメントdivです。これを作るには [[div class="document"]] を使用してください。 他のdiv要素の中に入れないことを推奨します。

これはRAISA記録・情報保安管理局通達divです。これを作るには [[div class="raisa_memo"]] を使用してください。

これは装飾divです。これを作るには [[div class="notation"]] を使用してください。

これは上の装飾divのスリムなバージョンです。これを作るには [[div class="smallmodal"]] を使用してください。

これは3つ目の装飾divです。これを作るには [[div class="jotting"]] を使用してください。

これは4つ目の装飾divです。これを作るには [[div class="transcript"]] を使用してください。

これは5つ目の装飾divです。これを作るには [[div class="papernote"]] を使用してください。

本文フォントはInter
見出しフォントはWork Sans
等幅フォントはFira Code


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