【Cocoon】モバイルメニューの配色設定

WordPressでテーマにCocoonを設定されている方で、

「ヘッダーモバイルメニューにサイトのキーカラー・イメージカラーを取り入れたい」

「モバイル端末で表示されるサイトページに個性を出したい」

方向けに、この記事では、モバイルメニューの配色の設定手順について解説しています。

スポンサーリンク

設定前・設定後のイメージ

配色の設定前のモバイルメニューは以下の画像のように、白の背景に黒の文字のデザインとなっていると思います。

以降で説明する手順では、このデザインを以下の画像のように、単色の背景に白の文字になるように変更することを目標とします。

設定手順

以下、設定手順を読み進める前に、モバイルヘッダーメニューに設定したい配色のカラーコードを、予め決めておくことをお勧めします。

CSSコードの作成・コピー

配色の設定を行うにあたっては、まず、以降に記載するコードをコピーして、メモ帳などに一旦貼り付け、書き換えを行います。

書き換えする場所は、以下に記載してあるCSSコードの2行目の”background:〇;”の”“です。

この文字をお好みのカラーコードに置き換えます。(一部の色は、英語名の入力でも設定可能です。背景色を半透明にしたい場合はrgba(〇,〇,〇,0.〇)を使用します)

コピー用CSSコード

.mobile-menu-buttons {
background: ;
color: white;
}

.mobile-menu-buttons .menu-button > a {
color: white;
}

カラーコード(#から始まる)は、以下にいくつか記しておきますので、よろしければお使いください。他に必要な色がある場合は、検索エンジンで”○色 HTML”などと検索してみてください。

紺色:#000080

スカーレット:#8C1717

暗い緑:#00543D

砂色:#E2CA76

薄いピンク:#FFC7E3

配色の設定用CSSコード(解説)

.mobile-menu-buttons ・・・mobile-menu-buttonsとクラス名が付けられた要素に対して括弧 { }内のコードを適用する

{
background: ; ・・・背景色を〇にする
color: white; ・・・文字色を白にする
}

.mobile-menu-buttons .menu-button > a ・・・mobile-menu-buttonsの下の階層のmenu-buttonとクラス名が付けられた要素以下のa(リンク)要素に対して括弧 { }内のコードを適用する

{
color: white; ・・・文字色を白にする
}

“追加 CSS”に貼り付け

次に、Wordpressの管理画面の左部メニューにある、”外観”にカーソルを合わせ、表示される項目の中から、”カスタマイズ”をクリックします。

続いて表示される、カスタマイズページのメニューの項目から、”追加 CSS”をクリックします。

“追加 CSS”をクリックすると、先ほどまでメニューの項目が表示されていた場所に、テキストボックスが表示されるはずです。

このテキストボックスに既に入力されている文字列の最後尾の、さらに2行下の行をクリックして選択します。(何も書かれていない場合は、最初の1行を選択します)

続けて、先ほど作成したCSSコードをコピーして、選択したテキストボックスの箇所に貼り付けます。

コードが貼り付けられたことを確認したら、最後に、上部の公開ボタンをクリックし、公開済みに表示が切り替われば保存完了です。

左上の×ボタンをクリックすると、トップページに戻ることが出来ます。

以上で、モバイルメニューの配色設定の手順は完了です。最後までお読みくださり、ありがとうございました。

記事の内容に関してご不明点などありましたら、お気軽にコメント欄までお寄せください。

コメント

タイトルとURLをコピーしました