【初心者向け】ブログのカラーを設定するためのカスタマイズコード
こんにちは、りゅうのすけ(@k_r001)です。
怠け者ブロガー「ブログのカラーを変えたいな〜でもどうやって変えればいいんだろう？」
今回こういった方に向けて書いています。
この記事の目次
カスタマイズコードまとめ
ブログをカスタマイズしたいけど、プログラミングコードとか全くわからない！
という方に向けてカスタマイズコードをまとめてます。
参考にしてください。
見出し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を利用する際に知っておくべき色が与える印象の違い
最後まで見ていただき、ありがとうございました。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
仕事依頼個人向け！Webサイト作成代行・今後のブログ運営方針相談、運用できるようになるまでサポートします！
▼公式LINE@▼
P.S.
スキル0・人脈0・知識0の会社員だったぼくが
自由な時間とお金、理想の人生を手に入れた
ネットビジネスの知識を凝縮した
りゅうのすけ公式のLINE@を始めました。
▼公式LINE@▼
ID：874bnbtx
毎日のようにラインで相談に乗っています。
気軽にメッセージください！
公式LINE＠登録者限定！無料プレゼント
- 限定公開記事のパスワード配布
- 完全個別無料相談
- ブログ内での限定公開になっている記事のパスワードを配布してます。登録すれば即時受け取れます。
- これからネットで稼ぎたいという方に向けて、無料で相談を受け付けています。いつでもご相談ください！！！
※ワンクリックで登録可能
※個人情報はこちらからわからないようになっているのでご安心を