[Shopify]ブログ「一覧」のテンプレート#3 メインビジュアルはメタオブジェクトと連携すると◎
こんにちは。Shopify専門エンジニアのまりん(@crowd37cord)です。
ブログ一覧のオリジナルレイアウト。メインビジュアルの部分はメタオブジェクトと連携して使えるようにしてみました。
✔️今回のテンプレート
All Postの記事一覧の上にメインビジュアルと新着記事を挿入してみました!記事一覧は元々のレイアウトですが、抜粋のテキスト非表示にしてタイトル、日付、タグが表示されるようにしています。
====
パソコン
====
====
スマホ
====
全ての記事一覧の表示数は既存のままですので表示数変更したい場合はご自身で変更してください。
🔸CMSの特徴
画像やテキストはメタオブジェクトと連携できます🎵
タイトルやタイトル画像は必要なければ空欄でOK。タイトル画像はfigmaやCanvaで作って挿入するとワンポイント入っておしゃれ。
新着記事は最新7記事が表示されます。表示件数の設定や自動スライドは不可です。サムネ画像は正方形に切り取られます。長方形で作成している場合は切れてしまうかも。その場合は画像の方を調整してください。
↓サンプルのタイトル画像アップしておきます
✔️設置手順
📌事前準備 メタオブジェクト&メタフィールドを作成
1️⃣メタオブジェクトの新規定義追加
名前とキーはなんでもOKです。お好みで。image1とimage2は同じ設定。
2️⃣コンテンツ>メタオブジェクト
エントリーを追加
3️⃣ブログのメタフィールドに紐付け
カスタムデータ>ブログ
これで、カスタマイズ画面で選択できるようになりました🎵
メタオブジェクトとメタフィールドの設定は完了です。次はセクション、スニペット、CSSを追加していきます。
ここから先は
28,052字
/
8画像
この記事が気に入ったらサポートをしてみませんか?