[COCOON]でモバイル用スライドインメニューの色を変更する

blog

「Cocoon」では、モバイル環境で表示するメニューが指定できます。「Cocoon設定」→「モバイル」タブから設定できます。

  • ボタンを表示しない(ミドルメニューのみ)
  • トップボタン
  • スライドインボタン

スライドインメニュー1

 

このブログでは、「スライドインボタン」を使用しています。デフォルトでは、このようなデザインになっています。

スライドインメニューデフォルト

当サイトは、見出しなど全体にブルー系で統一していますので、「スライドインボタン」もそのようにしてみたいと思います。

 

子テーマ使用を前提にしています。

 

ボタン色変更

各ボタンのセレクタは、以下のようになっています。

  • メニュー: 「navi-menu-button」
  • サイドバー: 「sidebar-menu-button」
  • 検索: 「search-menu-button」
  • トップに戻る: 「top-menu-button」
  • ホーム: 「home-menu-button」

 

各ボタンの背景色を、ブルー系にして文字色を白にしました。以下を子テーマのstyle.cssに追記しました。

.mobile-menu-buttons {
background: #0000cd;
}
.navi-menu-button,
.sidebar-menu-button,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.mobile-menu-buttons .home-menu-button > a{
color: #fff;
}

 

「トップに戻る」「ホーム」ボタンの文字のホバー色が、他と違っているため、他のボタンに合わせました。これも子テーマのstyle.cssに追記しました。

.top-menu-button a:hover, 
.home-menu-button a:hover {
color: #000; 
}

 

結果はこのようになりました。(「検索」をホバーした状態の画像)

スライドインメニューブルー

 

その他(まだやってないけど)

アイコンフォントは変更出来ます。ホームボタンを変更するなら、例えば(「Font Awesome」使用例)

.home-menu-icon::before {
	content: '\f1ad';
}

など。