Centered Header Sigma-9
このページはコンポーネントページです
Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。
評価: +23+x
blank.png

著者:
Lt FlopsLt Flops


フォーク元:
EstrellaYoshteEstrellaYoshteによるPenumbraテーマ


画像提供:
WoedenazWoedenazによる"logo.svg"
CC BY-SA 3.0下で提供。


使用方法:
ここをクリック

これは何?


これはシグマ-9に新たな中央寄せのヘッダーデザインを導入したコンポーネントです。EstrellaYoshteEstrellaYoshteによるPenumbraテーマからフォークされています。

当コンポーネントはトグル式サイドバーとの併用を推奨します。

当コンポーネントはBlack Highliterとの互換性を有しませんCentered Header BHLはここからアクセス可能です。

使用方法


当コンポーネントの導入には、以下の構文をページの最上部に貼り付けてください。シグマ-9ベースのカスタムテーマを使用している場合、以下の構文をカスタムテーマのincludeの直後に以下の構文を貼り付けてください。

[[include :scp-jp:component:centered-header-sigma-9]]

タイトル、サブタイトル、ヘッダータイトルの文字色、ヘッダーのサブタイトルの文字色、並びにヘッダーロゴは自由に変更が可能です。この構文をinclude直後に貼り付け、スタイルを設定するだけです。

[[module CSS]]
:root{
--header-title: "タイトル";
--header-subtitle: "サブタイトル";
--titleColor: タイトルの文字色;
--subtitleColor: サブタイトルの文字色;
--lgurl: url(ここにURL);
}
[[/module]]

既定のheader-title及びheader-subtitleに設定されているフォントはMontserratです。

ページにおけるオリジナルのフォントをheader-titleに適用したい場合は以下のコードを追加してください。

#header h1 a::before{
font-family: unset;
}

ページにおけるオリジナルのフォントをheader-subtitleに適用したい場合は以下のコードを追加してください。

#header h2::before{
font-family: unset;
}

既定のtitleColor
hsl(0, 0%, 95%)です。
既定のsubtitleColor
hsl(60, 62%, 85%)です。

オリジナルのタイトルの色を維持したいのであれば、これら2つのフィールドを完全に省略可能です。

又、ロゴ無しを選択する事も可能です。

:root{
--lgurl: none;
}

当コンポーネントはヘッダーのデザインに通常と異なるアプローチを取るため、(SCP Pride Template, Pride Highlighter、並びにCalibriの超クールなオルタネイトSCPロゴページのような)ロゴコンポーネントは想定通りに動作しません。仮に以上のページのロゴを使用したい場合は該当するページの"Files"セクションを開き1、必要なロゴ画像を直接リンクしてください。

[オプション] トグル式サイドバーへのクイックアクセス:

[[include :scp-jp:component:toggle-sidebar]]

ソースコード

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