![見出し画像](https://assets.st-note.com/production/uploads/images/135554159/rectangle_large_type_2_99a3b1de2018b730bffd2a4791fca5f7.png?width=1200)
[Shopify]複数の画像組み合わせ!アニメーションカラムセクション #120 #temp-t
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
セクションテンプレート「Tシリーズ」第二弾。
「Tシリーズ」第一弾と組み合わせると良い感じのLPが作れちゃいます^^
アニメーションカラム。スクロールすると画像が動くのでいつものDAWNがちょっとリッチに🎶
ベーステーマ:Dawn
※他のテーマでも挿入できると思いますがレイアウト崩れるかもしれないのでその場合はご自身で調整してね
✔️今回のゴール
![](https://assets.st-note.com/production/uploads/images/135554091/picture_pc_f20d5f7bf5ecd86fbdfefe61f9265b18.gif?width=1200)
![](https://assets.st-note.com/img/1711757929334-3XRURjCrsB.png?width=1200)
![](https://assets.st-note.com/img/1711757935506-sJTJP4iJsj.png?width=1200)
![](https://assets.st-note.com/img/1711757941209-J4W98QDvKE.png?width=1200)
🔸CMSの特徴
「セクション T-2」を選択
![](https://assets.st-note.com/img/1711754654687-qspwQ0HTt0.png?width=1200)
▪️ブロックでカラム追加
![](https://assets.st-note.com/img/1711754713667-KdYPrzrlg6.png?width=1200)
メイン画像左右選択してね^^
=====
ブロック内の設定
=====
![](https://assets.st-note.com/img/1711754847834-jLjp70Qrsf.png?width=1200)
![](https://assets.st-note.com/img/1711754961481-6A5aomlgsW.png)
【画像のみのカラム】
・画像:固定(アニメーションなし)
・画像2:アニメーション
![](https://assets.st-note.com/img/1711754856345-cKOYjN1lsn.png)
【画像やテキスト諸々カラム】
・画像&画像2:両方アニメーション
![](https://assets.st-note.com/img/1711754935406-HErX82uayI.png?width=1200)
=====
共通の設定
=====
![](https://assets.st-note.com/img/1711758125104-VS8ec3BLtA.png?width=1200)
【ご購入前のご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コードのみのご紹介で解説などはしておりません。
※2024.3時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。(メンバーシップでコメント頂いた場合は修正します)
✔️設定手順
Step1 新規セクション追加
1️⃣管理画面>コード編集>セクション>新規追加
![](https://assets.st-note.com/img/1711748556102-qj9XXAvmSF.png)
ファイル名は
section-temp-t-02で作成しました
ここから先は
20,067字
/
2画像
この記事のみ
¥
1,500
この記事が気に入ったらサポートをしてみませんか?