【Simplicity】トップページサムネイルを「hover」を使ってマウスオンで拡大させる方法

シェアよろしくオナシャス(・∀・)

もう少しトップページを動的なものにしたいと思ってカスタムしていみました。

他のブログテーマでたまに見かける

「マウスオン(オーバー)すると画像が拡大する」

って言うのをどうしてもやりたくて、初心者ながら挑戦してみました!

このサイトのトップページを見て頂くと意味が分かると思います!※現在は一時削除しています。

スポンサーリンク

下準備

編集は「子テーマ」で行う

WordPressをカスタムする際の下準備は【Simplicity】ブログカスタムする時に用意したもの4つを参考にしてください。

http://paru-log.net/blog/befor-custom

「entry-card.php」を子テーマにコピー

サーバー上のWordPressインストールディレクトリ内

wp-content/themes/simplicity

ここが親テーマのディレクトリになります。

その中から「entry-card.php」を子テーマのディレクトリ

wp-content/themes/simplicity-child

ここへコピーします。

サムネイルを拡大させる

子テーマの「style.css」に追記

子テーマのディレクトリ内にある「style.css」に以下のソースをコピペします。

「.entry-thumb」の部分でサムネイルの大きさを固定しています。

画像を拡大する事によって、指定範囲からはみ出してしまうのを防ぐ為です。

僕は150×150pxのサイズですが、違うサイズのサムネイルを使用している場合はここを変更する必要があります

「.scale-img」の部分の「0.2s liner」の部分は拡大に何秒かけるか?と言う意味です。

この数字を大きくすればゆっくり拡大する事になります。

「.scale-img:hover」の部分でマウスオーバーした時にどれだけ拡大するかを指定しています。

「scale(1.2)」は「120%の大きさに拡大する」と言う意味です。

「scale(1.0)」とすると大きさは100%のままになるので変化しないと言う事になります。

「entry-card.php」の中身を書き換える

現在の僕の「entry-card.php」は以下の様になっています。

変更した部分は6行目と14行目の「entry-thumnail」を「scale-img」に書き換えただけです。

上のソースをそのまま「entry-card.php」の中身と置き換えて正常に動かない場合は、Simplicityのバージョンによってクラス名など変更になっている可能性があるので直接編集した方が良いと思います。

動作確認

これは本当に簡単です。

トップページを表示して、サムネイル部分にマウスを乗せてみるだけです!

拡大されれば成功、何も起こらなければ失敗です。

まとめ

とりあえず、狙い通りにには動くようになったのですが・・・。

スマホでも同じ挙動になっているんですよね(笑)

スマホやタブレットではもちろん、マウスオーバーなど無いので要らない機能ですね。

その辺も勉強が必要ですね。

今回は以下のサイト様を参考にさせて頂きました!

ありがとうございます!

Simplicityのトップページ等のリスト表示をサムネイルカード方式に変更するカスタマイズ方法
アイキャッチ画像のサイズ変更方法にて、以下のような質問をいただきました。 TOPページのアイキャッチ画像を大きいサイズに変更する方法をご教示頂けないでしょうか。 イメージとしては画像を横に広く表示させ、その画像の下に本文
マウスオーバー(:hover)で画像を拡大させる方法 – uooworks – 静岡県磐田市の女性デザイナー&イラストレーター

この記事が気に入ったら
いいね ! しよう