こちらの記事 で書いた通り、WordPress のギャラリーの標準機能だけを使って、プラグインなし、ノーコードでもいいコンテンツを作ることができます。
しかし、気になる点がいくつかあります。
そこで、プラグインと CSS でカスタマイズしてみました。
WordPress ギャラリー
カスタマイズ前
WordPress ギャラリーの気になる点
- カラム数と画像の数の組み合わせによってはすべての画像が同じ大きさにならない。
例えば、上のカスタマイズ前のギャラリーで最後の画像を削除すると、下の段の4つの画像が大きく表示される。 - 画面幅を変えると（5カラム⇔2カラムが切り替わるブレイクポイントのところで）、画像がすごく小さくなったり、急に大きくなったりする。どの画面幅で見てもあまり違いを感じないようにしたい。
- ライトボックス効果を使うと画像の一部が欠けることがある。詳しくは こちらの記事 を参照。
- 画像のキャプションを表示すると、拡大表示のリンクエリアが狭くなってしまう。（上のギャラリーの「リビングルーム」の部分）
- 拡大表示したときに画像の説明を表示できるとうれしい。
Instagram 風にカスタマイズした例①
CSS でカスタマイズ ＋ プラグイン Simple Lightbox を使用
Instagram 風にカスタマイズした例②
例①のサムネイルどうしの間隔をなしにした
Instagram 風にカスタマイズした例③
例②をカバーブロックに入れた
ギャラリー
関連記事
投稿者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら…という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress2026年3月2日WordPress のギャラリーブロックをカスタマイズした例
VK Blocks2026年2月20日VK Blocks のアイコンブロックで作った祝メダル獲得メッセージ
X-T92026年1月27日スクロール時に一部のブロックを固定(追従)するノーコードの実装例
X-T92026年1月13日アーカイブページをアコーディオン仕様にカスタマイズした例
