Nishiki Pro テーマ（バージョン 1.0.249 以降）には、ウェブサイト制作に便利な「Broken Grid Layout（ブロークン グリッド レイアウト）」が作れるブロックが搭載されています。

「Broken Grid Layout（ブロークン グリッド レイアウト）ってそもそもなんなの？」という方は、以前、勉強会で軽く解説しましたので、以下の動画を参考ください。

要は「あえて崩したレイアウトを作るためのブロック」です。

目次

• サンプル
• 前提
  • ブロックの構成
  • レスポンシブ対応。デスクトップ/タブレット/スマートフォン別でそれぞれレイアウトが可能です
• 全体ブロックの設定
  • 最小の高さの指定
• 個別ブロックの設定
  • 幅/高さの指定
  • 配置（相対配置/絶対配置）の指定
  • 位置の指定
  • 表示/非表示の指定
  • 不透明度の指定
  • コンテンツの重なり設定
• 1 クリックで即追加！「ブロックパターン」もあります
• 注意点

サンプル

前提

ブロックの構成

ブロックは大きくわけて以下の 2 つで構成されています。

1. 全体ブロック（親）
2. 個別ブロック（子）

全体ブロック（親）の中に複数の個別ブロック（子）が存在するイメージです。ブロックそれぞれに設定項目が存在し、個別ブロックはいくつでも追加できます。

レスポンシブ対応。デスクトップ/タブレット/スマートフォン別でそれぞれレイアウトが可能です

個別ブロックは、デスクトップ/タブレット/スマートフォン用のレイアウトを個別に設定可能です。

全体ブロックの設定

最小の高さの指定

CSS プロパティの position を使ってブロークン グリッド レイアウトを実際に組んだ経験がある方はわかると思います。

個別ブロックに対して絶対配置（absolute）をした場合、コンテンツが潰れてしまわないように高さを指定できます。

個別ブロックの設定

幅/高さの指定

width/height それぞれの値を指定できます。

巷でよく採用されているグリッドレイアウトの考え方を導入し、レイアウトが組みやすい値が指定できます。

配置（相対配置/絶対配置）の指定

個別ブロックそれぞれの配置設定ができます（タブレット/スマートフォンのみ「配置を解除（Static）」が選択可能）

位置の指定

left/top/right/bottom それぞれの値を指定できます。

巷でよく採用されているグリッドレイアウトの考え方を導入し、レイアウトが組みやすい値が指定できるようになっています。

表示/非表示の指定

例えば「デスクトップでは表示したいけど、タブレット/スマートフォンでは非表示にしたい」時などに活用ください。

不透明度の指定

コンテンツそれぞれの不透明度を指定できます。

コンテンツの重なり設定

必要に応じて重なり順を指定してください。CSS プロパティの「z-index」に準拠し、数値が大きい方が上に重なるイメージです。

1 クリックで即追加！「ブロックパターン」もあります

Nishiki Pro スピードビルダー（無料） を使用している方は、お手本データとして 1 クリックでコンテンツ追加できるよう、ブロックパターンを用意しています。

【プラグイン最新版リリース🦋】

テーマにあわせてアップデート！
Nishiki Pro スピードビルダー（無料）に「ブロークン グリッド レイアウト」のパターンを新しく 3 つ追加しました！
1 クリックでコンテンツを簡単追加！

お手本データとして活用ください。#wpnishiki pic.twitter.com/c4iVDpYcBB

— にしきちゃん@ワードプレステーマ Nishiki(Pro) (@wpnishiki) December 7, 2021

ぜひ活用ください。

注意点

「Broken Grid Layout（ブロークン グリッド レイアウト）」ブロックは、比較的ウェブサイト制作上級者向けのブロックです。

CSS の知識、特に position についての理解があれば、かなり自由で、特徴のあるコンテンツを作ることできるはずです。

とは言え、巷に数多く存在するウェブサイト制作案件の中には、ブロックだけでは完結できない要望もあると思います。

そんな時は、Broken Grid Layout（ブロークン グリッド レイアウト）を作る際に必要な手数を減らしてくれる、補助してくれるブロックという位置付けで使用ください。