【WhiteTiger】テーマのグローバルメニュー装飾&ちょっと動きを加えてみました

公開日: 更新日: Wordpress



まだまだ続くよWordpressカスタマイズネタ~♪♪なんて歌ができちゃいそうです(笑)。

何とか正式に『令和』時代になる前に落ち着かせたいなぁ・・・なんて思ってますけど基本的に何かを変えていくことが好きなので仕方ないかとも思ってます。

今回は【WhiteTiger】テーマのグローバルメニューをグラデーション表示にして、かつ一定時間ごとにブルっと震えるような感じにしました。色や囲みなどを加えるだけではちょっと芸がないですから(笑)。

どんどんノーマル状態から変わっていく・・・。

【WhiteTiger】テーマの・・・として紹介しますが、CSSセレクタを調べればどんなテーマでも使えるし、そもそもグローバルメニューのセレクタはほぼ共通だと思いますので気に入ったらやってみてくださいね!

グローバルメニューをグラデーションにする

グラデーション表示って結構CSSで簡単にできるんですよ、これが。

グラデーションについてのCSSソースの詳しい説明は

に書かれていますので参考にしてみてください。

CSSコードは以下になりますので【WhiteTiger】テーマを使われている方ならコピペで同じようになります。

/**************** メニューの装飾 ******************/
/* ナビゲーション全体の背景色 */
#navi {
    background: linear-gradient(#fff, #2d6aee)!important;
}
/* 1つのメニューのデザイン */
.menu-item {
  background: linear-gradient(#fff, #2d6aee);”
    margin: 2px;
  border-left:1px solid #fff;
  border-right:1px solid #fff;
}
/* マウスオーバー時のメニューの色 */
.menu-item :hover {
    background-color:#2d6aee!important;
}
.menu-item a:hover {
    color:#fff!important;
}
/* フッターメニューの手前にある|をなくす */
#footer-menu ul li::before {
    content: none!important;
}
コメント入れてますので何をしているのかはお分かりになると思いますが一応・・・

  1. #naviはナビゲーションメニューが表示されるための場所(行)全体を示すので、それをボタンと同じにしてます
  2. .menu-itemは1つ1つのメニューボタンのこと。:hoverはマウスオーバー時、aはリンク文字列のことですので、それぞれに対して適切な色合いになるようにしています。
  3. 最後にフッターメニューも同じ内容が表示されますが、左に仕切り線が入っているので「なし」にしています

色については、#fffが白、#2d6aeeが青系の色なので、グラデーションとしては一番上が白で徐々に青系の色になるという簡単なCSSですから、自身のサイトに合わせて変更すればいいでしょう。

グローバルメニューをブルっとさせる

ボタンがブルっとなると「当たるのか?」と思えますけど最近はなかなかそうもいかんですねぇ(当たりの確定というのはないそうです・・・)。分かる方は分かる余談でした(笑)。

先日リリースした

を元にグローバルメニューでもそうなるようにしただけです(笑)。

コードはこちら

/* グローバルメニューをバウンドさせる */
.navi {
  animation: navi 4s infinite;
  -moz-animation: navi 4s infinite;
  -webkit-animation: navi 4s infinite;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
@-webkit-keyframes navi {
  0%, 4%, 10%, 18%, 100% {-webkit-transform: translateY(0);}
  5% {-webkit-transform: translateY(-6px);}
  12% {-webkit-transform: translateY(-4px);}
}
@keyframes navi {
  20%, 24%, 30%, 34%, 100% {-webkit-transform: translateY(0);transform: translateY(0);}
  25% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
  32% {-webkit-transform: translateY(-4px);transform: translateY(-4px);}
}
/* アニメーションを遅延させる */
.navi + .navi {
  -webkit-animation-delay: .5s;
  animation-delay: .5s;
}

要するに「.navi」というセレクタに対して(ナビメニューの場所全体)時間をおいてバウンドさせなさいよ!というコードになります。

ボタンごとにしたい場合には「.navi」や「navi」となっているところをすべて「.menu-item」「menu-item」にすればいいのですが、やってみたらすごく気持ち悪いことになりましたのでやめておいた方がいいと思います。


こんな感じで簡単にグローバルメニューの装飾ができますので是非チャレンジしてみてくださいね。




コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)