Lognote

整体師によるお役立ち情報ブログ

mouse-cursor-zoom-thumbnail

Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法

2017-03-10

ふわっと画像を拡大させるエフェクトが実装できるLightbox。

WordPressでは、専門知識がない方でも簡単にLightbox導入できるプラグインが豊富です。その中でも私は「Simple Lightbox」というWordPressプラグインをブログ開設当時から愛用しています。

使い方としては、画像に元画像へのアンカーリンクを貼るだけですが、初見で訪問してくれた方に「拡大可能な画像」というのが伝わるか定かではありません。

マウスオーバーされた時点で、「あ、この画像大きくして見れるんだ」ということがわかってもらえれば、訪問者に今まで以上にLightboxを有効活用してもらえそうですよね。

そこで今回は、拡大可能な画像とわかるように、マウスホバー時にカーソルを変更して視認性を上げるカスタマイズをしてみました。

最終完成イメージ

カスタマイズ完成イメージです。

mouse-cursor-zoom-01

完成イメージGIF画像

ホバーアイコンは虫眼鏡にしました。

カスタマイズの手順

  • 画像ホバー時のカーソルアイコンを変更する
  • Lightboxが反映する画像を指定する

画像ホバー時のカーソルアイコンを変更する

まずは、アンカーリンク付きで画像を貼ります。

<a href="画像パス" width="元サイズ"><img src="画像パス" width="記事内表示サイズ"></a>

WordPressなら、画像選択時にリンク先を[メディアファイル]にしておけばOKです。

mouse-cursor-zoom-02

メディアファイルを選択

以下、カーソルを虫眼鏡にするCSSです。

a:hover img { cursor: zoom-in; }

cursorプロパティは他にもたくさんあります。

参考に紹介リンクを貼っておきます。

Lightboxが反映する画像を指定する

このままだと、リンク先が画像ではない普通の画像リンクにも反映されてしまうので、拡大する画像専用のセレクタを作ります。

<div class="lightbox"><a href="画像パス" width="元サイズ"><img src="画像パス" width="記事内表示サイズ"></a></div>
.lightbox a:hover img { cursor: zoom-in; }

このようにすれば、lightboxセレクタで囲まれた画像のみで虫眼鏡アイコンに変化します。

オススメ商品はこちら!

-WordPress

この記事のタイトルとURLをコピーする
Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法
この記事はいかがでしたでしょうか。
是非Lognoteの最新ニュース情報を、
いいねしてチェックしてください!

関連記事

ogp-twitter-card-matome-thumbnail

WordPressのSEO対策で必ず設定するべきOGPとTwitter Cardコードまとめ

WordPressでブログを運営するうえで、まず初めにやってもらいたいSEO対策の一つとしてOGP設定というものがあります。 一見難しく感じるOGP設定ですが、 …

font-awesome-thumbnail

アイコンフォント「Font Awesome」をWordPressに導入する方法

アイコンフォント「Font Awesome」を、WordPressに導入する方法を紹介します。 目次1 Font Awesomeの導入方法1.1 自サーバーにフ …

xserver-morisawa-thumbnail

超美麗!無料で日本語のWebフォントが使えるエックスサーバーの新機能が凄すぎた!

無料SSLサービスに引き続き、エックスサーバーがまたやってくれました! なんと、あの有名な日本語Webフォントのモリサワフォントを無料でWebサイトに利用できる …

another-ad-category-thumbnail

カテゴリーごとに自動で入れ替わるAmazon商品ランキングをWordPressの記事下に設置する

ブログで収益を受け取る方法の一つとして、Amazonアソシエイトの紹介料をいただくというのがあります。 Amazonアカウントを持っていれば誰でも簡単に始めるこ …

instagram-bug-cause-tw-autolink-thumbnail

Instagramの埋め込みが表示されないバグは「@マークでTwitterの自動リンクを作る」のコードが原因だった

WordPressではfunctions.phpにコードを追加することでさまざまな便利な機能を使えるようになります。 その中のひとつとして、記事内に@(Twit …


コメントをどうぞ

lognote
2017/5/09
コメントありがとうございます。 本当にそうですよね。 通販サイトは、相手の顔が見えない分信頼第一で成り立っているので、Amazonにはマーケットプレイスの管理をしっかりやっていただきたいで...
匿名探偵
2017/5/09
ここ最近のamazonはちょっとヤバいですね。 4,5000円が相場で微小の変動しかしていなかった市場に、今年度に入って急に1000円切った値で断続的に出品するなど、異常な出品者が様々な商品に出没し...

管理人のヤマカワです
山形在住、整体院「癒眠」院長
3級ウェブデザイン技能士