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の最新ニュース情報を、
いいねしてチェックしてください!

関連記事

salon-for-wordpress-theme-healer-thumbnail

整体院・サロン専用WordPressテーマ「Healer」をリリースしました

このたび、整体院・サロン向けWordPressテーマを制作しました。テーマ名は「Healer(ヒーラー)」とい …

ボタンじゃないSNSのシェア数だけを表示する【WordPress】

ブログをやるうえで、記事をバズらせるというのは一つの夢でもあります。 こちらのサイトによると、バズるブログの6 …

sns-follow-button-thumbnail

SIMPLESTER Ver6の記事下にFBページいいねやTwitterフォロワー誘導ボックスをサムネ付きで設置する方法

本日は、SIMPLESTER Ver6に上の画像のようなFacebookページのいいねボタンとTwitterの …

パソコンでブログを閲覧する外国人女性の写真

売り上げ100万円の施策?!WordPressでAmazonアソシエイトをカテゴリーごとに変更

自分のブログ画像をはめ込んだら新鮮(笑) 今回はAmazonアソシエイトを100万円売り上げるための小細工をし …

custom-field-ranking-thumbnail

WordPressにAFFINGER4のような商品ランキング機能を実装する方法

AFFINGER4で特に便利な機能といえば「ランキング表示機能」ですよね。 こちらがAFFINGER4のランキ …


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

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

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