「Cocoon」では、モバイル環境で表示するメニューが指定できます。「Cocoon設定」→「モバイル」タブから設定できます。
- ボタンを表示しない（ミドルメニューのみ）
- トップボタン
- スライドインボタン
このブログでは、「スライドインボタン」を使用しています。デフォルトでは、このようなデザインになっています。
当サイトは、見出しなど全体にブルー系で統一していますので、「スライドインボタン」もそのようにしてみたいと思います。
子テーマ使用を前提にしています。
ボタン色変更
各ボタンのセレクタは、以下のようになっています。
- メニュー： 「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';
}など。
