【WordPress専用】グリッドレイアウト

今回は、WordPressでグリッドレイアウトを実現する際のヒントを
提供出来たら幸いだと思います。

例えば、WordPressのカラム操作では、3カラムであれば、
どこまでも3カラムとなり、ロー(縦)方向の長さも、
heightプロパティの基本操作では、横幅との比率で決める事は出来ません。

今回はレイアウトが複雑な為、Layoutit!を使用して、
グリッドレイアウトを「作図」しています。

グリッドレイアウトのモデル

1
2
3
4
5
6
7

これ(全体として)はブロック要素(div要素)なので、横幅は親要素一杯になります。

HTML(WordPress)


<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"container grid-container"} -->
<div class="wp-block-column container grid-container"><!-- wp:columns {"className":"area-1"} -->
<div class="wp-block-columns area-1"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>1</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"area-2"} -->
<div class="wp-block-columns area-2"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>2</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"area-3"} -->
<div class="wp-block-columns area-3"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>3</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"area-4"} -->
<div class="wp-block-columns area-4"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>4</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"area-5"} -->
<div class="wp-block-columns area-5"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>5</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"area-6"} -->
<div class="wp-block-columns area-6"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>6</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"className":"area-7"} -->
<div class="wp-block-columns area-7"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:html -->
<span>7</span>
<!-- /wp:html --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
 

これを、WordPressのコードエディターにコピーしてください。
次に、CSSを導入してください。

CSS


.container{
	display: grid;
	grid-template-columns: 0.5fr 0.5fr 1fr;
	grid-template-rows: 0.5fr 0.5fr 0.5fr 0.5fr;
	grid-auto-columns: 1fr;
	grid-auto-flow: row;
	grid-template-areas:
	"area-1 area-2 area-3"
	"area-4 area-4 area-3"
	"area-4 area-4 area-5"
	"area-6 area-7 area-5";
}

.container .area-1 { grid-area: area-1; }
.container .area-2 { grid-area: area-2; }
.container .area-3 { grid-area: area-3; }
.container .area-4 { grid-area: area-4; }
.container .area-5 { grid-area: area-5; }
.container .area-6 { grid-area: area-6; }
.container .area-7 { grid-area: area-7; }

.grid-container > div{
	aspect-ratio: 1 / 1;
	margin-bottom: 0;
	padding:5px;
	/* 本来はグリッドのgapで設定しますが、今回はpaddingを用います。 */
}

.grid-container > div > div{
	display: flex;
	align-items: center;
	justify-content: center;
}

.grid-container > div > div > span{
	color: #fff;
	font-size: 75px;
}

.container .area-1 > div { background-color: red; }
.container .area-2 > div { background-color: orange; }
.container .area-3 > div { background-color: yellow; }
.container .area-4 > div { background-color: green; }
.container .area-5 > div { background-color: blue; }
.container .area-6 > div { background-color: navy; }
.container .area-7 > div { background-color: purple; }

#display::before{
	content:"PC版";
}

@media screen and (max-width:781px){
	.container {
		display: grid;
		grid-template-columns: 0.5fr 0.5fr;
		grid-template-rows: 0.5fr 1fr 1fr 1fr 0.5fr;
		grid-auto-columns: 1fr;
		grid-auto-flow: row;
		grid-template-areas:
			"area-1 area-2"
			"area-3 area-3"
			"area-4 area-4"
			"area-5 area-5"
			"area-6 area-7";
	}
	
	#display::before{
		content:"モバイル版";
	}
}
 

グリッドレイアウトのメリット

WordPressでグリッドレイアウトを扱うには、一定の知識が必要ですが、
グリッドレイアウトのメリットは、最初に挙げたものの他に多数あります。

  1. レスポンシブ性: グリッドレイアウトを使用することで、画面サイズやデバイスの異なる環境に柔軟に対応できます。
    要素の配置やサイズを調整することで、異なるデバイスで最適な表示を実現できます。
  2. 一貫性の維持: グリッドシステムを使用すると、コンテンツの配置に一貫性をもたせることができます。
    それにより、ユーザーが異なるページを移動しても、視覚的な統一感を保つことができます。
  3. デザインの効率化: グリッドレイアウトは、デザインや開発の効率化にも役立ちます。
    特に再利用性の高いコンポーネントやテンプレートを使用する場合、グリッドレイアウトを採用することで、コンテンツの配置が容易になります。
  4. 柔軟性と拡張性: グリッドレイアウトは柔軟性が高く、様々なデザインパターンやレイアウト構造をサポートします。
    また、必要に応じてグリッドを拡張して新しいコンテンツや機能を追加することも容易です。
  5. 視覚的な整列: グリッドレイアウトを使用することで、コンテンツを整列させやすくなります。
    均等なマージンやパディングを簡単に設定できるため、デザイン全体のバランスを保ちやすくなります。

中でも最も有利な部分は「空間の節約」だと言えます。

小規模なホームページであれば、1ページで完結させる事が出来、
レイアウト・スタイルを使い回す事が出来ます。

また、レスポンシブデザインにおいてもCSSを簡略化出来、
今後、積極的に使っていきたい機能だと言えます。

みらいワークの施設利用者
チュンチュン

「WordPress」でのHTML・CSS・JavaScriptに関する情報を、
提供させて頂く予定です。
使用プラグインは「Simple Custom CSS and JS」で、
JavaScriptの表示位置は必ず「要素内」です。
ただし、使用環境により異なる事をご了承ください。

サイト制作
「みらいワーク」利用者ノート
タイトルとURLをコピーしました