Modula PROで、SNSシェアボタン付ギャラリーを作成

過去3回に渡り、Modula PROの機能を使用して、色々なギャラリーを作成してきました。今回はSNSシェアボタンの付いたギャラリーを作成します。

今回の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	チェック有
Facebook	チェック有
Pinterest	チェック有
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

Responsive

タプレットは2カラム、SPは1カラムに設定します。

項目	設定値
Costom responsiveness	チェック有
Tablet Columns	2
Mobile Columns	1

以上で、今回の説明は終了です。SNSシェアボタンをサムネイルに付けると、デザイン的にも、機能的にもいいですね。

今回、PRO版でMasonryを使用しましたが、無料版と同じ要領で作ることができました。サムネイルで大きく、トリミングなしで見せる場合は、便利ですね。レスポンシブ設定が簡単なのも魅力です。

Webサイト制作のご依頼は、コンタクトフォームより、よろしくお願いします。