【動画あり】中国語コンテンツについて

Cocoonのスマホヘッダー・スライドインメニューのカスタマイズ

CocoonWordPress

Cocoonのモバイルヘッダー・スライドインメニューのカスタマイズについて書きます。

こんにちは。

いっちゃんです。(@hi_icchan_jp)

今回はCocoonテーマの①モバイルヘッダー色②モバイルスライドインメニューのカスタマイズをご紹介します。

①モバイルヘッダー背景色・文字色

スマホのモバイルヘッダーを設定してる方向けのCSSカスタマイズです。

CSSに以下を追加してください。

  1.     /*へッターモバイルメニュー色の変更*/
  2.      
  3.     .mobile-header-menu-buttons {
  4.     background: #008080;/*背景:エメラルド→自由に変更してください。*/
  5.     color: #FFFFFF; /*文字:白*/
  6.     }
  7.  

②モバイルスライドインメニューのカスタマイズ

当ブログのモバイルスライドインメニューのCSSカスタマイズです。

(注)色は変えてありますのでCSSでお好みの色にカスタマイズして下さいね。

透明度は下記のrgba(〇,〇,〇,透明度の数字数字を調節して変更できます。

※記載例:rgba(0, 0, 0, 0.8)

それでは、CSSに以下を追加してください。

  1.  
  2. /*mobile スライドインナビメニュー色*/
  3.  
  4. div.navi-menu-content {
  5.     background: rgba(0, 0, 0, 0.8);/* 背景色:黒*/  
  6. }
  7.  
  8. .menu-drawer a:hover {
  9.     background-color: transparent;/*背景透明 */
  10.     color: #808000; /* 文字色:オリーブ→ここを変更 */
  11. }
  12.  
  13. /*mobile スライドインナビ文字色.枠線*/
  14.  
  15. .navi-menu-content ul li a{
  16.   border-bottom: 1px dashed #fff; /* 下線の種類:白 */
  17.   color: #fff; /* 文字色:白 */
  18. }
  19.  

上記はスマホサイトの左上の三本線メニューボタンのコンテンツのカスタマイズです。

メニューごとに下線を引き、背景を透明の黒に設定しています。

今回のカスタマイズ内容のマトメです。

  • モバイルヘッダー、
  • モバイルスライドインメニュー

いかがでしたでしょうか?

最後までお読み頂きありがとうございます。

次回も役に立つカスタマイズをご紹介していきますね!


WordPressのインストール代行・カスタマイズをします!

ブログ制作に自信が無い、直し方が分からない方向けです。

いっちゃん
いっちゃん

女性の多くが「WordPressが苦手」ですよね?

事例① 「インストール」で挫折

事例② ”「頭が痛い」し難しい 

事例③ とにかく「分からない」

「何をすればいいの?」と悩む女性のあなたに朗報!

いっちゃんはCocoonのカスタマイズをお手伝いします。

デモサイトを見る >>


いっちゃん紹介

いっちゃん

いっちゃん
『Cocoonをカスタマイズ』

初心者向けにCocoonのカスタマイズをします。ご依頼はこちら。私の幼少期は外国語が嫌いで全く話せませんでした。しかし、多様性に慣れていた私は中国語を学び、人のご縁でシリコンバレーに滞在しました。ただいま、中国語学習動画を有料公開中。詳細はお問い合わせ下さい!

→ プロフィール
→ お仕事のご依頼
→ Cocoonのカスタマイズ

いっちゃんをフォローする !
はなしあいて①.com
タイトルとURLをコピーしました