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

ブログ

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

怠け者ブロガー「ブログのカラーを変えたいな〜でもどうやって変えればいいんだろう?」

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

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

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

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

参考にしてください。

見出し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;
}

このコードを使って自分のブログカラーを好きなようにカスタマイズしましょう。

▼色選びの参考に▼
ブログやSNSを利用する際に知っておくべき色が与える印象の違い

最後まで見ていただき、ありがとうございました。

ryublogに戻る

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

仕事依頼個人向け!Webサイト作成代行・今後のブログ運営方針相談、運用できるようになるまでサポートします!

公式LINE@


P.S.

スキル0・人脈0・知識0の会社員だったぼくが
自由な時間とお金、理想の人生を手に入れた
ネットビジネスの知識を凝縮した
りゅうのすけ公式のLINE@を始めました。

▼公式LINE@▼

ID:874bnbtx

毎日のようにラインで相談に乗っています。

気軽にメッセージください!

公式LINE@登録者限定!無料プレゼント

  1. 限定公開記事のパスワード配布
    • ブログ内での限定公開になっている記事のパスワードを配布してます。登録すれば即時受け取れます。
  2. 完全個別無料相談
    • これからネットで稼ぎたいという方に向けて、無料で相談を受け付けています。いつでもご相談ください!!!

※ワンクリックで登録可能

※個人情報はこちらからわからないようになっているのでご安心を