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

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

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

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

この部分は...

グリッドアラムアイテムにカバーブロックを入れてあります。

グリッドカラムのカラムレイアウト設定

グリッドカラムブロックのカラムレイアウト設定

画面サイズ XX Large の指定について

Lightning で XX Large の指定が使えないのが本来の仕様みたいです。

もし上記のカラムレイアウト設定の通りにしたい場合は以下の CSS を追加すれば、Extra Large で4列、XX Large で6列のレイアウトにできます。

@media (min-width: 1400px) {
.col-xl-3 {
  flex: 0 0 16.66667%;
}
}

2021.12.27 追記

ブロックの組み合わせ

ブロックの組み合わせ

カスタム 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列に設定できます。

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

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

この部分は...

標準のカラムにカバーブロックを入れてあります。

この部分は...

標準のカラムにカバーブロックを入れてあります。

この部分は...

標準のカラムにカバーブロックを入れてあります。

この部分は...

標準のカラムにカバーブロックを入れてあります。

この部分は...

標準のカラムにカバーブロックを入れてあります。

この部分は...

標準のカラムにカバーブロックを入れてあります。

VK Blocks Pro の入手方法

VK Blocks Pro はベクトルが開発している WordPress の有料のプラグインです。
このプラグインにはグリッドカラム以外にもサイト制作に役立つブロックが多数含まれています。
単体では販売されていなくて、Lightning G3 Pro Pack に含まれています。

Lightning G3 Pro Pack

無料の VK Blocks というプラグインがありますが、この記事で紹介しているグリッドカラムブロックは無料では利用できません。

サイト運営者プロフィール

対馬 俊彦
対馬 俊彦魚沼情報サービス 代表
新潟県南魚沼市・魚沼市を中心に、地域の皆様がパソコンやインターネットを有効活用して業務効率化・課題解決を図るお手伝いを1999年から行ってまいりました。

WordPress を使用したサイト制作・カスタマイズを全国どこからでも承ります。ベクトルが販売している WordPress テーマ「Lightning」「Katawara」および同社のプラグイン「VK Blocks」「VK Filter Search」のカスタマイズを得意としています。遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

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

* ドメインやサーバーの契約・申込み
* WordPress やテーマ、プラグインのインストール
* アクションフック・フィルターフック・PHP・jQuery・CSS によるカスタマイズ
* ドメインの移管・移転
* 日常の更新作業
なども含めて、サイトの制作・運用全般をお手伝いできます。

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

» ご相談・お問い合わせはこちらからどうぞ

今よりもっといい WordPress サイトにしたいなら G3 Pro Unit がおすすめ

Lightning G3 Pro Pack
ベクトルから発売されている有料プラグイン Lightning G3 Pro Unit を使えば、このサイトで紹介しているようなコードを書かずにかんたんにカスタマイズできることがたくさんあります。

名前に Pro がついているので「制作のプロ向け製品」という印象を受けるかもしれませんが、
*もっといいサイトにしたい
* 効率よく作成・運用・管理をしたい
と考えているコーポレートサイトの担当者にこそ使っていただく価値がある製品です。

Lightning G3 Pro Unit は Lightning G3 Pro Pack というパッケージで VK Blocks Pro とセットで販売されています(単体販売はされていません)。このパッケージを使うと、便利なカスタマイズ機能やリッチなコンテンツ制作に役立つブロックをたくさん利用できるようになりますので、効率的にサイトを制作・運用したい方はぜひこのパッケージをお使いになることをおすすめします。