\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

Cocoonでフッターモバイルメニューの背景色をカスタマイズする方法

Cocoonでモバイルフッターメニュー の背景色を変えるカスタマイズ ブログデザイン
Cocoonでモバイルフッターメニュー の背景色を変えるカスタマイズ
この記事は約4分で読めます。

この記事ではWordPressテーマCocoonのフッターモバイルメニューの背景色をカスタマイズする方法をご紹介いたします。

Cocoonでフッターモバイルメニュー、モバイルボタンをカスタマイズする
クリニックすると拡大します

自分のサイトをカスタマイズし始めると、次第にスキンで制御されているフッターモバイルメニューも自分好みにしたくなってくきますよね。

そんな悩みを解決するために、今回はフッターモバイルメニューをカスタマイズするためのコピペcssをご用意いたしました

これで、ヘッダーメニューや見出しの色と合うサイトに仕上がりますよ。

スポンサーリンク

フッターモバイルメニューの背景色を変える方法

手順は次の通りになります。

① cssをコピー

② 自分の好きなRGBカラーコードを取得

③ cssを好みにカスタマイズ

④ style.cssにペーストして完成!

ステップ①:cssをコピー

↓のcssをコピーして、メモ帳かどこかに張り付けましょう。(これまでカスタマイズしたものが吹き飛んでしまう可能性もあるため)

/*フッターモバイルメニュー変更*/
.mobile-menu-buttons {
	background:rgba(235, 106, 106,0.9);/*フッターメニューの背景を半透明化*/
}

/* ボタンhover時の文字・背景変更 */
.mobile-menu-buttons .menu-button:hover {
	background:rgba(189, 71, 71,0.9); /* 背景色 */
	color: #fff; /* 文字の色 */
}

/* トップ・ホームの『文字』は構造上別途必要 */
.top-menu-button a:hover, /*トップに戻る画像を入れる場合はこの1行削除*/
.home-menu-button a:hover {
	color: #fff; /* ここは同じ文字色を */
}

step②:自分の好きなRGBカラーコードを取得

次に、お好みのRGBカラーコード2色を取得しましょう。(カーソルを当てたホバー時の色もカスタマイズするため)

【豆知識】webサイトで使われている好きなカラーを調べる方法

webサイトで使われている気になる色や、Cocoonで使われているカラーコードと揃えたい方は↓の動画をみてお好きなカラーコードを取ってきてください。

※今回はhtmlカラーコードではなくて、RGBカラーコードなので、下の動画の2分あたりまでを見てもらえたら大丈夫です。

step③:cssを好みにカスタマイズ

RGBカラーコードが取得できたら、下のようにRGBカラーの数字を(R,G,B,透明度の順で入れて下さい。

Cocoonでフッターモバイルメニュー、モバイルボタンをカスタマイズする
クリックすると拡大します

上の段→通常時の背景色、
下の段はホバー時の背景色です。
(私はホバー時のカラーを同系色で少し暗めのピンクにしています。)

ちなみに透明度のカスタマイズですが、これはスマホでスクロールする際に「まだ下にもありますよ~」を伝えるために入れました。

もし透明にしたくない場合は、透明度のところに「1.0」という数字を入れていただき、もっと透明にしたい場合は0.9…0.8…0.7…と刻んでいけば調節できます。

step④:style.cssにペーストして完成!

お好みのcssにできたら、ダッシュボード> 外観テーマエディタ-Cocoon childstyle.css を選択して下さい。

Cocoonでフッターモバイルメニュー、モバイルボタンをカスタマイズする
クリックすると拡大します

↑のような場所に張り付けていただいたら、保存ボタン を押してカスタマイズ終了です。

【 Before&After 】フッターモバイルメニューの背景色をカスタマイズ

Cocoonのフッターモバイルメニューの背景色をカスタマイズしたBefore&Afterをはこちら。

Cocoonでフッターモバイルメニュー、モバイルボタンをカスタマイズする
クリックすると拡大します

Cocoonスキンの海老茶を使用していたのでフッターモバイルメニューの背景色が茶色一色でしたが、カスタマイズしたことで透明度が出たかつ、私のマイカラー(#ff5757)が反映されて統一感が出ました。

透明度出しすぎるとスケスケで逆に見にくくなってしまうので注意。

0.8~0.9あたりだと程よく記事の存在をアピールできてグッドです。

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