グリッドカラムとカバーを使った写真のレイアウト例 - VK Blocks Pro

こんにちは、魚沼情報サービスの対馬です。

余白(隙間)なしで写真をたくさん並べて配置するレスポンシブ対応のレイアウトを作ってみました。

VK Blocks Pro の グリッドカラムブロック にカバーブロックを入れて作ってあります。

カスタム CSS

.wp-block-vk-blocks-grid-column.alignfull .col-6 {
padding-right: 0;
padding-left: 0;
}

.wp-block-vk-blocks-grid-column.alignfull .row {
margin-right: 0px;
margin-left: 0px;
}

.wp-block-cover, .wp-block-cover-image {
min-height: 300px;
}

メモ col-xxl-1 というクラスを作って写真を横に12枚並べて配置できそう...そのうちにやってみよう。

カラムブロックを使うよりもいい

グリッドカラムブロックの代わりに WordPress 標準のカラムブロックを使ってもこれと似たようなことはできますが、画面サイズごとにカラム数をきめ細かく調整することができません。

グリッドカラムブロックは私のお気に入りブロックのひとつですが、その理由は上記の カラムレイアウト設定 があるからです。

カラムブロックはスマホで表示したときに1列にしかできませんが（CSS でカスタマイズすれば可）、グリッドカラムブロックは CSS を書かずにかんたんに2列・3列に設定できます。

標準のカラムブロックで作成したもの

画面幅が大きい場合は上のグリッドカラムを使ったものと同じレイアウトですが、画面幅を小さくしていくと両者の違いを確認できます。

アップデートによりカラム間に余白が生じていることに気がついて、カラムブロックの カスタム CSS に selector { gap: 0; } を追加した。2023.2.11

VK Blocks Pro の入手方法

VK Blocks Pro は有料の WordPress プラグインですが、単体では販売されていなくて、Vektor Passport というライセンス製品に含まれて販売されています。

Vektor Passport は、コピペで使える豊富なプロ品質プレミアムパターン、Lightning G3 Pro Unit、VK Blocks Pro を好きなだけ使える大変お得なライセンス製品です。ライセンス1つで自分が制作・管理する複数のサイトに使うことができます。ライセンス期間は 1年 / 3年 / 5年 から選べます。

投稿者プロフィール

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

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

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

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

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

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

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

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

最新の投稿

この著者の記事一覧

• VK Blocks Pro2025年1月17日ローディング画面の作り方 - VK Blocks Pro の固定表示ブロックを使用
• Lightning G32024年10月24日サブメニューを開く親項目のリンクを無効にしたスマホ対応のカスタマイズ
• VK Filter Search Pro2024年8月28日日付ではなく年と月で範囲を指定して検索するカスタマイズ例
• カスタマイズ2024年1月24日タイトルを縦書きでブロックを左右交互にレイアウトした賃貸物件サイト例