Cocoonのモバイルヘッダー・スライドインメニューのカスタマイズについて書きます。
こんにちは。
いっちゃんです。(@hi_icchan_jp)
今回はCocoonテーマの①モバイルヘッダー色②モバイルスライドインメニューのカスタマイズをご紹介します。
①モバイルヘッダー背景色・文字色
スマホのモバイルヘッダーを設定してる方向けのCSSカスタマイズです。
CSSに以下を追加してください。
- /*へッターモバイルメニュー色の変更*/
- .mobile-header-menu-buttons {
- background: #008080;/*背景:エメラルド→自由に変更してください。*/
- color: #FFFFFF; /*文字:白*/
- }
②モバイルスライドインメニューのカスタマイズ
当ブログのモバイルスライドインメニューのCSSカスタマイズです。
(注)色は変えてありますのでCSSでお好みの色にカスタマイズして下さいね。
透明度は下記のrgba(〇,〇,〇,透明度の数字)数字を調節して変更できます。
※記載例:rgba(0, 0, 0, 0.8)
それでは、CSSに以下を追加してください。
- /*mobile スライドインナビメニュー色*/
- div.navi-menu-content {
- background: rgba(0, 0, 0, 0.8);/* 背景色:黒*/
- }
- .menu-drawer a:hover {
- background-color: transparent;/*背景透明 */
- color: #808000; /* 文字色:オリーブ→ここを変更 */
- }
- /*mobile スライドインナビ文字色.枠線*/
- .navi-menu-content ul li a{
- border-bottom: 1px dashed #fff; /* 下線の種類:白 */
- color: #fff; /* 文字色:白 */
- }
上記はスマホサイトの左上の三本線メニューボタンのコンテンツのカスタマイズです。
メニューごとに下線を引き、背景を透明の黒に設定しています。
今回のカスタマイズ内容のマトメです。
- モバイルヘッダー、
- モバイルスライドインメニュー
いかがでしたでしょうか?
最後までお読み頂きありがとうございます。
次回も役に立つカスタマイズをご紹介していきますね!