らい帳

背景色などのカラーテーマやデザインを変更する

以下のように、本ソフトで作成したサイトのテーマ色は青緑色(色コード#70acb1)になっています。

らい帳の使い方 プレビュー 記事

テンプレート(nunjucks)やスタイルシート(css)は外部ファイルを読み込んでいるため、プログラミングの知識がある人ならそのファイルを変更することで自由にレイアウトを作り変えることができます。

ここでは、cssの知識がない人向けに、サイトのテーマ色を変更する方法を紹介します。

cssファイルを開く

サイトの作業フォルダを開くと以下のフォルダ構成になっていることが確認できると思います。

そのなかのcssフォルダが、サイトの色やデザインを定義したファイル群です。

色を定義しているファイルはvariables.cssですので、このファイルをテキストエディタなどで開きます。

  • myblog(入力したサイト名)
    • css
      • variables.css ←このファイルを開く
    • images
    • pages
    • preview
    • static
    • system
    • templates
    • config.json
    • markdown.json

以下のような内容が確認できると思います。

--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;
}

お使いのパソコンやテキストエディタの環境によって、内容が改行されずに1行で表示されてしまっている場合があります。

そのような場合は以下のプログラミング用のエディタで開くことをおすすめします。

  • サクラエディタ
  • Visual Studio Code
  • Atom
  • Sublime Text

--primary-color: #5654a2;となっている部分の#5654a2が色を表す値です。

16進数カラーコードという方法で指定しています。

以下のページがいろいろな色がまとめられているので参考になります。

https://www.colordic.org/

試しに#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)を修正すれば、例えばヘッダに好きな写真を表示したり、サブタイトルを表示したりといったように、サイトのデザインを自由に変更できます。



Related Posts

  • テーブル(表)を表現する

    テーブル(表)形式で表現したい場合は、以下のようにします。:の位置で文字寄せを指定できます。先頭に:XXXを記載すると、XXXは表題になります。


  • プログラミングコードをシンタックスハイライトで表示する

    プログラミングのコードを表現したい場合はコードの文字列を`(バッククウォート)で囲うと、囲われた部分の文字列はコードとして表現されます。変数に値を代入するにはa = 3;のようにします。複数行に渡るプ...


  • 文献などの引用を表現する

    文献などを引用を示すための表現をする場合は文章の先頭にを記載します。複数行に渡る文章の引用を示す場合はそれぞれの行の先頭にを記載します。Markdown(マークダウン)は、文書を記述するための軽量マー...


  • 数式をLATEXで表現する

    $$で囲うとLATEXの形式で数式を表現できます。$だと、文章中に数式を表現できます。数式の変換ライブラリはkatexを使用しています。詳しい使い方は公式ページをご確認ください。半径 rrr の円の面...


  • 箇条書きのリストを表示する

    箇条書きリストを表現するにはリストの各項目の先頭に*または-または+を記載します。+を使用した場合は、リストの先頭の・が表示されませんが、その代わりにアイコンリストとしてフォルダ構成などを表現できます...


  • 他のページヘのリンクを作成する

    別ページヘのリンクを作成するには[リンクテキスト](リンク先URL) ツールチップの形式で指定します。同一サイト内へのリンクは同じタブ、外部サイトへのリンクは新しいタブで開きます。wikipedia同...


  • 太字、斜体、打ち消し線、マーカーなどで文字を修飾する

    *や_などの記号を用いて、文字を太字にしたり、下線を引いたりすることができます。太字にしたい文字列を**または__で囲うと、囲われた部分の文字列は太字になります。このソフトを使用すれば、プログラミング...


  • 画像を表示する

    画像を表示する場合は、![画像の説明](画像のURL 画像タイトル)の形式で指定します。同一サイト内の画像の場合は以下のようにページ名とファイル名だけで指定することも可能です。/ファイル名/画像名の形...


  • 水平線を引いてコンテンツの区切りや改ページを表現する

    水平線を引いて記事の大きな区切りを表現したい場合は---または___または***を記載します。コンテンツ1コンテンツ2コンテンツ3*ではなく_で水平線を表示した場合は、改ページをする機能があります。印...


  • 見出し(ヘッダ)と段落をつける

    行の先頭に#をつけると、その行は見出し(ヘッダ)になります。見出しのレベルは1〜6まで用意されており、#ならレベル1 ######ならレベル6となり、レベルが小さいほうが大見出しとなります。# 見出し...