WordPress 標準のギャラリーブロックを使って10枚の画像を持たせた5カラムのギャラリーを作って、設定を変えた例をいくつか作ってみました。
画像をメディアファイルにリンク
画像をメディアファイルにリンクした例です。
画像をクリックして拡大表示したときに、ブラウザの戻るボタンをクリックしないとギャラリーに戻ることができません。
使い勝手と見た目の動作をよくしたい場合は Lightbox 効果を使います。
Lightbox 効果を使いたい場合は以下のどちらかのやり方で行います。
- Simple Lightbox や Responsive Lightbox & Gallery のようなプラグインを使う。
- WordPress のライトボックス効果を使う。
このやり方はプラグイン不要でお手軽ですが、後述の通り、使用上の注意点があります。
ライトボックス効果で画像を拡張
WordPress のライトボックス効果で画像を拡張した例です。
画像をクリックすると拡大表示されますが、Lightbox 効果のおかげで画面遷移が発生しないので、使い勝手がいいですね。
注意点としては、すべての画像のアスペクト比（縦横比）を揃えておかないと、拡大表示したときに画像の一部が欠けてしまう現象が起きます。
サムネイルの間隔をなしにした例
ギャラリーのスタイルでブロックの間隔を 0 に設定してサムネイルどうしの間隔をなしにすることができます。
↓このギャラリーをカバーブロックに入れてみました。工務店の施工事例紹介などに使うといいかんじになりますね。
ギャラリー
アスペクト比を設定した例
ギャラリーの設定でスタイルでアスペクト比を正方形にして、Instagram 風にすることができます。
注意点としては、拡大表示された画像も正方形に切り抜かれます。
ギャラリー
WordPress のギャラリーの標準機能だけを使って、プラグインなし、ノーコードでもいいコンテンツを作ることができるんですね。
こういうコンテンツを作ろうとして、つい CSS を考えたり、プラグインに頼ったりしがちです😓