Cocoonのモバイルヘッダー・スライドインメニューのカスタマイズについて書きます。
こんにちは。
いっちゃんです。(＠hi_icchan_jp)
今回はCocoonテーマの①モバイルヘッダー色②モバイルスライドインメニューのカスタマイズをご紹介します｡
①モバイルヘッダー背景色・文字色
スマホのモバイルヘッダーを設定してる方向けのＣＳＳカスタマイズです。
CSSに以下を追加してください。
- /*へッターモバイルメニュー色の変更*/
- .mobile-header-menu-buttons {
- background: #008080;/*背景:ｴﾒﾗﾙﾄﾞ→自由に変更してください｡*/
- color: #FFFFFF; /*文字:白*/
- }
②モバイルスライドインメニューのカスタマイズ
当ブログのモバイルスライドインメニューのＣＳＳカスタマイズです。
(注)色は変えてありますのでＣＳＳでお好みの色にカスタマイズして下さいね。
透明度は下記の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; /* 文字色:白 */
- }
上記はスマホサイトの左上の三本線メニューボタンのコンテンツのカスタマイズです。
メニューごとに下線を引き、背景を透明の黒に設定しています。
今回のｶｽﾀﾏｲｽﾞ内容のマトメです。
- モバイルヘッダー、
- モバイルスライドインメニュー
いかがでしたでしょうか？
最後までお読み頂きありがとうございます。
次回も役に立つカスタマイズをご紹介していきますね！