おしゃれ～～と言われるWordPressテーマでよく使われている、画像をマウスオーバーするとニュル～～っと拡大される機能。実はそんなに難しいことしなくても実装できるのご存じですか？
例として、このページのみアイキャッチ画像がマウスオーバーで拡大するようにしていますから、サンプルとして確認ください（ちょっと極端に拡大・縮小するようにしてます）。
この動きがきれい～～！なんて観点でテーマ選びをしなくても、簡単に実装できますから、今使っているテーマのままで、まずは試してみてください。
クエリーループブロックのアイキャッチ画像に対して同様の措置をしたい場合は以下をご覧ください
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
マウスオーバー時に画像が拡大するようにする方法
条件として、以下のように、画像タグ（imgタグ）が何かの要素（下図ではdivタグ）で囲まれている構造になっている必要があります（普通のサイトであればこのようになっているはずです．．）。
まずは、外側の画像要素となっている部分を調べます。
貴サイトの拡大縮小させたい画像を右クリックして、「検証（Google Chromeブラウザの場合）」をクリックしてください。
以下のようにimgタグの上下に赤枠で囲んだようなタグが存在しているはずです。
imgタグの上下がfigureタグで囲まれてますよね。こんな感じになっていれば実装可能です。
上図のように画像タグが別のタグで囲まれていない場合には、カスタマイズする必要がありますが、カスタマイズ方法についてはケースバイケースなので割愛します
本サイトと同じTT2テーマであれば、アイキャッチ画像の部分は、
<figure class="wp-block-post-featured-image">
画像タグ
</figure>となっているでしょう。その場合には、以下のスタイルコードをテーマのCSSへ追加すれば、本ページと同じようにマウスオーバー時にアイキャッチ画像を拡大縮小させることができます。
/*** 画像ホーバーで拡大 ***/
/*アイキャッチ画像領域の最大の高さを指定 */
.wp-block-post-featured-image{
max-height: 400px;
}
/* はみ出た部分は表示しない */
.wp-block-post-featured-image
{
overflow: hidden;
}
/* マウスが外れたら1秒かけて元に戻す */
.wp-block-post-featured-image img
{
transition: 1s all;
}
/* マウスが重なったら1秒かけて1.2倍に画像を拡大する */
.wp-block-post-featured-image img:hover
{
transform: scale(1.2,1.2);
transition: 1s all;
}あとは、ご自身のサイトに合わせて、外側の要素のCSSクラスへ変えればすぐに適用できます。
外側の要素のCSSクラスとは上記コードの「.wp-block-post-featured-image」の部分です
コードの説明
それぞれが何をしているコードかは、コード中にコメント入れてますので大丈夫かと思いますが一応．．。
まずは、最初の塊で、外側の要素の高さを限定しています（例の場合はアイキャッチ画像で幅は基本本文幅以上にならないので高さのみ指定しています）
/*アイキャッチ画像領域の最大の高さを指定 */
.wp-block-post-featured-image{
max-height: 400px;
}幅の指定が必要であれば以下のようにすればいいでしょう。
/*アイキャッチ画像領域の最大の高さを指定 */
.wp-block-post-featured-image{
max-height: 400px;
max-width: 400px;
}要素の幅や高さが確実に決まっている場合には、「max-width」「max-height」をそれぞれ「width」「height」にすれば大丈夫です（貴サイトの状況などで適宜書き換えてください）
次の塊で、外側の要素から画像がはみ出た部分を表示しないようにします。
/* はみ出た部分は表示しない */
.wp-block-post-featured-image
{
overflow: hidden;
}これでいくら画像を拡大しても、外側の要素からはみ出た部分は表示されなくなります。
最後に、以下の塊で、マウスオーバーしたとき、マウスが外れたときの動きを作ります。
/* マウスが外れたら1秒かけて元に戻す */
.wp-block-post-featured-image img
{
transition: 1s all;
}
/* マウスが重なったら1秒かけて1.2倍に画像を拡大する */
.wp-block-post-featured-image img:hover
{
transform: scale(1.2,1.2);
transition: 1s all;
}コード中の「1s」が変化を完了させるまでの秒数、「scale(1.2,1.2)」が拡大率です
要は、外側の要素（CSSクラス）さえわかれば、本当に上記のような簡単なコードで画像に動きを持たせることができますから、冒頭で書いたように、この動きを見て「いいな～～」とテーマを選ぶ必要もなくなりますよ（笑）。
画像拡大時に、画像の領域が変わってしまうときは
これまで紹介した方法で画像の拡大縮小はできた！でも．．なんだか拡大縮小と共に上下（左右）に領域が拡大縮小されている．．そんな時は、以下を確認してみてください。
- 外側の要素の最大高（幅）の指定はできているか？
- 外側の要素にoverflow:hiddenを適用しているか？
- 外側の要素として指定しているCSSクラスは正しいか？
