FC2でも使える「画像拡大JS」はこれ!jQuery不要で超軽量♩

2019年03月23日
0
0
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など

FC2ブロガーのMです。今回は、画像をマウスオーバーしたり、指を乗せる(スマホ表示のとき)とオーバーレイして、クリック(またはタップ)することでふわっと画像が拡大表示される画像拡大スクリプトLuminousルミナス)」について。

Webデザインのスキルが高い方のブログなどでよく見かける機能ですが、皆さんはご存知でしょうか?

画像というと、気になるのはブログが重くなること。画像表示のカスタマイズなんて聞くと、ちょっと心配になりますよねぇ…(^_^;)

でも、Luminousという画像拡大スクリプトは、jQueryが不要の超軽量jsを使っていてFC2ブログでも使えることを知りました。

で、実際に当ブログに導入してみることにしたんです。

スポンサードリンク

実装したLuminous(ルミナス)の画像拡大表示はこんな感じ

実際に、Luminousを実装してみました。画像を下に貼ってみましたよ。クリックやタップで体感してみて下さい♩

▼Luminousを実装した画像

ダニエルクレイグ

▼普通のサムネイル画像

ダニエルクレイグ

どうでしょうか?上のほうがスムーズに画像を拡大できますし、もう一度画像を押すことで簡単に戻る点も素晴らしいですよね(^^)

FC2ブログにLuminousを導入、参考になる記事をご紹介します!

さて、肝心なのは実際にFC2ブログへどのようにして実装すれば良いのか。初心者でも読めば簡単に導入できる手順を解説してる記事がありましたので、こちらを参考にすると良いと思います。

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

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


FC2ブログで利用するための各ファイル導入の仕方、コードの書き方などのベーシックな内容に加え、速度強化用のコード記載の仕方や画像が拡大できることをわかりやすくするための追加CSSなど。
初心者向けになるべく事細かに説明したいと思います。


今回は...

初心者がつまずきやすい箇所も、ボクがコメント欄で質問してますので、それも参考にして下さい(^_^;)

不慣れなボクでも出来ましたので、興味がおありの方はぜひとも試してみてはいかがでしょうか?おすすめです(^^)

関連記事

この記事が気に入ったら
シェア!

 シェア
M
Posted by M
FC2ブロガー/ファッション研究家/企業家/投資家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/2011年38歳の若さでほぼ末期の胃がん宣告/奇跡的に生還!/人生なんて気持ち次第!!きっとなんくるないさ~
FC2ブログオフィシャルおすすめブログ認定バナー

Comment 0

There are no comments yet.

コメントする