WordPress のギャラリーブロックをポラロイド写真風にカスタマイズした例

カテゴリー: WordPress、カスタマイズ

タグ: CSS ギャラリーポラロイド

WordPress コアのギャラリーブロックのカスタマイズ例です。
ギャラリーの画像をポラロイド写真のように加工して、壁にテープで貼って並べてみました。

ギャラリーブロックをカスタマイズすればここまでのことができるので、スライドショー系のプラグインは使わなくてもいいかなって思います。

カスタマイズ前のギャラリー

ライトボックス効果を設定してあります。
ライトボックス表示のときに前後の画像に切り替えるナビゲーションボタンが WordPress 7.0 で追加されています。

カスタマイズ後のギャラリー

スマホ表示のときはテープが2枚貼ってあるとごちゃごちゃするので、テープを1枚だけにしてあります。
写真の傾きが不自然にならないように、3列表示の PC と2列表示のスマホで別々にカスタマイズしてあります。
テープの長さや傾きをもっとランダムっぽく見せることができればさらによくなると思うのですが、そこまでやってません😊
CSS の random() 関数が主要ブラウザでサポートされるようになったらかんたんにできるので、それを楽しみに待ちましょう。

スマホ表示のときはテープが2枚貼ってあるとごちゃごちゃするので、テープを1枚だけにしてあります。 — スマホでの表示

【おまけ】画像の大きさを揃えるには

ギャラリーブロックの追加 CSS に以下のコードを入力すると、画像の大きさが揃います。
編集画面でも同じ大きさで表示されるようになるので、気持ちよく作業ができます。

& figure.wp-block-image {
    flex-grow: 0 !important;
}

ギャラリーブロックの設定に 画像の大きさを揃える ってオプションがあると喜ぶ人はすごく多いと思います。

投稿者プロフィール

対馬俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

メールでのお問い合わせはこちら