Cocoonのスライドインメニューをカスタマイズするためのセレクタ

過去にSimplicityのスライドインメニューをカスタマイズする記事を書きました。

後継テーマでのCocoonも同じcssが使えると思ったんですが、どうやらHTMLのセレクタ変わってるみたいなので新しく書き直す必要があるようです。

Cocoonになって新しくなったスライドインメニュー関連のセレクタを紹介しつつ、簡単なカスタマイズ方法を紹介するのでぜひ試してみてください。

【Cocoon】スライドインメニュー関連のHTMLセレクタ

Cocoonのスライドインメニューの各アイコンの大枠には「divタグ」が使われています。

左から「メニューボタン」「ホームボタン」「検索ボタン」「トップボタン」「サイドバーボタン」と５つ並んでいますね。

カスタマイズしやすいように、それぞれのdivタグに2つずつクラス名がつけられているんですが、まず1つ目に「.menu-button」というクラス名が共通でつけられています。

例えば、色付けしたい時など全てに同じスタイルを適用したいときなんかは、このセレクタを対象にすることで楽になりますね。

2つ目は下記で紹介している通り、それぞれに違うクラス名がつけられています。

もうお分かりかと思いますが、1つ1つに違うcssを適用したい時に使いましょう。

.navi-menu-button

.home-menu-button

.search-menu-button

.top-menu-button

.sidebar-menu-butto

ここからは上記で紹介した各アイコンのセレクタを使いつつ、実際のカスタマイズ例を紹介していきたいと思います。

使い方が分かれば独自のカスタマイズもできるようになるはずです。

全部で5つのアイコンがありますが、cssを使うことでその中から不要なアイコンのみを消すことが出来ます。

例えばホームボタンを消したい場合はこんな感じ。

.home-menu-button{
   display:none;
}

このように「displayプロパティ」を使って消すことが出来ます。

アイコンのデザインも変えることができます。

CocoonはSimplicity同様に「FontAwesome」を利用してアイコンフォントを表示しているので、その中にあるアイコンなら自由に表示させることができるんです。

例えば、トップボタンのアイコンデザインを変えるとしたらこんな感じに使います。

.top-menu-icon::before {
   content: "\f106";
}

他のサイトと変わった印象にしたい時に使ってみてください。

合わせて読みたい