クエリーループブロック内のアイキャッチ画像をマウスオーバーでちょっと拡大させる方法

公開日:2023(令和5)年9月14日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

WordPressの投稿などをさまざまな切り口で簡単に一覧化できる「クエリーループ」ブロック。

一覧に表示されるアイキャッチ画像をマウスオーバーした時にヌルっと拡大されるようにするスタイルコードをいつも忘れてしまうのでメモとして公開しておきます。

百聞は一見に如かず、以下のような感じになります。

テーマのstyle.cssへ以下を追加するだけです。

/***** クエリーループの画像をホーバー時に拡大 *****/
.wp-block-query figure.wp-block-post-featured-image{
	overflow: hidden;
}

.wp-block-query img{
	transition: 1s all;
}

.wp-block-query img:hover{
	transform: scale(1.2,1.2);
	transition: 1s all;
}

冒頭の「.wp-block-query」でクエリーループだけに限定していますが、さらに特定のクエリーループブロックだけに限定したいのであれば、クエリーループブロックへ追加CSSクラスを追加して、「.wp-block-query」の代わりに指定すれば動作します。

拡大率は「transform」で指定(上記コード例では縦横に1.2倍)しているので自由に変更できますし、拡大する時間も「transition」で指定(上記コードでは1秒)していて、「hover」の値はホーバー時の時間、その上の値はホーバー解除(画像からマウスが外れた時)時の時間なので、自由に変更可能です。

簡単なコードでちょっとおしゃれになりますね。

動作の原理となる基本的な仕組みは以下を参照ください。

Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
functions.phpからセキュリティヘッダーを追加する方法(例)