mouse-cursor-zoom-thumbnail

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

公開日:2017-03-10
最終更新日:

Pocket

ふわっと画像を拡大させるエフェクトが実装できる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セレクタで囲まれた画像のみで虫眼鏡アイコンに変化します。

以上、「Lightboxで拡大可能な画像とわかるようにマウスホバー時のカーソルを変更する方法」という記事をお届けしました。

それでは、また。

オススメ商品はこちら!

-WordPress

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

関連記事

share-count-display-thumbnail

WordPressの記事トップにSNSのシェア数を表示する

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

child-theme-copy-thumbnail

WordPressの親テーマのファイルを子テーマにコピーする方法

サーバー上のファイルにアクセスするFTPソフト「FFFTP」の設定方法と使い方を解説します。WordPressはサ...

custom-field-affiliate-banner-thumbnail

カスタムフィールドで記事毎にアフィリエイト広告を貼り替える方法

Amazonアソシエイトやアフィリエイト広告は記事にマッチしなければクリック率は上がりません。この記事...

iphone-icon-black-thumbnail

WordPressでiPhone用アイコンの透過部分が黒くなる問題を疑似的に解決する方法

WordPressは、カスタマイズからサイトアイコンを簡単に設定できますが、iPhone用アイコンだと透過部分 …

another-ad-category-thumbnail

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

ブログで収益を受け取る方法の一つとして、Amazonアソシエイトの紹介料をいただくというのがあります。 Ama …


コメントを入力

日本語が含まれない投稿は無視されます。(スパム対策)

トラックバックURL

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

にほんブログ村 ブログブログ ブログノウハウへ

ヤマカワ
2017/8/16
子テーマのコピー方法はカスタマイズの基本ですので省略してしまいました。 新しく別ページで解説記事を...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい
ヤマカワ
2017/7/25
キャッシュの削除は試されましたでしょうか。 それでも反映されないようでしたら、!important...
haruboshi
2017/7/24
全く反映されません。