コピーライトの背景色・文字色・位置の変更方法【Snow Monkey CSSカスタマイズ】

Snow Monkeyのコピーライトって黒背景で固定なの？色や配置を変えたいんだけど…

追加CSSにカスタマイズコードを入力することで簡単に変更できますよ！

この記事では、Snow Monkeyテーマのコピーライトカスタマイズについて解説していきます。

コピペできるCSSコードとあわせて順に説明しますので、ぜひ最後までご覧ください。

コピーライトのカスタマイズ方法

コピーライト自体の文章はダッシュボード⇒外観⇒カスタマイズ⇒サイト基本情報から変更できます。

デフォルトのコピーライト表示は黒背景、ライトグレーの文字色、左寄せになっています。

追加CSSでカスタマイズすることで、サイトのデザインに合わせて配色や位置を変更できます。

当サイトでは背景色をライトグレー、文字色を濃いグレー、配置は中央寄せにしています。

追加CSSは、ダッシュボード⇒外観⇒カスタマイズ⇒追加CSSに進むと編集できます。

コピーしたCSSはこちらの追加CSS入力欄に貼り付けてください。

背景色の変更方法

背景色を変更するCSSは、下記の通りです。

/* コピーライトの背景色変更 */
.c-copyright{
  background-color: #F7F7F7;
}

「#F7F7F7」はライトグレーのカラーコードです。
任意のカラーコードに変更して、追加CSS欄にコピペしてください。

カラーコードを選ぶならこちらのサイトが便利です。　⇒原色大辞典

文字色の変更方法

文字色を変更するCSSは、下記の通りです。

/* コピーライトの文字色変更 */
.c-copyright{
  color: #828282;
}

「#828282」は濃いグレーのカラーコードです。
任意のカラーコードに変更して、追加CSS欄にコピペしてください。

位置の変更方法（中央寄せや右寄せにする）

コピーライトの文字位置を変更するCSSは、下記の通りです。

/* コピーライトの中央寄せ*/
.c-copyright{
  text-align: center;
}

/* コピーライトの右寄せ*/
.c-copyright{
  text-align: right;
}

デフォルトのコピーライトは左寄せなので、中央寄せと右寄せのCSSを載せています。
デザインにあわせて追加CSS欄にコピペしてください。

配色と位置をまとめて変更するCSS

コピーライトの配色や位置をまとめて指定するCSSです。

/* コピーライトの背景色・文字色・中央寄せ*/
.c-copyright{
  background-color: #F7F7F7;
  color: #828282;
  text-align: center;
}

背景色も文字色も配置もまとめて変更したい！という場合には、上記のコードを使用してください。

背景色は「background-color」、文字色は「color」で指定しています。カラーコードは適宜変更してください。

文字の位置は「text-align」で中央寄せに指定しているので、右寄せにしたい場合は、「center」を「right」に変更してください。

コピーライトの背景色・文字色・位置の変更方法　まとめ

今回はコピーライトのカスタマイズ方法をご紹介しました。

該当のCSSを追加CSS欄にコピペすることで簡単にカスタマイズできますので、ぜひ試してみてください！

おすすめなのはコピーライトの背景色を白にして背景と馴染ませたり、アクセントカラーと同じ色にしたり、といった使い方です。

デフォルトの黒背景だとサイトデザインからちょっと浮いてしまう…なんてときに便利です。

今後もSnow Monkeyのカスタマイズ記事を追加していきますので、ぜひ他の記事もご覧ください。
最後までお読みいただきありがとうございました！