![](https://cxg-design.jp/wp-content/uploads/2024/01/AdobeStock_278332272-169.jpg)
ブロックエディターのグラデーションでズレのあるレイアウトに
Webサイトを作成する時はボックスを作成しその中に文字や写真を入れレイアウトしていきます。しかし、あまりにも区切りが多いと硬いイメージになり、サイトのイメージに合わなくなることもあります。今回は、ブロックエディターを使用して、文字や写真がグリッドからズレているようなレイアウトにします。
今回のDEMOは、アパレルサイトのLPです。商品を紹介して、詳細ボタンからショップサイトにリンクできる想定で作成しました。
タイトル
![](https://cxg-design.jp/wp-content/uploads/2024/01/5758e917a95b0f09ce6c72d870dfcabc.png)
カバーで全面に写真を入れ、オーバーレイのグラデーションで左にバックの白色の帯を入れました。グラデーションは、すべて白色で作成します。色の分岐のところに、透明度100と0同じ場所に設置し、角度90°、「オーバーレイの不透明度」を「100」にすることで、パキッと分かれたグラデーションになります。
![](https://cxg-design.jp/wp-content/uploads/2024/01/bae3c1aee101576ab82d40bb4b94b884.png)
カバーに写真を配置
![](https://cxg-design.jp/wp-content/uploads/2024/01/e1bbc372fc37d72bdf5cf3cff0e3b213.png)
スタイル>オーバーレイ>グラデーションをクリック。白(#ffffff)の透明度0と100を同じ位置に、角度を90°に指定。
タイトルを「見出し」で左端に置くことによって、画像から文字がはみ出たデザインになります。あとは、上下にスペースを入れて見た目を整えます。
![](https://cxg-design.jp/wp-content/uploads/2024/01/55a7640df189a0c6761f8b8bc10b54cc.png)
左中央にタイトルを見出しで入れて、「スペーサー」で大きさを整える。
ボックス(横)
![](https://cxg-design.jp/wp-content/uploads/2024/01/a9dba4294edb2d272f68f7684d6a6a6b.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/97eba9884aeeb46d7309ff0502e26d24.png)
メインの3商品は、タイトルと同じように左右に白の余白を入れ、その上にメディアとテキストでボックスを重ね、ズレているようにしました。
まずは、タイトルブロックを複製し、画像を入れ替え。カバー内のタイトルなどをすべて削除します。カバーの中にメディアとテキスト作成し、左をテキスト、右を画像にします。まず、画像に長方形の透明画像を挿入します。これによって、SPで見たときに、背景画像がテキストボックスの上に表示されます。次に、テキスト欄にカラムを入れ、白バックにし、ボックスを作成します。その中に、見出しとテキスト、ボタンを配置します。
2段目は左右逆にするため、複製し、「メディアとテキスト」の位置を逆にする。グラデーションの角度を270°に変更し、写真を入れ替え、テキストを入力。3段目は1段目と同じレイアウトなので、複製して2段目の下に移動し、内容を変更。
![](https://cxg-design.jp/wp-content/uploads/2024/01/59359880b6d096a6daffaa8df21d1205.png)
タイトルを複製して、画像を入れ替え。カバー内のタイトルなどをすべて削除し、「メディアとテキスト」を挿入。
![](https://cxg-design.jp/wp-content/uploads/2024/01/c781348e6fbb1950507794a5d6c2bc24.png)
右のメディアに透明の長方形を挿入
![](https://cxg-design.jp/wp-content/uploads/2024/01/c740937af47fd7888a316d9eb7b407b0.png)
左に1カラムを挿入し、背景を白に
![](https://cxg-design.jp/wp-content/uploads/2024/01/1877175600c9b7431166df9f695e36c1.png)
カラム内にスペックを入力
![](https://cxg-design.jp/wp-content/uploads/2024/01/404b309219a88dd64abfb72b63b7635a.png)
2段目は左右逆にするため、複製し、「メディアとテキスト」の位置を逆にする。グラデーションの角度を270°に変更。
ストライプ
![](https://cxg-design.jp/wp-content/uploads/2024/01/33af42eddd8a4e7bef767a04686123b5.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/7c3b63702e26ac7baa0221df92ad856e.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/477e97dceb7de96dc5b93df4926e9c61.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/0328219e5fb6e2af448ff17fbc5717bf.png)
カラムの背景にグラデーションを入れ、ストライプが入り、写真やボタンが重なって配置されるようにします。
上の段の2カラムを例に説明します。2カラムを50:50で作成し、左のカラムを選択します。カラム内に写真やテキストなどのを中心揃えで入れていきます。背景にグラデーションを左白、右ピンクでパキッと分け、ストライプにします。「垂直配置を変更」をクリックし「埋めるように拡張」を選択します。このカラムを右にコピー&ペーストして写真や文字を変更します。
下の段は3カラムにして同じように上段左のカラムをコピー&ペーストして内容を変更していきます。
![](https://cxg-design.jp/wp-content/uploads/2024/01/d3ca0c653bb5a2cbac0d7b221e76728b.png)
2カラムを作成し、写真を配置し、スペックを入力。
![](https://cxg-design.jp/wp-content/uploads/2024/01/d398e8a4c9ea2d27969d568f95c838f1.png)
カラムの背景を白、ピンクのグラデーションでストライプを作成。
![](https://cxg-design.jp/wp-content/uploads/2024/01/c59d659b465cc038f14ea56023a2b3b9.png)
カラムをコピー&ペースト
![](https://cxg-design.jp/wp-content/uploads/2024/01/00be7d5efdbccb6dd68853b90bb8d243.png)
背景の色を変更。写真を入れ替え、テキストを変更。
![](https://cxg-design.jp/wp-content/uploads/2024/01/dc34ca3cfd3333121ee9c0ff8a983559.png)
下の段は、3カラムを作成し、上段左のカラムをコピー&ペーストして、背景色を変更し、テキスト変更。
ボーダー
![](https://cxg-design.jp/wp-content/uploads/2024/01/06bec138194e36a819b1b5e4e039125e.png)
![](https://cxg-design.jp/wp-content/uploads/2024/01/bf7e2902213d723479c826f7dde769bc.png)
2つのハイヒール画像の下にボーダーを作成し、上下がはみ出ているデザインにします。PCでは、3商品を繋ぐボーダーになります。
3カラムを作成し、カラム内に、画像2点、見出し、テキストを配置します。背景をピンクグラデーションを角度180°、不透明度0、100、100、0にしてボーダーを作成します。グラデーションで作成したボックスが、2点の画像にかかるように調整します。作成したカラムをコピーし、右2つのカラムにペーストします。グラデーションの色を変更し、画像を入れ替えます。
![](https://cxg-design.jp/wp-content/uploads/2024/01/dd89afdfd858e493383f9eb8bbc1a5a4.png)
3カラムを作成し、写真スペックを入力。
![](https://cxg-design.jp/wp-content/uploads/2024/01/c78521b77d933f7ae5f94d4cfc25706c.png)
カラムの背景のボーダーを2点の画像に掛かるようにグラデーションで作成。
![](https://cxg-design.jp/wp-content/uploads/2024/01/3944fd54d6d1a6efc844c2860bcfe93e.png)
カラムをコピー&ペースト
![](https://cxg-design.jp/wp-content/uploads/2024/01/b771b9c16f26e3f29fffc3a6c4b7eb27.png)
グラデーションの色を変更し、画像を入れ替え。
ボックス(上)
![](https://cxg-design.jp/wp-content/uploads/2024/01/25347edb53685dbffd0a03915bea266b.png)
画像の上からボックスがはみ出しているレイアウトにしています。
カバーで、全面画像を配置し、上部をオーバーレイ>グラデーションで白色にします。カバーを選択し、「コンテンツ位置を変更」で上中央をクリック。内部に25/50/25の3カラムを作成します。中央のカラムの背景を白に変更し、内容を入力し、ボタンを配置します。
![](https://cxg-design.jp/wp-content/uploads/2024/01/3994e8d86a14d222ef3a70abf8eb9264.png)
カバーに画像を配置し、スタイル>オーバーレイ>グラデーションで角度を180°にして、上を白で塗りつぶす。
![](https://cxg-design.jp/wp-content/uploads/2024/01/407b9f54d6bb9e6798ed366cc0acbdec.png)
カバー内に3カラムを作成し、真ん中のカラムの背景を白にする。
![](https://cxg-design.jp/wp-content/uploads/2024/01/4608c327f0ed95a8122870fbbe3847ec.png)
「コンテンツ位置を変更」の上中央をクリック。
![](https://cxg-design.jp/wp-content/uploads/2024/01/28127774d8f1d214f517284ef9bca546.png)
カラム内にテキストなどを入力
以上で完成です。背景透明画像の作成は、画像編集ソフトを使う必要がありますが(DEMOはPhotoshopで作成)、ズレの作成は簡単にできます。また、これらをパターンとして登録すれば、再利用が簡単にできます。Webサイト制作のご依頼は、コンタクトフォームよりよろしくお願いします。