【Stingerplus】簡単！グローバルメニューにホバーエフェクトを実装！

こんにちは。ゆすこです(@shufication)です。
ホバーエフェクトを使用してみたい！
海外のサイトでメジャーなエフェクト集があったので紹介します。
当ブログのグローバルメニューにそれを実装してみました。

ホバーエフェクトとはこんなやつです。
カーソルを当ててみてください

動きが滑らかなので、サイトの見た目がグッと上がると思います^^
実装方法はめっちゃ簡単で誰でも出来ます！

修正する前の確認事項

修正したファイルは子テーマ「Stingerplus child」に追加すると安心です。
親テーマ内のファイルを上書きして作業している場合、親テーマをアップデートすると修正箇所が全てディフォルトになってしまうんですよ。
なので、子テーマで修正することをお勧めします。

子テーマで書く場合は必ず以下を確認してください。
初期状態では functions.php と style.css しかないので追加必須です。

◆header.php

◆st-font.php

◆analyticstracking.php

以上のファイルを親テーマから子テーマへコピペすれば完了。
この一連の作業で任意のファイルを子テーマで使用することができます。
修正したファイルをFTPで子テーマフォルダに追加するのを忘れずに！

では、いきましょう!!

ホバーエフェクトをダウンロード

配布元サイトを開き、「DOWNLOAD」ボタンよりダウンロードしてください。

すると、Hover-master.zipというファイルがダウンロードされます。
これを解凍すると、cssフォルダ内に、
・hover.css
・hover-min.css
があります。

他にもファイルがありますが、今回はこの２つのみを使用します。

ホバーエフェクトの内容を見る

DOWNLOADボタンの横にDEMOボタンがありますよね。
ここを開いてみると、100種類のホバーエフェクトを確認することが出来るのです。

今回は当ブログで実装しているエフェクトの紹介ですが、
要はクラス名を指定するだけなので、
お好みでカスタマイズしてみてください^^

hover-min.cssをインポート

では、下記ディレクトリに、
(../wp-content/themes/stingerplus-child/css)
hover.cssとhover-min.cssをFTPでアップしてください。

次はstyle.cssでhoverを読み込めるようにします。
スタイルシートの上部に@import url...というソースがあると思います。
ここに１行加えることで動作するように出来ます。

上記の7行目を追加してください。
これだけでホバーエフェクトを使えるようになります。

グローバルメニューに呼び込む

次にメニューで動かす方法です。

１．まずカスタマイズ画面を開きます。
(場所:ダッシュボード>外観>カスタマイズ)

２．次にメニュー項目を開き、適当なボタンを選択してください。
(場所:メニュー>任意のメニュー>任意のボタン)

備考：当ブログでは、トップ用メニューにチェックを入れています。
今回はこのパターンで動作する方法となります。


３．赤枠部分に実装したいクラスを追記します。

追記し自動更新されたら、任意のボタンにカーソルを合わせて見てください。
どうでしょう？動きましたか？
これで動作するようになったはずです^^

おまけ

色を変えたい。ホバーの速度を変えたい。
ちょっとしたカスタマイズをしたい場合は、以下を参考にしてください。

hover-min.css内で任意のクラスをctrl+Fで検索し、
必要に応じて色なども変更してみてください^^


ホバーエフェクトの実装方法でした^^

Sponsored Link

関連記事はこちら