こんにちは、飲食店さんの集客サポーターことざんぷです。ちょうど今、地元NPOの教育関連事業のwebサイトを作成しているのですが、少しずつ制作が進んでようやく完成間近というところまでやってきました。そのサイトは、地元教育機関のwebサイトを取りまとめるポータルサイトで、その関係で各機関の代表者（校長先生など）とやり取りする機会なんかもあります。これまで関わりのなかった方々ばかりなので、去年くらいの自分を想像するとなんだか不思議な気分です。完成したら、またこちらでもご紹介できればと思っています^^ さて今回は、そのWEBサイトで実装した「ホバーエフェクト」について。グローバルメニューや画像にマウスオンした時に、アニメーション効果が得られるというあれです。あなたもどこかのサイトで見たことがあるのではないでしょうか。実際に一から作るとなると、なかなか大変なのですが、とあるライブラリを使用するといとも簡単に実装出来てしまうのです。それが「imagehover.css」です。44種類ものエフェクトが簡単に実装出来るので、もし興味がある方は使用してみて下さい。それでは参ります。
こんな事が書かれてます
imagehover.cssとは？
imagehover.cssとは、 使用頻度の高い44種類もの ホバーエフェクトをまとめられた CSSライブラリです。 このライブラリを読み込む事で、 簡単にオシャレ感を高める事が出来ます。 無料で使えるのは44種類ですが、 有料版を購入すると216種類もの ホバーエフェクトが使用可能になります。 （有料版はこんな感じ↓）
imagehover.cssのダウンロード
まずは公式サイトにアクセスして下さい。 トップページに「Download」ボタンが すぐ分かる所にありますので クリックしダウンロードします。
zipファイル解凍〜CSSファイルアップロード
ダウンロードしたファイルを解凍します。 解凍後のフォルダ内はこの様な感じ。 
フォルダ内にある「CSS」をクリックし フォルダを展開してください。 展開後のフォルダ内はこんな感じです。 
「imagehover.min.css」が 今回使用するファイルです。 それ以外は使用しないのでスルーします。
だと、 「webFTP」というツールがあるので そちらを使用しています。
「imagehover.css」の使い方
【STEP1】ヘッダーに一文追記
cssを読み込む記述をページに追加します。 WordPressサイトですと、 各テーマごとに用意されている 「header.php」に以下の太字部分を追記します。
<head> ... <link rel="stylesheet" href="css/imagehover.min.css"> </head>
赤太字の部分は、 各自アップしたファイルのパスに 書き換えて下さい。
【STEP2】
次に、figure要素にclassを加え ホバーさせたい画像などを配置します。 figcaption内にホバー時に表示させたい コンテンツを配置して下さい。
<figure class="imghvr-fade"> <img src="#"> <figcaption> // ホバー時のコンテンツ </figcaption> </figure>
赤太字のclass名は、 公式ページ内にあるサンプルから、 お好きなものを選んで変更して下さい。 因みにclass名は、 
これら赤矢印で記したものです。 あとは更新したページを見てみると... ちゃんと反映されています^^ たったこれだけで実装出来ちゃいます！ つい色んなのを試してみたくなりますね☆
imagehover.cssのサンプル
せっかくなので、このページ内でも サンプルをご覧いただきましょう♪
【Sample1】imghvr-slide-down
【Sample2】imghvr-hinge-up
【Sample3】imghvr-zoom-out-left
こんな感じで、 色々なエフェクトを適用できるので 是非活用してみて下さい！
「反映出来ない・使えない」そんな時の対処法
そんなパターンもありますよね。 というか、私もやっちゃってましたｗ 【STEP1】でご紹介した 追記する一文の入力ミスです。 imagehover.cssの実装において 気をつけるポイントはこれくらい と言ってもいいくらいなので、 是非躓いたときには 追記した一文をチェックしてみて下さい。 ミスの内容としては、
- CSSファイルのパスが違う
- 単純な入力ミス
このどちらかなはずです。 焦らず慎重にやってみましょう〜！！
おまけ
WordPressサイトの方で、 どうしてもパスが分からない場合、 以下の流れで解決出来るかと思います。 適用中テーマのCSSディレクトリに 「imagehover.min.css」をアップしましょう。 【STEP1】のパス部分は、 「<?php bloginfo('stylesheet_directory'); ?>/CSS/imagehover.css」 とします。 <?php bloginfo('stylesheet_directory'); ?>というのは、 WordPress独自のテンプレートタグ と呼ばれるもので、当サイトを例にすると、 「http://katasumi-products.jp/wp-content/themes/テーマ名」 ここまでの部分を参照してくれます。 どうしても上手くいかない、 という場合には試してみて下さい。
まとめ
- ホバーエフェクト実装は「imagehover.css」が簡単おすすめ
- 設置はたったの2STEPで本当に簡単
- 躓きポイントは押さえておくべし
