見出し画像

[Shopify]特集ブログ記事一覧・PCは２カラム・セクションテンプレート（Dawn） #133

まりん | Shopifyフロントエンジニア+SNSマーケティング

こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。

ブログ記事一覧のセクションです。ブログ２つ選んで２カラムで表示されます！バナーも追加できるようにしてみました。不要な場合はバナー設定なしにすればOK。

スクロールした時のタイトルのアンダーラインがアニメーションになっててかわいい。

今回より簡単に設置できるようにCSSは同一ファイル内に書いて、設定ステップ数を１つにしてみました。これで本当にコピペだけで5分以内に設定して使えるようになりましたね。

使用しているテーマ：Dawn
※他のテーマの場合でもそのまま使えるように作成してみました

✔️今回のゴール

ブログ記事を２つ並べる。SPでは縦一列になります。

🔸CMSの特徴

セクションを追加＞「ブログ一覧　カラム」を選択


・セクションの見出し
・リード文
・ブログ１とブログ２選択
・各ブログごとにバナーとリンク設置、タイトル（設定なしでもOK)
・ボタンテキスト
・各記事のサムネの高さ
・表示するブログ数（１０記事までOK）
・カラー各種
（ボタンカラーはホバーすると背景と文字のカラーが入れ替わります）

フルコードと設定手順は下記に載せておきます。

【ご購入時のご注意】
※返金&サポート&コメント返信はしておりません。
※現時点の最新のDawnテーマをベースに作成してます。
※コード&設置方法のみのご紹介で解説などはしておりません。
※2024.8時点のコードです。メンテナンスは今後する予定はありません。
※環境やバージョンによりレイアウト崩れることもありますので適当にCSSで調整していただければと思います。（メンバーシップでコメント頂いた場合は修正します）

ここから先は

15,234字 / 1画像
この記事のみ ¥ 1,200

ログイン

この記事が気に入ったらサポートをしてみませんか？