Modula PROで、SNSシェアボタン付ギャラリーを作成
過去3回に渡り、Modula PROの機能を使用して、色々なギャラリーを作成してきました。今回はSNSシェアボタンの付いたギャラリーを作成します。
出典 : Modula Image Gallery
今回のDEMOも、例によってフランス旅行の写真を使用しました。
今回は、Masonryを使用しています。30枚の写真をギャラリーにしました。PCでは3カラム、タブレットでは2カラム、SPでは1カラムで、サムネイルが表示されます。すべて、スクロールで見るようにレイアウトしました。サムネイル下にSNSボタンが表示されます。多くの写真を表示でき、ランダムに並べても見映えのいいギャラリーにしました。
General
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
サムネイルにタイトルを入れないので、ライトボックスでタイトルを入れるため、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
サムネイルに、タイトルもキャプションも入れないので、Hide Title、Hide Captionにチェックを入れます。
| 項目 | 設定値 |
|---|---|
| Show Gallery Title | チェック無 |
| Hide Title | チェック有 |
| Hide Caption | チェック有 |
Social
Socialで、SNSシェアボタンの設定をします。
まず、Enable Social Barにチェックを入れます。シェアボタンを表示させたいSNSにチェックを入れます。今回は、Twitter、Facebook、Pinterestにチェックを入れました。
カラーやサイズなども調整できますが、今回はデフォルト設定のままにしてあります。
| 項目 | 設定値 |
|---|---|
| Enable Social Bare | チェック有 |
| Twittwe | チェック有 |
| チェック有 | |
| チェック有 | |
| Color | #ffffff |
| Size | 16px |
| Gutter | 10 |
Hover effects
今回は、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
タプレットは2カラム、SPは1カラムに設定します。
| 項目 | 設定値 |
|---|---|
| Costom responsiveness | チェック有 |
| Tablet Columns | 2 |
| Mobile Columns | 1 |
以上で、今回の説明は終了です。SNSシェアボタンをサムネイルに付けると、デザイン的にも、機能的にもいいですね。
今回、PRO版でMasonryを使用しましたが、無料版と同じ要領で作ることができました。サムネイルで大きく、トリミングなしで見せる場合は、便利ですね。レスポンシブ設定が簡単なのも魅力です。
Webサイト制作のご依頼は、コンタクトフォームより、よろしくお願いします。
