背景色などのカラーテーマやデザインを変更する
以下のように、本ソフトで作成したサイトのテーマ色は青緑色（色コード#70acb1）になっています。
テンプレート（nunjucks）やスタイルシート（css）は外部ファイルを読み込んでいるため、プログラミングの知識がある人ならそのファイルを変更することで自由にレイアウトを作り変えることができます。
ここでは、cssの知識がない人向けに、サイトのテーマ色を変更する方法を紹介します。
cssファイルを開く
サイトの作業フォルダを開くと以下のフォルダ構成になっていることが確認できると思います。
そのなかのcssフォルダが、サイトの色やデザインを定義したファイル群です。
色を定義しているファイルはvariables.cssですので、このファイルをテキストエディタなどで開きます。
- myblog(入力したサイト名)
- css
- variables.css ←このファイルを開く
- images
- pages
- preview
- static
- system
- templates
- config.json
- markdown.json
- css
以下のような内容が確認できると思います。
--primary-colorがサイトのヘッダやフッタの背景色などに使用されているメインカラーです。
variables.css:root {
--red: #d95c5c;
--orange: #e07b53;
--green: #5bbd72;
--blue: #3b83c0;
--primary-color: #70acb1;
--positive: color-mod(var(--green) alpha(20%));
--negative: color-mod(var(--red) alpha(20%));
--mark: color-mod(#ff0 alpha(20%));
--text: #24292e;
--light_text: #fef4e9;
--link: #0366d6;
}お使いのパソコンやテキストエディタの環境によって、内容が改行されずに１行で表示されてしまっている場合があります。
そのような場合は以下のプログラミング用のエディタで開くことをおすすめします。
- サクラエディタ
- Visual Studio Code
- Atom
- Sublime Text
--primary-color: #5654a2;となっている部分の#5654a2が色を表す値です。
16進数カラーコードという方法で指定しています。
以下のページがいろいろな色がまとめられているので参考になります。
試しに#5654a2の部分を#5654a2（紫色）に変更してファイルを上書き保存します。
variables.css:root {
--red: #d95c5c;
--orange: #e07b53;
--green: #5bbd72;
--blue: #3b83c0;
--primary-color: #5654a2;
--positive: color-mod(var(--green) alpha(20%));
--negative: color-mod(var(--red) alpha(20%));
--mark: color-mod(#ff0 alpha(20%));
--text: #24292e;
--light_text: #fef4e9;
--link: #0366d6;
}プレビューで確認すると、以下のように変更されていることが確認できます。
スタイルシート（css）を修正すれば、例えばヘッダに好きな写真を表示したり、サブタイトルを表示したりといったように、サイトのデザインを自由に変更できます。