【Cocoon】メニューデザインをマテリアル風にするCSSカスタマイズ

Cocoonカスタマイズ

今回は無料テーマ「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カスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント

  1. このCSSを使用させていただいたのですが、突如としてスマートホンでのマテリアル表示がされなくなりました。改善方法がわかれば教えていただきたいです。

    • コメントありがとうございます!
      すみません、こちらでは再現できませんでした。
      恐れ入りますが、問題が発生しているURLを教えて頂けますでしょうか?