ロゴ
【note:検索上位を狙うブログ理論】一騎当千SEO

【マナブログコピー(WordPressテーマ)】スマホ版:ヘッダーの背景色とハンバーガーメニューの背景色を変える方法

外観デザイン設定

こんにちは、ごま吉(@Lv1gomakichi)です。

この記事では、マナブログコピーのスマホのヘッダーの背景色とハンバーガーメニューの背景色を変える方法を紹介します。

【Manablog Copy】スマホ版:ヘッダーの背景色とハンバーガーメニューの背景色を変える方法

スマホ版のヘッダーの背景色とハンバーガーメニューの背景色を変える方法は以下です。

※PC版の変更は別のコードが必要です。(こちらの記事をご参考ください
※ver2にて動作確認済み

カスタマイザー追加CSSに下記のCSSコードをコピペします。



@media only screen and (max-width: 479px){
header {background: #50CD2D;}
	
.pushy {
background: #50CD2D;
}
	
header .nav .open>a, header .nav .open>a:hover, header .nav .open>a:focus {
background-color: #BCE7C8;
}
	
.pushy a {
color: #fff;
}
	
header .dropdown-menu>li>a {
color: #fff;
}
	
}


コードの対応箇所は以下です。




コード内のカラーコード(#番号)をお好みで変更してください。


ちなみにカラーコードは、こちらのサイトが参考になります。
参考配色の見本帳


【動画解説】スマホ版:ヘッダーの背景色とハンバーガーメニューの背景色を変える方法

動画でも解説していますので合わせてご参考ください。


画像提供:Freepik – jp.freepik.com によって作成された technology ベクトル



\将来につながるプログラミング/

エンジニアとして活躍したい人
プログラミング未経験でも安心
WordPressにもっと詳しくなれる
無料体験レッスン受講後に受講料が1万円引に!




注目こちらも合わせてどうぞ▼
アフィリエイトを始めるための手順を紹介しています。マナブログコピーのカスタマイズが終わったら『ASP登録』をしましょう。

note


注目こちらも合わせてどうぞ▼
アフィリエイト初心者向けに【月3,000円を稼ぐ着実なSEO】をテーマにnote執筆しました。マナブログコピーと合わせて運用すると効果大です。

note

人気記事【マナブログコピー(WordPressテーマ)】文字装飾プラグインの設定