Instagram 風ギャラリーの使い方

WordPress サイト開設スターターパックの Instagram 風ギャラリーを使うと、以下のようなギャラリーを作ることができます。

画像をクリックして拡大表示したとき、ブラウザの戻るボタンをクリックしないとギャラリーに戻ることができません。

使い勝手と見た目の動作をよくしたい場合は Lightbox 効果を使います。

Lightbox 効果をを使いたい場合は以下のどちらかのやり方で行います。

  • Simple Lightbox や Responsive Lightbox & Gallery のようなプラグインを使う。
  • WordPress のライトボックス効果を使う。このやり方はプラグイン不要ですが、画像表示に注意点があります。（後述）

カスタマイズ例

下記の CSS を追加すると、サムネイルの間隔がなくなります。

body .insta-like.wp-block-gallery {
    grid-template-columns: repeat(auto-fill, minmax(min(200px,35vw), 1fr));
    gap: 0 !important;
}

カバーブロックと組み合わせた作成例

ギャラリー

WordPress のライトボックス効果を使用した例

このやり方はプラグインが不要でお手軽ですが、拡大表示された画像は正方形に切り抜かれます。
正方形の表示でよい場合は、このやり方がおすすめです。