【Luxeritas改造】誰でもできるグローバルナビへのアニメーションのつけ方
皆さんこんにちは。隠家 くろ（@kakurekuro）です。
先日、私のサイトのデザインを一新しました。
サイトも私も心機一転して、気を引き締めていきたいと思っている所存でございます（笑）
そこで今回から、私がサイトデザインを弄っていた時に、少し手こずった箇所を備忘録的に書いていこうと思います。
今回は、タイトルにもあるように、ヘッダーに表示するグローバルナビ（ヘッダーナビ）へのアニメーションのつけ方をご案内していきます！
簡単なアニメーションならCSSの記述もないですし、CSSも隅々まで紹介していますので、誰でも簡単にカスタマイズが可能です！
では、始めていきましょう。
グローバルナビの設定
まずは、グローバルナビを作成するところから説明します。
既に作成済みの人は飛ばしてください。
グローバルナビ作成
ワードプレスの編集画面で、左にある「外観」の「メニュー」をクリックします↓
「新しいメニューを作成」をクリックして、メニュー名を入力して作成をクリックします↓
「ヘッダーナビ」にチェックを入れます↓
一番上の「固定ページを自動追加」は、固定ページを新規作成するたびにこのメニューに自動追加されるというものなので、基本はOFF推奨です。
メニューにページを設定する
次は作成したグローバルメニューに、ページを追加していきます。
追加できるページはトップページからカテゴリーまで、全てのページです。
基本は、トップページとカテゴリーページを設定しておくと良いと思います。
左のメニューから好きな項目にチェックを入れて、「メニューに追加」をクリックして追加します↓
追加したメニューは、ドラッグすることで、順番を変えたり副項目にすることも出来るので、色々試してみてください。
グローバルナビの表示
グローバルナビに項目を追加すると、サイトの上部にメニューが表示できるようになります。
そのグローバルナビの表示方法を解説していきます。
「Luxeritas」の「カスタマイズ（外観）」をクリックします↓
左メニューの「ヘッダーナビ（グローバルナビ）」をクリックします↓
ここでグローバルナビを色々改造できます。
とりあえずグローバルナビを表示させないと話にならないので、「グローバルナビ表示」にチェックを入れておきましょう↓
右画面に表示されるプレビューを参考に色々いじってみてください！
【本題】グローバルナビのアニメーションのつけ方
さてここからが本題です。
どうせならグローバルナビにアニメーションをつけて、華やかな感じにしたいと思ったことはありませんか？
もしくは、派手なアニメーションじゃなくても、私のグローバルナビのようなワンポイントのアニメーションとか。
Luxeritasの基本機能でも、1種類ですがアニメーションを付けることが出来ます。
外観のカスタマイズから、「アニメーション」をクリックします↓
メニューの中にある、ヘッダーナビの「上方移動」がLuxeritasで簡単に付けられるアニメーションです↓
上方移動を設定すると、グローバルナビにマウスカーソルを当てたときに、上方向に少しずれるような動きをしてくれます↓
これだけでも結構オシャレですね！
背景の色なんかは、先程のグローバルナビのカスタマイズで変更可能です。
自分でオリジナルのアニメーションをつけたい
もちろん、中には「こんな上方移動だけのアニメーションじゃ嫌だ！」という人もいると思います。
私のような（笑）
そんなわがままボーイ or ガールには、CSSを書く方法をお教えします！
もちろんソースコードを書くことになるので、上記の方法よりは難しくなりますが、その分自由にカスタマイズできるのが利点です。
そして当然、皆さん全員がカスタマイズできるように、私も全力でサポートしますのでご安心ください！
今回紹介するアニメーションは、このサイトにあるようなアニメーションです。
ざっくり言うと、マウスカーソルをグローバルナビに当てた時に下線を色々な状態で表示してみようというものです。
普通のCSSで解説されても、ワードプレスへの反映は結構難しいので、私が解説していきます。
まずは、Luxeritasの子テーマのCSSを開きます↓
そのCSSの一番最後に、任意のソースコードを追記していくことで、自分のサイトのデザイン等をカスタマイズすることが出来ます。
※最初から書いてあるコードを消去すると子テーマが動かなくなりますので、消さないように注意してください
下線を上からアニメーションさせる
まずは、グローバルナビにカーソルしたとき、下線を上からアニメーションさせる方法です。
実例はこんな感じ↓
一応上から下線を表示させているのですが、実際に設定してみるとあまり分かりませんね。。。
一応CSSコードを載せておきます↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 6px;
background: #fff;
opacity: 0;
visibility: hidden;
transition: .3s;
}
#gnavi li a:hover:after {
bottom: -2px;
opacity: 1;
visibility: visible;
}「height: 6px」で下線の太さを、「background: #fff」で下線の色を設定しています。
適宜変更してください。
色のサンプルはこのサイトを参考にするのがおすすめです。
下線を下からアニメーションさせる
次は、下線を下からアニメーションさせる方法です。
実例はこちら↓
先程のとあまり大差ない（笑）
CSSコードは以下になります↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: -8px;
left: 0;
content: '';
width: 100%;
height: 6px;
background: #fff;
opacity: 0;
visibility: hidden;
transition: .3s;
}
#gnavi li a:hover:after {
bottom: -4px;
opacity: 1;
visibility: visible;
}下線を左からアニメーションさせる
ここからがよくグローバルナビに使われているアニメーションです。
まずは、下線が左から表示されて左に消えるアニメーション。
実例はこちら↓
結構オシャレで、一時期私もこのアニメーションでした。
CSSコードはこちらです↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 3px;
background: #fff;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
#gnavi li a:hover:after {
transform: scale(1, 1);
}下線を右からアニメーションさせる
次は逆に右から下線を表示させる方法です。
実例はこちら↓
CSSコードは以下になります↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 3px;
background: #fff;
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
}
#gnavi li a:hover:after {
transform: scale(1, 1);
}下線を左から右にアニメーションさせる
下線を左から表示させて、カーソルが離れたときは右に消えるアニメーションです。
実例はこちら↓
下線が右に続いて移動しているみたいで、スタイリッシュに見えます。
CSSコードはこちら↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 3px;
background: #fff;
transform: scale(0, 1);
transform-origin: right top;
transition: transform .3s;
}
#gnavi li a:hover:after {
transform-origin: left top;
transform: scale(1, 1);
}下線を右から左にアニメーションさせる
今度は先程とは逆に、右から下線を表示して、左に消えていくアニメーションです。
実例はこちら↓
右からの表示だと少し違和感があるので、あまり使う機会はないかもしれませんね。
CSSコードは以下になります↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 3px;
background: #fff;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
}
#gnavi li a:hover:after {
transform-origin: right top;
transform: scale(1, 1);
}下線を中央から左右にアニメーションさせる
下線が中央から左右に広がるようなアニメーションです。
実例はこちら↓
私も今現在のグローバルナビのアニメーションはこれに設定していますね。
CSSコードはこちら↓
/* グローバルナビアニメーション */
#gnavi li a:after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 3px;
background: #fff;
transform: scale(0, 1);
transform-origin: center top;
transition: transform .3s;
}
#gnavi li a:hover:after {
transform: scale(1, 1);
}まとめ
以上で、Luxeritasのグローバルナビのアニメーションのつけ方については終了です。
グローバルナビにワンポイントのアニメーションを付けるだけでも、結構オシャレに見えてくるものです。
グローバルナビのアニメーションは、左から右への下線はよく見るのですが、一番やりたかった中央からの下線はおそらくどこにも書いてなかったと思います。
もし、私と同じ悩みを持っている人の助けになれたら幸いです。
CSSも子テーマのCSSに追記するだけですので、難しいことはありません。
もし、わからないことや私のサイトのこれはどのようにしているのですか？みたいな質問があればどんどんコメントしてください！
出来る限りのことはしたいと思っています！
それでは、今回はこの辺で
またいつか