gallery_002




gallery_002a




gallery_002b
gallery_002c
ブロックを4段設定で4枚の画像を並べる。
4カラムの設定で画像をカラムに1枚づつ配置する画像を並べるオーソドックスなレイアウト。スマホでは2カラムに設定しています。
CSSはなしで、カラム間の間隔を「狭い」に設定しています。
オプションの段数(カラム数)の変更可能。5段以上にしたい時はブロックレイアウトを「アルバム」 にする必要があります。
gallery_002a
カラムの間隔をゼロに設定し、CSSで画像に対して3pxの余白を指定して画像間に若干の隙間ができるようにしています。画像がくっついた感じにしたい時には余白を0にすればよく、数値によって画像間の隙間を自由に調整できます。
画像を並べた下に「全てのギャラリーを見る」というリンクを置き、instgramなどにリンクさせて他の多くの画像はそちらで見てもらうようなケース。BiNDでは、1枚で1MB(もしくはそれ以上)のような大きな画像を何枚も配置してしまうとBiNDのデータサイズがどんどん大きくなってしまう原因になりがちです。
代表的な画像を並べて雰囲気を伝え、他の画像はSNSなどに誘導して見てもらう。
画像だけのページは文字情報もなくSEO的には効果があるとは言えないので、ハッシュタグなどをうまく使いながら画像はinstagramに掲載するというやり方は良いように思います。
gallery_002b
3枚目、4枚目は長方形の画像を直接配置してから寸法変更により正方形で配置されるようにしています。画像を直接配置することで、クリックして拡大した時には元画像(この場合は長方形で配置した元画像のサイズ)で表示されます。
1枚目と3枚目はカラム内で画像を中央寄せにしています。中央寄せにすることでコメントの表示も画像に対して中央配置になります。

gallery_002c
上記002bと同じものをブロックレイアウト「アルバム」にしたパターン。アルバムにするとカラムに配置された画像もテキストも中央寄せになります。
また、コメントに設定した文字は画像下ではなく、マウスオーバーで画像上に表示されるようになります。これはブロックレイアウトを「アルバム」にすることで自動的に適用される設定になります。
画像サイズ
gallery_002は500px角のシェイプに画像を読み込ませています。
gallery_002b,gallery_002cの3枚目、4枚目は元画像のサイズのまま(640px × 427px)画像を直接配置して、アートボード設定>サイズで短辺の寸法に合わせて正方形にしています。