画像拡大スクリプトLuminous(ルミナス)をブログにぶち込んでみた!

2021年09月09日
カメラ・写真

自身のブログを読み返していて気付いたのですが、いささか閲覧者様に配慮のないことをしているなと感じました。
それは、画像の拡大についてです。

画像の拡大方法

配慮がないと感じたのは、2021/8/23投稿「ソニー製コンパクトカメラ「RX100M6」を2年使ってきた感想。これはコンデジ界のモンスター。」の中の下線の部分です。

ここで作例を一枚。

terebitouhiru

マウスカーソルを画像の上で右クリック→「新しいタブで画像を開く」をクリックして、大きな画面で確認してみてください。

画像を拡大して見て欲しかったための記述ですが、こんな面倒くさいことを閲覧者様がわざわざしてくださるでしょうか?

こんなことをさせては、閲覧者ファーストではありません。ただでさえ訪問者数の少ないこのブログは、ますます読まれなくなっていくでしょう。

そこで早速、手間のかからない画像を拡大する良い方法がないかググってみます。
ブログで困りごとがあったら、私はまずAkiraさんのブログに当たります。

このブログのテンプレートは、作者のAkiraさんからお借りしているものです。FC2ブログをやっている方はご存じの、スゴイ御方(おそらくプロのWEBデザイナー)ですよね(*^^*)
で、Akiraさんのブログ記事を検索すると、関連する記事が出てきました。
Luminous(ルミナス) というものを導入すると自分のしたいことが可能になるらしい。

問題の解決方法

下にリンクを貼っておきます。JS(じゃばすくりぷと)とかいう難しいコードが出てきてビビりますが、とにかく記事のとおりに設定を行いました。

超軽量画像拡大スクリプトLuminousをFC2で使う方法

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。...

Luminousを取り入れた結果

下の画像がLuminousを取り入れたものになります。画像の上にカーソルを持っていくと、ズームアイコンに変わり拡大可能であることが閲覧者に伝わります。(Akiraさんの記事にある「オーバーレイ」は使用せず、ズームアイコンのCSSを書き加えました。)そしてクリックすると、タブ移動せずに、記事上で拡大表示が可能になりました。

terebitouhiru

これなら、閲覧者様もストレスを感じることなく、気軽に拡大して見ていただけるのではないでしょうか?

”閲覧者ファースト”これ大事!

関連記事
あおなみ
Admin: あおなみ