◆◇◆ ブロークングリッドデザインとは ◆◇◆

規則性のある境界線に沿って要素を配置し、構成されたグリッドレイアウトを一部分くずし、不揃い感を出したデザインのことです。

安定し、落ち着いた印象のグリットデザインと比べ、遊びの感覚を与えたり、おしゃれで洗練された印象を与えることができます。

ボックスとテキストを重ねたりして、余白をうまく活かしたデザインが可能になります。

ブロークングリッドデザインのレイアウトは様々ですが、今回は背景を右にずらし、テキストを通常位置に配置するデザインで、ワードプレスのカバーブロックを使い一番簡単にできる方法をお伝えいたします。

カバーブロックでの作成手順

カバーブロックを選択

カバーブロックを選択 > 任意の色の選択 > 全幅 にします。

カバーブロックにクラスを付与

先ほど作ったカバーブロックに、任意のクラス名を付けます。

親要素になるので ”parent”としています

カバーの中にコンテンツを作成

カバーブロックの中に、任意のコンテンツを作成します。(タイトル、段落、画像など)

コンテンツをグループブロックでまとめる

作成したコンテンツを全選択 > グループブロックに > グループを全幅に

グループブロックにクラスを付与

先ほど作ったグループブロックに、任意のクラス名を付けます。

”parent”の中にある子要素なので"child"としています

追加CSS

管理画面 > 外観 > カスタマイズより、追加CSSに以下のように追記します。

  • 親要素を右にずらし、子要素を元の位置に戻す
.parent {
	position: relative; 
	left: 20%;
}
.child {
	position: relative; 
	left: -20%;
}

このように、親/子セットで反対のCSSを書けば簡単に背景をずらすことができます。

パーセンテージで指定すれば、タブレットやモバイル表示での調整も不要です。

基本的には親要素と同じ数値だけ子要素の数値を戻せば良いだけなので、調整もしやすいです!

通常、親/子関係の場合 "relative"と"absolute" をセットで使う場合が多いですが、ワードプレスの場合カバーブロックで親要素の中に子要素を配置できるため、どちらも "relative"で指定しています。

また、子要素を上下にずらすことでも背景位置の見た目を簡単に変えられます。

Point

  • カバーブロックを使うことで、背景色だけでなくカバー画像でも可能
  • 親/子の数値調整がわかりやすい
  • パーセンテージ指定でモバイルやタブレットでの表示調整が不要
  • カバーブロックの上にコンテンツを乗せているので、z-indexの調整の必要がない

ワードプレスのブロックと数行のCSSで、とても簡単にブロークングリッドデザインを作ることができました!

他のブロックも使って同じデザインで作ってみると・・

カラムブロックを使って左右の位置を調整した場合

カラムブロックを使い、まず2カラムに分け、左にカバーブロック(または画像)と右にテキストを配置して、CSSでさっきと同じデザインになるように調整してみたいと思います。

*緑の背景に "bg" 、テキストに"upper" クラスを付与しています。

2カラムに分けて左右の位置を調整した場合の問題点

  • 背景を左右に動かすと余白ができてしまう
  • テキストを動かすと本来の表示位置からずれる
    • ブラウザ表示幅やモバイル端末によってそれぞれの調整が必要
    • ブラウザ表示幅やモバイル端末によって文字が見切れる
  • z-indexの調整が必要

背景画像とコンテンツに分けて位置を調整した場合

次は上に背景画像、下にテキストを配置して、CSSでさっきと同じデザインになるように調整してみたいと思います。

*ベージュの背景に "bg-top" 、テキストに"under" クラスを付与しています。

上下に分けて位置を調整した場合の問題点

  • 上に移動させた分、次のコンテンツまでの余白ができてしまう

今回のデザインとしては問題点が多いですが、表現したいデザインによってはどちらも使えます。

なるべく保守性も高く、綺麗に簡単に制作するには、まず適切なブロックを考慮し、制作を進めていくことが大切ですね。

投稿者プロフィール

Izumi
Izumi
2018年より始めた事業のホームページを自作し運用していくなかで、ホームページ制作の楽しさをしり、独学から本格的にWebを学ぶ。
2020年より、自分の周りのWebが苦手な人たちを助けたいという思いからWeb制作を中心にフリーで活動。
2022年より株式会社ウェブロードに入社し、制作・デザインの知識をさらに深めながら、初心者でもわかりやすいWordPressの操作方法などを発信中。

お問合せフォームはこちら

(※営業電話が多いため留守電にしています。お急ぎの方は下記メールフォームをお使いください。)

お見積りのご依頼・打ち合わせはZOOM/GoogleMeet/お電話等、オンラインでも対応可能です。全国からお問い合わせを受付けています。
2営業日を過ぎても弊社からの連絡がない場合はメールが届いていませんので、大変お手数をお掛けしますが、下記メールアドレスにご連絡ください。

    お問い合わせの前に下記、ご確認をお願いいたします。

    任意貴社サイトURL

    必須お問い合わせ項目

    必須制作費のご予算はどれくらいですか?

    企画・設計、デザイン、画像・文章の作成、サイト内検索システムの導入等、
    ヒアリングを元にご予算やご希望に応じたお見積りをご提案させて頂きます。
    弊社制作費の費用感につきましてはこちらの記事をご参照ください。

    必須制作目的はどうお考えですか?(複数選択可)

    どこに力を抜きどこに力を入れるのか、
    ご予算とご要望の中から最適なご提案をさせていただきます。

    必須どのような機能が必要ですか?(複数選択可)

    SSL(https://~)対応、ブログ機能、スマホ対応(レスポンシブ)、
    ログイン等セキュリティ対策、ページタグSEOの最適化は標準搭載。

    必須どのような作り方がご希望でしょうか?(複数選択可)

    WordPressでの構築になりますので、お客様のご要望に比較的柔軟にお応えすることが可能です。
    企画ご提案する前に参考にさせていただく項目です。

    必須お問い合わせ内容を教えてください

    必須お名前

    必須フリガナ

    必須メールアドレス

    必須貴社名

    任意電話番号(ハイフン無し・半角数字)