![見出し画像](https://assets.st-note.com/production/uploads/images/113420308/rectangle_large_type_2_286e0f8b9a0507b75fd3c510a9eff95f.png?width=1200)
[Shopify]オリジナルセクション5 #A-3
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
オリジナルセクションシリーズ🎵
斜めの背景とスクロールすると画像が横スライドで表示されてオシャレ😎
環境:Dawn
※他のテーマで使う場合はCSSを調整してね。
✔️レイアウトの特徴
=========
パソコン
=========
![](https://assets.st-note.com/img/1691963121259-IO3713fGkE.png?width=1200)
=========
SP
=========
![](https://assets.st-note.com/img/1691963207978-2QhGDDciEO.png?width=1200)
🔶CMSの特徴
セクションを追加>セクションA-3を選択
![](https://assets.st-note.com/img/1691963467341-teopeAt0E2.png?width=1200)
ブロック追加>右側・左側にメイン画像
![](https://assets.st-note.com/img/1691963524946-aHQzwSPX8C.png?width=1200)
共通のカラー設定>セクションA-3を選択
![](https://assets.st-note.com/img/1691963633264-UxQqpWBtCu.png?width=1200)
![](https://assets.st-note.com/img/1691963596523-etpPIdOUqd.png?width=1200)
カラー
・セクション内のブロックの奇数・偶数の背景カラー設定
・セクションの一番最初と最後の三角背景を設定
アニメーション
・画像がスライドされる前に表示される背景カラー(透過されます)
=========
各ブロックごと
=========
![](https://assets.st-note.com/img/1691964297930-V2MjDk7Z9F.png?width=1200)
![](https://assets.st-note.com/img/1691964355585-vaXAsdWVqG.png?width=1200)
![](https://assets.st-note.com/img/1691964420283-SyCp5K0DWt.png?width=1200)
![](https://assets.st-note.com/img/1691964466822-my4CefNdyC.png?width=1200)
⚫︎画像3種
⚫︎テキスト
・タイトル
・サブタイトル
・説明
・画像3のキャプション
・注釈
【ご購入時の注意事項】
※返金&サポートはしておりません。
※最新のDawnテーマをベースに作成しております。
※ここからはCSSコードのみのご紹介で解説などはしておりません。
※2023.8時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。
ここから先は
17,866字
この記事が気に入ったらサポートをしてみませんか?