![](https://cxg-design.jp/wp-content/uploads/2024/04/cdc8c197d0d607e3ea2b43b4cae5a445.png)
Modula PROで、ホバーエフェクト付ギャラリーを作成
当サイトでは、先日のリニューアルで、トップページとABOUTにModula PROのギャラリーを設置しました。今回は、Modula PROのダウンロード〜有効化の簡単な手順と、ホバーエフェクト付ギャラリー作成方法を紹介していきます。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回のDEMOは3種のタイトル付きエフェクトギャラリーです。1つ目はモノクロ、2つ目はボーダー、3つ目はフレームです。画像は、以前のModulaのDEMOでも紹介した、フランス旅行の写真を使用しました。
ダウンロード
![](https://cxg-design.jp/wp-content/uploads/2024/04/919fdf2b7a0a63a6de85c3c03a7b84d0.png)
出典 : Modula
まず、ModulaのWebサイトから、プランを選択し、PRO版を購入します。プランによって使用できるアドオンが違います。
購入後、ダウンロードページが表示されるのですが、「Modula PRO」のみダウンロードします。ダウンロードしたフォルダを圧縮します。ライセンスキーは控えておきます。
![](https://cxg-design.jp/wp-content/uploads/2024/04/mdsukusyo01.jpg)
Modula PROをダウンロードし、圧縮
アップロード
![](https://cxg-design.jp/wp-content/uploads/2024/04/cba812f5e49f2111b0d6707d7e0342c2.png)
まず、Modula無料版を有効化していない場合は、ダウンロードして有効化しておきます。
WordPressダッシュボードのプラグイン>新規プラグインを追加をクリックします。「プラグインのアップロード」をクリックし、Modula PROの圧縮フォルダをアップロード、有効化します。Settingで、ライセンスキーを入力します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/711d14a42e76c0463ae40492c267b0d3.png)
「プラグインのアップロード」をクリックし、Modula PROの圧縮フォルダをアップロード、有効化
アドオン有効化
![](https://cxg-design.jp/wp-content/uploads/2024/04/63747ef0067b389c4b4d5150580bee6d.png)
Modula>Extensionsをクリックし、使用したいアドオンを有効化します。全て有効化する必要はありません。現在、当サイトで使用しているものは、下記リストの通りです。
- Fullscreen
- Pagenation
- Zoom
- Lightbox Slideshow
- SpeedUp
- Video
アドオンによる不具合
アドオンを有効化することでサイトに不具合が出る場合があります。その場合、アドオンを無効化し、削除します。また、当サイトでは、スライダーはSmart Slider Proを使用するので、Covert Gallery to Sliderは有効化していません。
ギャラリー作成
![](https://cxg-design.jp/wp-content/uploads/2024/04/340f7026626b1465d5beed789dc689d1.png)
Pro版とアドオンの設定項目が追加されますが、基本的な設定方法は、無料版とほぼ同じです。
Modula>Galleries>Add Newをクリックし、新規ファイルを作成。タイトルを入力し、Gallery>Select from Libralyをクリックし、メディアから画像を12点選択します。
サムネイルにカーソルを合わせると表示される、鉛筆マーク (Edit Image) をクリックします。Titleに画像のタイトルを入力し、下のSave & Closeボタンをクリックして保存します。
![](https://cxg-design.jp/wp-content/uploads/2024/04/c6688e2b4e69f7e16c67241c46ea562c.png)
サムネイルの鉛筆マーク (Edit Image) をクリック
![](https://cxg-design.jp/wp-content/uploads/2024/04/30676cef14cd8979f87f447cfebc93ce.png)
Titleに画像のタイトルを入力
![](https://cxg-design.jp/wp-content/uploads/2024/04/70b92e8cfd2756a36733c360f37a39a5.png)
Save & Closeボタンをクリックして保存
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/bbb7e9bbbbd9e7c6854252835a803ace.png)
高さ(Height)は、PC、タブレットは、1画面で見れるように、SPは画面が小さいので、スクロールして見れるように値を大きくしました。
項目 | 設定値 |
---|---|
Gallery Type | Creative Gallery |
Gutter | 0 |
Width | 100% |
Image Size | Medium |
Height | PC:1000px タブレット:1000px SP:1500px |
Random factor | 50 |
Shuffle images | チェック有 |
Lightbox & Links
![](https://cxg-design.jp/wp-content/uploads/2024/04/af45b2f6e60b1adf58bd48c152439a50.png)
画像をクリックした時のスライドショーのスタイルを設定します。今回は、ほぼデフォルト設定ですが、Loop navigationにチェックを入れて、矢印をクリックしていくと、スライドがループしていくように設定しました。
ライトボックスの背景色、透明度は、Lightbox background color で変更できます。 今回は、色をデフォルトのダークグレーから、黒に変更しました。
項目 | 設定値 |
---|---|
Navigation arrows | チェック有 |
Loop navigation | チェック有 |
Show image title | チェック有 |
Tool bar | チェック有 |
Close button | チェック有 |
Close on slide click | チェック有 |
Infobar | チェック有 |
Lightbox background color | rgba(0,0,0,0.9) |
Captions
![](https://cxg-design.jp/wp-content/uploads/2024/04/7127059cd5d0018d3890bf4311026a50.png)
タイトルのスタイル設定をします。
まず、Hide Titleのチェックを外します。Title Colorをモノクロはローズレッドに、ボーダー、フレームは白に設定します。Title Font Sizeは、PCのフォントサイズ、Moble Title Font SizeはSPのフォントサイズになります。Title Font Sizeを20px、Moble Title Font Sizeを15pxに設定します。
項目 | 設定値 |
---|---|
Show Gallery Title | チェック無 |
Hide Title | チェック無 |
Title Color | モノクロ:#d30094 ボーダー:#ffffff フレーム:#ffffff |
Title Font Size | 20px |
Mobile Title Font Size | 15px |
Title Font | Default |
Title Font Weight | Regular |
Hide Caption | チェック有 |
Hover effects
![](https://cxg-design.jp/wp-content/uploads/2024/04/6cb78a3fad1e16a150fda6744ce625f6.png)
Hover effectsは、無料版では選択肢が、2つしかありませんでした。PRO版では、40種類以上の中から選ぶことができます。今回のDEMOでは、3種の異なるエフェクトを選択しました。
また、Hover Opacityを0に設定しました。
項目 | 設定値 |
---|---|
Hover Opacity | 0 |
Hover effect | モノクロ:1. Grayscale ボーダー:7. Reflex フレーム:40. Tilt Effect 1 |
SpeedUp
![](https://cxg-design.jp/wp-content/uploads/2024/04/305ce952bd4467f0885dca03fa2fe62e.png)
PRO版のアドオンで追加した項目です。
今回3つのギャラリーを作成しましたが、モノクロのみLazy Loadのチェックを外しました。これは、ページが読み込まれた時にローディングエフェクトを表示させるのを防ぐためです。
項目 | 設定値 |
---|---|
Lazy Load | モノクロ:チェック無 ボーダー:チェック有 フレーム:チェック有 |
以上で今回の説明は終了です。PRO版では、Hover effectsは、使える種類が多くなったので、デザインの幅が広がりますね。また、ライトボックの背景色を変更できるので、サイトのデザインに合わせることができます。
Webサイト作成のご依頼は、コンタクトフォームよりよろしくお願いします。