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

今回は無料テーマ「Cocoon」のメニューバーをマテリアル風にデザインするカスタマイズをご紹介します。

このカスタマイズでは下記のような機能を実装できます。

百聞は一見に如かず。以下のようになります。

しっかりと、展開したサブメニューにも影が付いていますね。

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

※CSSカスタマイズについては【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。を参考にしてください。

【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。

こんにちは、さいとう（@S41T0H）です。 最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。 その中で多いのが「カスタマイズが適用されない！！！！！！！！」というもの。 せっかく当サイトを見つ...

s41t0h.jp

2018/08/23

まずは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（ポルカ）

"今後の記事執筆の励みになります！"を支援のおかえしとして受け取ることができます。

polca.jp

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