1000本突破
1000本突破

Lightview for WordPressで拡大画像を簡単に設置

ゴウ

Lightview for WordPress

LightboxなどのJSライブラリを使用して、画像にエフェクトをかけながら拡大させる手法がありますが、WordPressのプラグインでこれを簡単に設置する方法がありましたので、さっそくやってみました。

 

ファイルをダウンロードして設置する

まずは、Lightview for WordPress at iLEMONed:からファイルをダウンロードしてきます。

解凍したらlightviewというフォルダが出てきますので、これを

 /wp-content/plugins/

の中に入れます。

次にWordPressの管理画面からプラグインを有効化してあげます。

これで設置は完了。

 

使ってみる

 通常通りに画像を挿入して、その画像に大きい画像へのリンクを張ります。

そこにrel="lightview"を下記の様な感じで追加します。

<a href="sample.jpg" rel="lightview" title="サンプル画像"><img src="sample.jpg" alt="サンプル画像" /></a>

 titleに入力した文字が、拡大されたときに表示されます。

デモ

こんな感じです。

雪景色

 

細かい設定をする

lightview.jsをエディタで開くと、細かい設定が出来るようです。

拡大した時の背景色や線の太さ、角丸の大きさなどが変更できます。

 

参考サイト