Sparrowでは見た目のカスタマイズを行うことができます。
CSSのカスタマイズ方法
独自のCSSを適用する方法について解説します。
SparrowのCSSを上書きするためには、まずはDjangoプロジェクト内に上書き用のアプリを作ります。アプリ名は任意の名前で大丈夫です。今回は sparrowoverrides というアプリ名と仮定します。
$ python src/manage.py startapp sparrowoverridesアプリを作成したら、 INSTALLED_APPS への登録をします。
アプリ内に wagtail_hooks.py という名前のファイルを作り、以下のようなコードを書きます。
from django.utils.html import format_html
from django.templatetags.static import static
from wagtail import hooks
@hooks.register("insert_sparrowcommon_base_css")
def sparrowcommon_base_css():
return format_html('<link rel="stylesheet" href="{}">', static('sparrowoverrides/style.css'))これにより、 sparrowoverrides/static/sparrowoverrides/style.css のCSSがサイトに適用されるようになります。CSSのファイル名は任意の名前を設定できます。
例えば、記事一覧ページの記事リンクには border-radius が設定されていますが、これを無効化したい場合は以下のようなCSSを書きます。
.c-article-cards__item {
border-radius: 0;
}これにより、SparrowのデフォルトのCSSが上書きされます。
配色のカスタマイズ
Sparrowではデフォルトのプライマリカラーはグリーン系の色となっていますがこれを変更することが可能です。
読み込んだCSSファイル内の :root で色を定義します。以下がSparrowのデフォルトの :root 設定ですのでこれを上書きすることで配色を変更することが可能です。
現在、変数で管理できる色にはサイトのメイン色となるプライマリーカラーと、「重要タイプ」のボックスなどに適用されるレッド系カラーがあります。
:root {
// Color Primary
--color-primary-hue: 181;
--color-primary-saturation: 100%;
--color-primary-lightness: 25%;
--color-primary-hsl: hsl(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness));
--color-primary-desaturate-hsl: hsl(var(--color-primary-hue), calc(var(--color-primary-saturation) - 40%), var(--color-primary-lightness));
--color-primary-transparent-hsla: hsla(var(--color-primary-hue), var(--color-primary-saturation), var(--color-primary-lightness), 0.2);
// Color Red
--color-red-hue: 341;
--color-red-saturation: 94%;
--color-red-lightness: 66%;
--color-red-hsl: hsl(var(--color-red-hue), var(--color-red-saturation), var(--color-red-lightness));
--color-red-desaturate-hsl: hsl(var(--color-red-hue), calc(var(--color-red-saturation) - 40%), var(--color-red-lightness));
--color-red-transparent-hsla: hsla(var(--color-red-hue), var(--color-red-saturation), var(--color-red-lightness), 0.2);
}色はHSL記法で指定します。HSL記法は色を表現するための一般的な記法です。hue(色相)、saturation(彩度), lightness(輝度)の値を指定することで色を表現します。
例えば、プライマリーカラーを青系色(#04384D, rgb(4, 56, 77)) に変更したいとします。この色はHSLで表すと(H: 197, S: 90, L: 16) になるので以下のようにコードを書きます。(カラーコードやRGBからHSLへの変換は無料のWEBツールで簡単に行えます。)
:root {
--color-primary-hue: 197;
--color-primary-saturation: 90%;
--color-primary-lightness: 16%;
}これでプライマリーカラーが変更され、以下のように表示されます。
