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

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

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

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

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

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

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

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

設定手順

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

CSSコードの作成・コピー

配色の設定は、以降に記載するコードをコピーした上で書き換えを行い、それを”追加CSS”の欄に貼り付けることで完了します。

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

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

カラーコード（#から始まる）の例を、ご参考までに以下にいくつか記しておきますので、よろしければお使いください。

以下の色以外で必要な色がある場合は、検索エンジンで”○色 HTML”などと検索してみてください。

紺色：#000080 または rgba(0,0,128,1)

スカーレット：#8C1717 または rgba(140,23,23,1)

暗い緑：#00543D または rgba(0,84,61,1)

濃い砂色：#A18C4D または rgba(161,140,77,1)

ピンク：#E95295 または rgba(233,82,149,1)

“追加 CSS”への貼り付け

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

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

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

このテキストボックスに既に入力されている文字列の最後尾の、さらに1行下の行をクリックして選択します。（この操作はコードを見やすくするために行います。何も書かれていない場合は、最初の1行を選択します）

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

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

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

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

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