サイト全体の背景色と文字色の変え方【Snow Monkey CSSカスタマイズ】

こんにちは、WebデザイナーのKazumiです。

Snow Monkeyで、サイトの背景と文字の色はどうやって変えるんだろう…?

この記事ではそんなお悩みを解決します!

サイト全体の背景色と文字色の変え方

・Snow Monkeyのサイト全体の背景色を変更する方法

・サイト全体の標準の文字色を変える方法

・背景画像を設定する方法

上記について順に解説していきます。

結論から言うと、Snow Monkeyのテーマで背景色や文字色を変更するには、CSSカスタマイズが必要です。
この記事に載せているCSSコードをコピー&ペーストすることで簡単に変更できます。

最後に背景に画像を設定する方法も解説しますので、ぜひ最後までご覧ください!

Snow Monkeyのテーマでは背景色や文字色はCSSでカスタマイズする

Snow Monkeyテーマで標準適用されている背景色は白、文字色は濃いグレーです。

ダッシュボード→外観→カスタマイズ→デザイン→基本デザイン設定 と進んでいくと、アクセントカラーやサブアクセントカラーの設定ができますが、

この「アクセントカラー」は見出しやボタンなど、各ブロックのデザインにアクセントとして使用されるものです。

▲基本デザイン設定では背景色や文字色の変更ができない

では背景の色や文字の色はどこで変更するの?というと、CSSコードでカスタマイズする必要があります。

ダッシュボード→外観→カスタマイズ→追加CSS と進むことでCSSコードの入力欄が表示されます。

▲カスタマイズの追加CSS
▲追加CSSの入力欄

この追加CSS欄にカスタマイズコードを入力して保存すると、サイトに反映されます。

サイト全体の背景色を変更する方法

まずはサイトの背景色を変更するコードです。

下記のコードをコピーして、追加CSS欄に貼り付けてください。

/* 背景色を変更 */
body {
  background-color: #f5f5dc;
}

「#f5f5dc」の部分はベージュのカラーコードなので、お好きな色のカラーコードに変更してくださいね。

カラーコードとは、「#」+「英数字6桁」の組み合わせで色を指定するコードです。

カラーコードを載せているサイトはたくさんありますので検索してみてください。
こちらのサイトはシンプルでわかりやすいのでおすすめです! ⇒原色大辞典

背景色変更の注意点

CSSで背景色を変更しても、ページの編集画面は白い背景のまま変わりません。プレビュー画面や実際のサイトでは背景色が変更されます。

白い文字を使ったときは、編集画面上で見えなくなってしまうこともあるので、その点は注意が必要です。

サイト全体の文字色を変更する方法

次に、サイトの文字色を変更するCSSコードです。

下記のコードをコピーして、追加CSS欄に貼り付けてください。

/* 文字色を変更 */
body {
  color: #008b8b;
}

背景色のコードと同じように、「#008b8b」の部分はお好きなカラーコードに変更してください。

背景色と文字色を同時に変更する方法

背景色と文字色をどっちも変更したい、という場合には下記のように追加CSSに記載します。

/* 背景色と文字色を変更 */
body {
  background-color: #f5f5dc;
  color: #008b8b;
}

背景色と文字色の指定は同じ「body」要素なので、ひとつにまとめることができます。

実際に追加CSSに記載すると、下記のように反映されます。

▲追加CSSなし
▲ 色変更の追加CSSあり

カラーコードは適宜変更して使用してください!

おまけ:サイト全体に背景画像を設定する方法

最後に、サイト全体に背景画像を設定する方法を解説します。
背景画像も追加CSSで指定します。

まずはダッシュボードのメディアライブラリから、背景に設定したい画像をアップロードします。
▲背景画像をアップロード
アップロードできたらその画像を開き、「ファイルのURL」を取得します。
▲画像のURLをコピーして控える
下記のコードを追加CSSに記載して、()の中身を②で取得したURLに差し替えます。
body {
background: url(画像のURL);
}

以上のステップでサイト全体に背景画像が表示されます!

実際にこのCSSで画像を設定してみると、下記のようになりました。

背景画像に使用した素材はこちらです。

一つの画像を繰り返して敷き詰めるように表示させるシンプルなCSSなので、おまけとして入れてみました。

コピペでOK|サイト全体の背景色と文字色の変え方 まとめ

・Snow Monkeyのサイト全体の背景色を変更する方法

・サイト全体の標準の文字色を変える方法

・背景画像を設定する方法

今回は上記について解説しました。

CSSコードをコピペして、カラーコードやURLを任意のものに変更するだけで設定できますので、ぜひお試しください。

Snow Monkeyの追加CSSカスタマイズ記事はこれからもどんどん増やしていきますので、他の記事もチェックしてみてくださいね。

ここまでお読みいただきありがとうございました!

この記事を書いた人

Kazumi

フリーランスWebデザイナーです。画像加工や動画編集、アニメ制作もしています。時間と場所に縛られない自由な生活を手に入れるためにスキルを磨いています!ブログでは学んだことのアウトプットをメインに役立つ知識を発信しています。