Hover.cssを利用してメニューアイコンを動かす

WordPressにあるメニュー機能ではFont Awesome 4やFont Awesome 5を利用することでアイコンを表示することができます。

シンプルに伝わりやすく画像よりもサイズが小さいため表示が早く、いろんな場面で重宝します。

そんなアイコンはマウスを当てた時に動かすことで注目を集め、さらにサイト回遊率アップを狙えます。

Hover.cssというCSSライブラリを利用する事で、ソースを考える必要がなく（比較的）簡単にできたので紹介します。

なお、以降ではマウスを当てることをホバーと表現します。適宜読み替えてください。

ライセンスについて
カスタマイズ完成例
Hover.cssを利用する手段
アイコンを動かす設定手順
まとめ
関連のおすすめ記事

ライセンスについて

当ページで紹介するCSSはHover.cssのソースになります。

ライセンスについてはHover.cssに準じます。

個人利用やオープンソースは無料ですが、商用利用するには有料のライセンス購入が必要みたいです。

詳細はHover.cssのライセンス項目を読んでください。

カスタマイズ完成例

実際にグローバルナビメニューを動くようにした例です。（Icon Up）

Hover.cssを利用する手段

Hover.cssをは次の2種類の方法から利用できます。

Hover.cssの利用手段

style.cssに使用するCSSだけをコピーする
ライブラリをWordPressに設置して参照する

そらしど

今回はCSSをコピーして転記する方法で実装します。

ライブラリを参照して利用したい場合

公式の利用方法を参考にしてください。日本人が紹介しているサイトならCocoon開発者でおなじみ、わいひらさんの寝ログが分かりやすいです。

参照の注意点はファイルのサイズが大きい点です。実装できる機能が多いこともあり、100KB弱あります。

アイコンを動かす設定手順

アイコンを動かすカスタマイズの手順を解説します。

カスタマイズの手順

STEP1
Hover.cssサイトで実装したい動きを探す
STEP2
Hover.cssをダウンロードする
STEP3
hover.cssファイル内から該当のCSSをコピーする
STEP4
style.cssに貼り付ける
STEP5
保存する
STEP6
メニューでclassを指定する

WordPress管理画面からテーマエディターを使って直接style.cssを編集する手順です。

テーマエディターの使用には注意が必要です。可能であればFTPソフトを使いましょう。

Hover.cssサイトで実装したい動きを探す

実際の動きをHover.cssのサイトで見ることができます。実装してみたい動きがあるか探してみましょう。

そらしど

今回はIconsという大項目から探してください。

サイトにアクセスして下にスクロールすると、下図のようなデモエフェクトがあります。マウスを当てると動きが見れます。（下の画像は動きません）

Hover.cssをダウンロードする

GitHub – IanLunn/HoverページのDownload/InstallからZIPファイルをダウンロードします。

「Hover-master.zip」というファイル名でダウンロードされます。

ダウンロード出来たらZIPファイルを解凍します。

特に解凍用アプリを使用していない場合は「すべて展開」を利用します。

hover.cssファイル内から該当のCSSをコピーする

cssフォルダ内にあるhover.cssを使用します。

ディレクトリ遷移

Hover-master→css

STEP1で決めた動きを検索します。

hover.cssを開いたらCtrl+Fの検索機能で動きの名称を検索します。

そらしど

今回は「Icon Up」を例として進めます。

該当の行頭から次の動きの名称までをコピーします。

そらしど

どこからどこまでをコピーすればいいか分からない場合は連絡ください。

Icon Upの場合は以下のようになります。

/* Icon Up */
@-webkit-keyframes hvr-icon-up {
0%,
50%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
25%,
75% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}
@keyframes hvr-icon-up {
0%,
50%,
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
25%,
75% {
-webkit-transform: translateY(-6px);
transform: translateY(-6px);
}
}
/* Icon Up */
.hvr-icon-up {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-icon-up .hvr-icon {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon {
-webkit-animation-name: hvr-icon-up;
animation-name: hvr-icon-up;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}