PR

【Cocoon】ヘッダーモバイルボタンの背景色と文字色を変える方法

black and silver laptop computer on table
記事内に広告が含まれています。

WordPressの無料テーマ「Cocoon」では、パソコンでの閲覧時に表示されるヘッダーメニュー(グローバルメニュー)を「Cocoon設定」からカスタマイズできます。

しかし、スマホでの閲覧時に表示されるヘッダーモバイルボタンに関しては、「Cocoon設定」からはカスタマイズできません。

ヘッダーモバイルボタンの背景色や文字色を変更するためには、CSSコードを追加する必要があります。

スポンサーリンク

設定方法

まず、WordPressの管理画面の左側にあるメニューのなかから「外観」にカーソルを合わせ、表示された項目の中から「カスタマイズ」を選びます。

続いて、表示されたカスタマイズページのメニューから「追加 CSS」を選びます。

するとテキストボックスが表示されるので、ここに以下のコードを入力します。

/*ヘッダーモバイルボタンの背景と文字の色を変える*/
.mobile-menu-buttons {
 background: ○○;
 color: ○○;
}

backgroundに続く○○の部分には設定したい背景色のカラーコードを、colorに続く○○の部分には文字色のカラーコードを入力してください。

カラーコードがわからない場合は以下のサイトから調べられます。

ちなみに、デフォルトの設定は背景色が#ffffff(白)、文字色が#333333(黒)になっています。

この設定例では背景色が黒、文字色が白になり、デフォルトの設定から色が反転します。

コードを入力したら、必ず右上の公開ボタンをクリックしましょう。

公開済みに表示が切り替われば設定完了です。

スポンサーリンク

色が変わらない場合は

なかには上記の設定で色が変わらない人や、以前はこれで成功していたのに気がついたらデフォルトの色に戻っていたという人もいるでしょう。

私自身、いつの間にか設定が反映されなくなっていたことがありました。

調べてみたところ、設定自体は正しく行われているものの、デフォルトの色指定の方が優先されているようでした。

そこで、上記のコードで色が変わらない場合は、以下のように「!important」を追記してみてください。

/*ヘッダーモバイルボタンの背景と文字の色を変える*/
.mobile-menu-buttons {
 background: ○○!important;
 color: ○○!important;
}

「!important」は「重要」を意味するコードで、これを末尾につけるとそのコードが最優先で適用されるようになります。

設定後は公開ボタンのクリックを忘れないようにしてくださいね。

運営者
かなづち

国立大学にて日本文学を専攻。
一般企業に就職したのち、フリーランスのWebライターに転身。
クラウドソーシングサイトを通じて、大手出版社が運営する本のポータルサイトに書籍レビュー記事を投稿した経験を活かし、2019年に書籍・情報サイト「いかけや日記」を開設。
2020年頃、宝塚歌劇団のファンに。
舞台の原作本を読む機会が増えたことから、2024年、「いかけや日記」を宝塚原作本の紹介を中心としたサイトへとリニューアル。
なお、読書スピードは超スロー。

かなづちをフォローする
タイトルとURLをコピーしました