マナブログコピーで使えるカラー変更用カスタマイズCSSのまとめ

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、マナブログコピーのカラーをカスタマイズするためのソースコードをまとめています。

初心者ブロガー

マナブログコピーのカラーを変えたいな〜でもどうやって変えればいいんだろう？

こういった方に向けて書いています。

＼デモサイト／

　【初心者向け】ブログのカラーを設定するためのカスタマイズコード

ryublog - マネーリテラシーを高める！

外部サイト

【初心者向け】ブログのカラーを設定するためのカスタマイズコード - ryublog

テーマによっては使えないかなと思いますが、参考にして見てください。

カスタマイズコードまとめ

ブログをカスタマイズしたいけど、プログラミングコードとか全くわからない！

という方に向けてカスタマイズコードをまとめてます。

参考にしてください。

見出し2

/*見出し2*/
.single h2 {
background: #f7f7f7;
padding: 20px 15px 18px;
color: #333;
border-left: 9px solid #FC9D9D;
line-height: 40px
}

「#FC9D9D」の部分を好きな色のカラーコードに変えてください。

見出し3

/*見出し3*/
.single h3 {
font-weight: 600;
color: #4663B4;
letter-spacing: 1.6px;
padding: 0px 15px 0px;
border-left: 9px solid #FC9D9D;
color: #333;
font-weight: 600;
margin-top: 60px
}

「#FC9D9D」の部分を好きな色のカラーコードに変えてください。

プロフィール画像下のライン

/*プロフィール画像下のライン*/
hr {
    width: 20%;
    border: 1px solid #FC9D9D;
}

「#FC9D9D」の部分を好きな色のカラーコードに変えてください。

背景

/*背景*/
main {
background: #AAD6EC;
}

「#AAD6EC」の部分を好きな色のカラーコードに変えてください。

ナビゲーションメニュー

/*ナビゲーションメニュー*/
header .nav-bg {
background: #5B5B5B;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 5px;
}

「#5B5B5B」の部分を好きな色のカラーコードに変えてください。

まとめ

⬇︎全コードのまとめです。

/*-------------------------
 カラー変更
-------------------------*/
/*見出し2*/
.single h2 {
background: #f7f7f7;
padding: 20px 15px 18px;
color: #333;
border-left: 9px solid #FC9D9D;
line-height: 40px
}
/*見出し3*/
.single h3 {
font-weight: 600;
color: #4663B4;
letter-spacing: 1.6px;
padding: 0px 15px 0px;
border-left: 9px solid #FC9D9D;
color: #333;
font-weight: 600;
margin-top: 60px
}
/*プロフィール画像下のライン*/
hr {
    width: 20%;
    border: 1px solid #FC9D9D;
}
/*背景*/
main {
background: #AAD6EC;
}
/*ナビゲーションメニュー*/
header .nav-bg {
background: #5B5B5B;
margin-top: 10px;
padding-top: 5px;
padding-bottom: 5px;
}

マナブログコピーを使用している場合はこちらのコードで色を変えることができます。

他のテーマを利用している場合は、「テーマ名色変更」など検索してみることをおすすめします。

ぼくが使っている「JIN」は、

　　「外観」　　➡︎　　「カスタマイズ」　　➡︎　　「カラー設定」

ここで色を変えられます。

色の選び方に関しては、⬇︎下記記事を参考にしてください。

＼カラーコード取得ツールまとめ／

ブログのデザインを決めるのに使えるおすすめツールまとめ