【SANGO プチカスタマイズ】メニューの階層表示を”ふわっ”とフェードインさせる方法

どーもこんにちは、ニシカワです。

いきなりですが、色々ありましてブログの投稿が全て消えました/(^o^)\
データベースのバックアップが残っているので戻そうと思えば戻せるのですが、正直面倒なのとデザインも仮で運用していたので、これを機に新しく作り直すことにしました。

せっかくなので、現在進行系で行っているカスタマイズ箇所をちょこちょこと紹介しようと思います。

メニューの階層表示をふわっとしたい

いつの間にかSANGOさんもバージョンアップしており機能が増えていました。

待望でもあったメニューの階層表示が実装されていたのですが、1つ気になる点が…

 ”ふわっ” と表示させたいのに ”シュッ” って表示されてしまうんです。

…小学生並みの語彙力の為、画像で用意しました。before→afterで御覧ください。

before

after

…わかりますかね?この違い。

普通であれば気にならないのでしょうが、SANGOでは元々リンクやボタンにいい感じのアニメーションがついています。

それなのに、メニューだけついていない!!!気になる!!!ということです。

子テーマの準備

今回のカスタマイズではスタイルシートを触ります。

WordPress管理画面の追加CSSに直接書き込んでもいいのですが、今後の事を考えると子テーマを利用したほうがいいでしょう。

子テーマの導入&設定方法はSANGOの公式マニュアルページで事細かに説明してくれてるのでこちらをご参考ください。

参考

SANGOのショートコード一覧SANGOのカスタマイズガイド

ありがとう!サルワカくんさん!

ニシカワ

とりあえず、結論から

何でも良いから早く方法を教えろ!!というせっかちさんの為にやり方を記しておきます。

下のコードを子テーマのstyle.cssに追加してアップロードしてください。

それだけです。本当にありがとうございました。

以下詳しく知りたい方向け

カスタマイズ箇所の確認

ブラウザのデベロッパー・ツールや気合でカスタマイズしたい箇所を確認しましょう。
今回はメニューの階層表示・非表示についてのカスタマイズですので、class名sub-menuについてスタイルを設定していきます。

デベロッパー・ツールの詳しい使用方法については、やはりサルワカくんさん先生が解説してくれておりますのでご参考ください。

参考

初心者向け!Chromeの検証機能(デベロッパーツール)の使い方サルワカ

現状の確認

先程見つけたclass名sub-menuでSANGO本体のstyle.css内を検索します。すると3882行目〜3865行目あたりににスタイル設定の記述が見つかります。

ここ中で階層のの表示・非表示に直接関わってくるのが下記の記述です。

CSS
.desktop-nav .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 180px;
  color: #FFF;
  background-color: #545454;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
  transition: .3s ease-in-out;
}
.desktop-nav li:hover .sub-menu {
  display: block;
}

ものすごく簡単に言うと「display=見え方 none=非表示 block=ブロック要素として表示」という意味でして、マウスを重ねる(:hover)事によって、noneとblockを切り替えているんですね。

透明度(opacity)の設定

ニシカワ

じゃあこの2つにフェードインの情報を書けば良いんやな!

…と言いたいところなんですが、display要素にanimationは効かないので、ただ足すだけでは効果が適用されません。

ここで使うのが透明度(opacity)で、display: none;のときは透明度を0にして完全に透明に、display: block;のときは透明度を1にして完全に表示させます。

CSS
.desktop-nav .sub-menu {
  opacity: 0;
}
.desktop-nav li:hover .sub-menu {
  opacity: 1;
}

フェードイン効果の設定

最後にようやくフェードイン効果の設定です。

「マウスをホバーして透明度を1にする」動作に対して効果をつけたいので、.desktop-nav li:hover .sub-menuに追記します。

CSS
.desktop-nav .sub-menu {
  opacity: 0;
}
.desktop-nav li:hover .sub-menu {
 opacity: 1;
 animation-duration: 1s;
 animation-name: fade-in;
 -moz-animation-duration: 1s;
 -moz-animation-name: fade-in;
 -webkit-animation-duration: 1s;
 -webkit-animation-name: fade-in;
}
@keyframes fade-in {
 0% {display: none; opacity: 0;}
 100% {display: block; opacity: 1;}
}
@-moz-keyframes fade-in {
 0% {display: none; opacity: 0;}
 100% {display: block; opacity: 1;}
}
@-webkit-keyframes fade-in {
 0% {display: none; opacity: 0;}
 100% {display: block; opacity: 1;}
}

}

完成&まとめ

いかがでしたでしょうか?地味なカスタマイズですが、なんとなくいい気分になった気がします。
またブログの設定を勧めていくにあたって面白いカスタマイズがありましたらご紹介しますね。

その他「こんなカスタマイズを教えれ!」というのがありましたらコメントやTwitterでお申し付けください。

SANGOを愛用している方にはこの記事もオススメです

【SANGO】他サイトへのリンクのブックマークレット

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です