![見出し画像](https://assets.st-note.com/production/uploads/images/83643836/rectangle_large_type_2_5e09b2f3e74f51f213c721fe21be86f2.png?width=1200)
[Shopify]ブログ記事のテンプレート第3弾♪(Dawn)
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
Shopifyブログ記事のツールバーの機能を使ってレイアウト変更できないかなぁと思って作ってみました♪
これならHTMLそんなに触らないし簡単。
対象テーマ:Dawn
✔️今回のテンプレート
デモページ(PW:stahsk40jw1Mf)
ヘッダー>テンプレート>ブログ>Template3
![](https://assets.st-note.com/img/1659231045184-Yu3ivBjNGs.png?width=1200)
✔️使い方
![](https://assets.st-note.com/img/1659137365625-lDHbpRJYPg.png?width=1200)
![](https://assets.st-note.com/img/1659137370396-rBQv7ENQTO.png?width=1200)
![](https://assets.st-note.com/img/1659137375025-MWw0x6rqPp.png?width=1200)
![](https://assets.st-note.com/img/1659137379608-bZ51ikg6BL.png?width=1200)
![](https://assets.st-note.com/img/1659137384391-EIhLeApfYD.png?width=1200)
![](https://assets.st-note.com/img/1659137388631-C2Y1Rov9oB.png?width=1200)
![](https://assets.st-note.com/img/1659137393166-npXFaYbKY9.png?width=1200)
![](https://assets.st-note.com/img/1659137397031-1MyIfX7APv.png?width=1200)
![](https://assets.st-note.com/img/1659137402195-s9bfp5ul0I.png?width=1200)
![](https://assets.st-note.com/img/1659137406441-7ttG6xiuPH.png?width=1200)
![](https://assets.st-note.com/img/1659137411069-SNDR4pZyTc.png?width=1200)
![](https://assets.st-note.com/img/1659137414778-gjLVoIRw5Z.png?width=1200)
![](https://assets.st-note.com/img/1659137419687-oe6DiMV9jH.png?width=1200)
✔️CMSの特徴
目次とテーマカラーのみ選択できます。
◆見出しのキーカラーを選択
![](https://assets.st-note.com/img/1659131949360-wThpTloluW.png?width=1200)
◆目次のタイトルテキストと背景カラー
![](https://assets.st-note.com/img/1659131938680-sK7QJ4cO8T.png?width=1200)
目次は目のマークでON /OFF切り替えできます。
✔️設置手順
Step1 新規セクション追加
コード編集>Section>新規追加
![](https://assets.st-note.com/img/1659131366055-IaupcAv0f9.png)
ファイル名:main-article-template3
ここから先は
19,993字
/
3画像
/
1ファイル
この記事のみ
¥
3,800
期間限定!Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる
Amazonギフトカード5,000円分が当たる
この記事が気に入ったらチップで応援してみませんか?