![](https://cxg-design.jp/wp-content/uploads/2024/04/snsgallerythumbnail-1.png)
Modula PROで、SNSシェアボタン付ギャラリーを作成
過去3回に渡り、Modula PROの機能を使用して、色々なギャラリーを作成してきました。今回はSNSシェアボタンの付いたギャラリーを作成します。
![](https://cxg-design.jp/wp-content/uploads/2023/09/2d6b3e47009b9498166cacc0cf25f9b1.png)
出典 : Modula Image Gallery
今回のDEMOも、例によってフランス旅行の写真を使用しました。
今回は、Masonryを使用しています。30枚の写真をギャラリーにしました。PCでは3カラム、タブレットでは2カラム、SPでは1カラムで、サムネイルが表示されます。すべて、スクロールで見るようにレイアウトしました。サムネイル下にSNSボタンが表示されます。多くの写真を表示でき、ランダムに並べても見映えのいいギャラリーにしました。
General
![](https://cxg-design.jp/wp-content/uploads/2024/04/b252ee5e416e91d67e657a9adec3e298.png)
Gallery TypeをMasonryにしました。PCでは、3カラムにするので、Column TypeをThree Columns(3)に設定します。今回のデザインは、画像の下にSNSシェアボタンの黒いバーが入ります。どの画像のシェアボタンか分かりやすくするため、Gutterを5pxに設定し、画像間に隙間を入れます。
項目 | 設定値 |
---|---|
Gallery Type | Masonry |
Column Type | Three Columns(3) |
Gutter | 5px |
Width | 100% |
Image Size | Medium |
Shuffle Images | チェック有 |
Lightbox & Links
![](https://cxg-design.jp/wp-content/uploads/2024/04/9602703b60981072f9cfa97e32a82e68.png)
サムネイルにタイトルを入れないので、ライトボックスでタイトルを入れるため、Show image titleにチェックを入れます。バックは黒にするため、Lightbox background colorをrgba(0,0,0,0.9)に設定します。
項目 | 設定値 |
---|---|
Navigation arrows | チェック有 |
Loop navigation | チェック有 |
Show image title | チェック有 |
Show image caption | チェック無 |
Tool bar | チェック有 |
Close button | チェック有 |
Close on slide click | チェック有 |
Open / Close animation | None |
Transition effect | None |
Allow swiping | チェック有 |
Infobar | チェック有 |
Lightbox background color | rgba(0,0,0,0.9) |
Captions
![](https://cxg-design.jp/wp-content/uploads/2024/04/3cd854920805a985633974df983bca4d.png)
サムネイルに、タイトルもキャプションも入れないので、Hide Title、Hide Captionにチェックを入れます。
項目 | 設定値 |
---|---|
Show Gallery Title | チェック無 |
Hide Title | チェック有 |
Hide Caption | チェック有 |
Social
![](https://cxg-design.jp/wp-content/uploads/2024/04/91efbd0e56e564b1e179ba3a896216f6.png)
Socialで、SNSシェアボタンの設定をします。
まず、Enable Social Barにチェックを入れます。シェアボタンを表示させたいSNSにチェックを入れます。今回は、Twitter、Facebook、Pinterestにチェックを入れました。
カラーやサイズなども調整できますが、今回はデフォルト設定のままにしてあります。
項目 | 設定値 |
---|---|
Enable Social Bare | チェック有 |
Twittwe | チェック有 |
チェック有 | |
チェック有 | |
Color | #ffffff |
Size | 16px |
Gutter | 10 |
Hover effects
![](https://cxg-design.jp/wp-content/uploads/2024/04/63109d74a5ca931efaaced759f737aca.png)
今回は、Hover effectを2. Under ipsumに設定しました。このエフェクトは、通常の状態でSNSシェアボタンが表示されているので、SPでの利用に便利です。
項目 | 設定値 |
---|---|
Hover Color | #000000 |
Hover Opacity | 20 |
Hover effect | 2. Under ipsum |
SPでのホバーエフェクト
ホバーエフェクトは、主にPCでカーソルで合わせた時に発動されます。SPでは、タップになるので、エフェクトはほとんど表示されません。ModulaのHover effectは、SNSシェアボタンが表示されるものも多いですが、ほとんど(2. Under ipsum以外)が、ホバー後に表示されます。
Responsive
![](https://cxg-design.jp/wp-content/uploads/2024/04/b855fbb67dbf9f9bf5c7c9a3402b5285.png)
タプレットは2カラム、SPは1カラムに設定します。
項目 | 設定値 |
---|---|
Costom responsiveness | チェック有 |
Tablet Columns | 2 |
Mobile Columns | 1 |
以上で、今回の説明は終了です。SNSシェアボタンをサムネイルに付けると、デザイン的にも、機能的にもいいですね。
今回、PRO版でMasonryを使用しましたが、無料版と同じ要領で作ることができました。サムネイルで大きく、トリミングなしで見せる場合は、便利ですね。レスポンシブ設定が簡単なのも魅力です。
Webサイト制作のご依頼は、コンタクトフォームより、よろしくお願いします。