Luxeritasで画像をクリックして拡大表示(ポップアップ)させる方法
以前画像をクリックして拡大表示する方法についての記事を書きました。
https://kirari-yums.net/post-7196/上記の記事ではプラグインと「Lightbox」を使う方法を紹介しています。
WordPressテーマ Luxeritas(ルクセリタス)にはLightboxが実装されています。
LightboxとはJavaScriptとCSSを使用し画像を拡大(ポップアップ)表示できるツールです。
きらり
ルクセリタスにはそのLightboxが既に実装されてるんだね。
結耶
そうそう。だからLightboxを導入する必要ないし、プラグインも使わずに拡大表示できるようになってるんだよ！
今回はLuxeritasで画像を拡大(ポップアップ)表示する棒法について書きたいと思います。
Luxeritasの設定
外観カスタマイズ画面を開くと左のメニューに「Lightbox(画像ギャラリー)」があるのでクリックします。
(バージョン3.7.1以前のバージョンでは「画像ギャラリー」と表示されています。)
すると以下のような選択肢が表示されます。
- Spotlight
- Strip
- Tosrus
- Lightcase
- Floatbox
- Fluidbox ( Lazy Load との共存不可 )
- 使用しない
この選択肢は表示のデザインです。好きなデザインを選択して公開をクリックしてください。
きらり
結耶～。どんな風に表示されるか見られないの？
結耶
設定してみないと見られないんだよね～。一応サンプルは載せておくね。
表示デザイン
表示のデザインは設定しないと見ることは出来ません。参考になるかはわかりませんがサンプルを載せておきます。
Spotlight
画像の左右に表示される矢印をクリックすると他の画像も見ることができます。また画像に代替テキストが設定されている場合下に表示されます。
Strip
画面の右側から表示されます。表示される画像はちょっと小さめです。代替テキストは下に表示されます。
Tosrus
最初の「Spotlight」と同じような感じですが、下にページネーション(下の●)が表示され画像を切り替えることができます。代替テキストは下に表示されます。
Lightcase
こちら最初の「Spotlight」と同じような感じですが、こちらは背景色がグレーです。画像の左右の矢印で画像を切り替えることができます。代替テキストは画像の左下に表示されます。
Floatbox
中央に小さく表示されます。画像の切り替えは画像の右下にある矢印で切り替えます。
Fluidbox ( Lazy Load との共存不可 )
こちらは「Lazy Load(画像の遅延読み込み)」を使用している場合は使えません。
最後に
Luxeritasには画像をポップアップ表示できるLightboxが実装されています。表示デザインの設定をするだけで使うことができます。
プラグインを使わずにできますので使ってみてください。
きらり
結耶～設定したけどポップアップされないよ～！
結耶
画像にリンク付いてる？画像までのリンク付けないとポップアップ表示できないよ。
きらり
忘れてたw
2017年9月からブログを始め、2018年1月にWordPressに変更しました。知識ゼロのから始めた超初心者で、WordPressやHTML、CSSなど勉強したことを書いています。
愛知県在住。多発性硬化症(MS)という難病と闘っています。
ある日ひょっこり現れ住みついた居候(いそうろう)。今は結耶と一緒にWordPressやアフィリエイトのことを勉強している。
性別は♂ 。どこから来たかは不明。
