今回は無料テーマ「Cocoon」のメニューバーをマテリアル風にデザインするカスタマイズをご紹介します。
このカスタマイズでは下記のような機能を実装できます。
- 影をつけてメニュー全体が浮き上がったようなデザインに。
- 現在いるページの項目には下線をつけ、文字色を濃くする。
- マウスオーバーでふわっとアニメーションしつつ下線と文字色変更。
百聞は一見に如かず。以下のようになります。
しっかりと、展開したサブメニューにも影が付いていますね。
Cocoonのメニューデザインをマテリアル風にするCSSカスタマイズ
※CSSカスタマイズについては【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。を参考にしてください。

【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。
こんにちは、さいとう(@S41T0H)です。 最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。 その中で多いのが「カスタマイズが適用されない!!!!!!!!」というもの。 せっかく当サイトを見つ...
まずはCocoon設定を変更
「Cocoon 設定」→「ヘッダー」からヘッダー設定を開きます。
例では「センターロゴ(スリム)」に設定していますがお好みでどうぞ。
重要なのは「グローバルナビメニュー色」の部分。
グローバルナビ色は「#ffffff」、グローバルナビ文字色は「#333333」にしておいてください。
設定できたら忘れずに「変更をまとめて保存」をクリックします。
CSSカスタマイズ
「テーマの編集」からCocoon Child(子テーマ)のstyle.cssを編集していきます。
以下のコードを子テーマ内のstyle.css内に追記してください。
nav#navi, .menu-header .sub-menu{ font-weight: bold; box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2); } .menu-header .sub-menu .item-label{ font-size: 80%; } .menu-header .item-label{ color: #b5b5b5 !important; } .menu-header .current-menu-item, .menu-header .current-post-item, .menu-header .current-menu-ancestor, .menu-header .current-post-ancestor, .menu-header .menu-item:hover { color: #333 !important; border-bottom: 3px solid #FDD835; transition: all .2s ease; } .menu-header .sub-menu .menu-item, .menu-header .sub-menu .menu-item:hover{ border-bottom: none; } .menu-header .current-menu-item>a .item-label, .menu-header .current-post-item>a .item-label, .menu-header .current-menu-ancestor>a .item-label, .menu-header .current-post-ancestor>a .item-label, .menu-header .item-label:hover{ color: #333 !important; transition: all .2s ease; }
いかがだっただろうか。
Cocoonはシンプルで、たいへんカスタマイズのしがいのあるテーマとなっています。
ブログ初心者で収益のでない時期は無料テーマの外見をいかに有料テーマに近づけられるか、で勝負してみるのもいいかもしれませんね。
【支援お待ちしております!】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)
継続的な更新・サポートのためにご支援お願いいたします……!
▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています!
今後の記事執筆の励みになります!を支援のおかえしとして受け取ることができます。
その他のカスタマイズは下記ボタンから。
コメント
このCSSを使用させていただいたのですが、突如としてスマートホンでのマテリアル表示がされなくなりました。改善方法がわかれば教えていただきたいです。
コメントありがとうございます!
すみません、こちらでは再現できませんでした。
恐れ入りますが、問題が発生しているURLを教えて頂けますでしょうか?
はじめまして!いつも参考にさせていただいてます。
初心者中の初心者で、質問内容も勉強不足で申し訳ないのですが、追記箇所がわからず教えていただきたいです。cocoon childの何行目にこちらを入力すれば良いのでしょうか?
お忙しい中恐縮ですが宜しくお願いいたします!
コメントありがとうございます。
style.cssの最下部に追加すれば問題ないかと思います。
(@mediaから始まるメディアクエリの中ではないです)
大変参考になりました!他の記事も拝読します。質問なのですが、色を変えたい場合はどのようにするのでしょうか?この黄色以外も可能ですか?