こんにちは、りゅうのすけ(@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;
}
マナブログコピーを使用している場合はこちらのコードで色を変えることができます。
ぼくが使っている「JIN」は、
「外観」 ➡︎ 「カスタマイズ」 ➡︎ 「カラー設定」
ここで色を変えられます。
色の選び方に関しては、⬇︎下記記事を参考にしてください。
最後まで見ていただき、ありがとうございました。
記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
仕事依頼
公式LINE
- ブログを進めていく上でわからないことがある
- 設定など誰か相談できる人が欲しい
- 記事ネタに困った時に情報収集したい
- ブロガー仲間が欲しい
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
登録者特典
- 限定公開記事の共通パスワード配布
- サイト作成依頼クーポンコード
- ブログスターターキット
- 完全個別無料相談
- ブログ内の限定公開記事のパスワードを配布してます。
- サイト作成依頼時に使えるクーポンコードを配布します。
- ブログに必要な便利ツール、イラストなど随時更新
- ブログについて、1日1人限定で無料相談を受けてます。
(営業を仕掛けるのはやめてください。)
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!