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セレクタで囲まれた画像のみで虫眼鏡アイコンに変化します。

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

-WordPress

この記事のタイトルとURLをコピーする

オススメ商品はこちら!

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

関連記事

another-ad-category-thumbnail

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

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

custom-field-affiliate-banner-thumbnail

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

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

instagram-bug-cause-tw-autolink-thumbnail

WordPressでInstagramの埋め込みが表示されない原因はこれだった!

Instagramの埋め込みが表示されないバグが発生しました。原因はfunctions.phpに記述した「Twitterの自動...

custom-post-category-thumbnail

WordPressで通常の投稿かカスタム投稿か判断してカテゴリー名を表示する方法

普段使い慣れないカスタム投稿タイプを使ったところ、普通のカスタマイズと勝手が違い四苦八苦しております。 今回は …

child-theme-copy-thumbnail

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

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

コメントを入力

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

トラックバックURL

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


Lognote
2017/9/12
ご報告いただきありがとうございます! それは知りませんでした! メーカーの違いとかもあるのでしょう...
通りすがり
2017/9/12
比較的新しいカメラではサムネイル見れないらしいですよ。 うちもコーデック入れましたが2016年発売カ...
Lognote
2017/9/05
>> 堀田様 お役に立てて何よりです! 他に良い予約プラグインが出てくれればいいんですけ...
堀田
2017/9/05
ありがとうございました。 PHPを7 にしたらエラー吐き出して、有料版は PHP7 対応なんで有料...
Lognote
2017/8/16
>> たろ様 子テーマのコピー方法を省略しておりました。 解説記事を書きましたので、よろ...
たろ
2017/7/31
子テーマにコピーするの所がわかりにくい