「Cocoonのメニューのホバーアニメーションを変更したい」
「Cocoonでメニューに個性を出したい」
といった方向けに、この記事では、Cocoonでのヘッダーメニューのアニメーション設定の変更手順を解説しています。
モバイルメニューの配色も変更したい方は以下の記事もおすすめです。
ヘッダーメニューのアニメーション設定
Cocoonの初期設定ではヘッダーメニューのアニメーションはホバー時に
ふんわりとハイライトがかかるものですが、
サイトによってはキビキビとした印象を出したいこともあると思います。
この記事では、アニメーション速度の変更に絞って解説します。
まず、Wordpressの管理画面から「外観」→「カスタマイズ」→「追加 CSS」と移動します。
上の画像のような画面になったらOKです。
次に、コードの末尾に下記のように入力します。
.navi-in a{transition:all 〇s;}
.navi-in a:hover{transition:all 〇s;}
〇はお好きな数値に変えてください。
borderやその他のCSSプロパティの使用も可能です。(背景色は不可です)
クラスの役割としては、.navi-in aがホバーアウト時のアニメーションのスピードで、
.navi-in a:hoverがホバーイン時のアニメーションのスピードをコントロールする役割を持つようです。
transitionのスピードは0.3s程度が個人的には丁度いいように感じます。
疑似要素を使ったアニメーションも可能でした。
完了したら、公開する、もしくは下書き保存、予約公開などをクリックして保存します。
メニューの背景色の変更
メニューのリンク部分のみに対する背景色の設定は、上記のクラス名では変更できませんでした。
背景色の変更は、
.item-label{background:〇;}
.item-label:hover{background:〇;}
上記のコードを使用します。(〇にカラーコードを代入)
クラス名は上記の通り、”item-label”です。
こちらも設定後、公開するボタンで保存できます。
しかし、transparent(透明)やnoneオプションは使えないようです。
まとめ
おつかれさまでした。
ヘッダーメニューのアニメーションは個性の出しどころでもあると思います。
見やすさとデザインを両立した動きが出せるといいですね。
ご質問、ご指摘などあればお気軽にコメント欄までお寄せください。
コメント
初めまして。
shiroinuと申します。
cocoonを利用していて、メニューの変更の仕方を探していて辿り着き、助かっています。
記事を見ながらやってみたところ、アニメーションスピードの変更、背景の色の変更はできたものの、
子メニューの左右に余白ができてしまっている状況です。
実際にサイトのblogメニューを見ていただけると分かりやすいと思うのですが、その点の直し方が分かりません泣
突然で恐れ入りますが、ご教授いただけると幸いです。
shiroinuさん、初めまして。コメントありがとうございます。
記事がお役に立てているようで嬉しいです。
早速ですが、子メニュー脇の余白の消し方について返信させていただきます。
余白の原因は.submenu aに割り当てられたpadding-left、padding-rightでした。
下記のコードを外観>カスタマイズ>追加CSSで末尾に張り付けていただけると余白が消えるかと思います。
.navi-in > ul .sub-menu a{padding:0; text-align:center;}
おせっかいで文字の中央ぞろえのプロパティ(text-align:center;)も追加していますが、ご不要であれば削除していただいて構いません。
ご不明な点や進捗状況など、返信お待ちしております。
早急に返信いただきありがとうございます！
無事に余白が消えました！
まだまだHTML、CSSに関しても駆け出して、テーマのどこの部分がどこの部分を指しているか、というものの把握ができない状況です；
とても助かりました＾＾
ありがとうございます＾＾