イメージストリームセクション

学べること

  • 横方向にスクロールする画像ギャラリーの作り方

  • スクロール速度、方向、間隔の調整方法

  • 画像にキャプションやリンクを追加する方法

  • デスクトップとモバイル向けのレイアウトとタイポグラフィの調整方法


🧩 セクション概要

Image Stream セクションは横方向にスクロールする画像の行で、キャンペーンショット、エディトリアルルック、ブランドのハイライトなどを表示するのに最適です。ストアフロントに動きを加え、自動スクロールに設定することもできます。


セクションの追加方法

  1. Shopify テーマエディター、クリック セクションを追加

  2. を選択します イメージストリーム

  3. セクションをページ上の希望する位置にドラッグします


画像の追加

各画像は次のブロックを使って追加します 画像.

画像を追加するには:

  • をクリック ブロックを追加、次に選択します 画像

  • 画像をアップロードまたは選択します

  • (オプション) キャプション – これは画像の下に表示されます

💡 ヒント: クリーンなレイアウトのためにキャプションは短く保ってください


セクション設定

コンテンツとリンク

  • セクションタイトル:セクションの見出しを追加します(オプション)

  • 表示リンクの URL:商品、コレクション、またはページへのリンクを追加します

  • 表示リンクのテキスト:これは「SHOP」のようなボタンのテキストです

  • 背景色:ストリームの背後の背景を設定します

  • セクションタイトルの色:見出しと表示リンクの色を設定します


レイアウトと表示

  • デスクトップでの1行あたりの画像数:表示する画像の数を選択します(2〜6)

  • 画像のアスペクト比:画像の形状を制御します(例:縦長、正方形、横長)

  • 高さモード:

    • レスポンシブ:画像はアスペクト比に基づいてスケールします

    • フルハイト:セクションが画面の高さを埋めます(タイトルとボタンは非表示になります)

追加オプション:

  • ストリーム方向を逆にする:右から左へのスクロールにするには有効にします

  • モバイルで非表示にする:スマートフォンでセクション全体を非表示にします

  • 自動スクロール速度:画像の移動速度を制御します(ピクセル毎秒で測定)

⚠️ より遅いスクロール速度の方がより滑らかに見え、追いやすくなります


タイポグラフィ設定

  • セクション見出しのサイズ(デスクトップ):デフォルトは16pxです

  • セクション見出しのサイズ(モバイル):デフォルトは14pxです

  • セクションタイトルを太字にする:オン/オフを切り替えます

  • 表示リンクを太字にする:オン/オフを切り替えます


間隔設定

デスクトップとモバイルの両方で間隔を調整できます。

デスクトップの間隔

  • 上:20px

  • 下:20px

モバイルの間隔

  • 上:16px

  • 下:16px

画像間のギャップ

  • 次から選択:なし、小、中、大

💡 ヒント: シームレスな見た目にしたい場合は「なし」を使用するか、各画像に余白を持たせたい場合は間隔を追加してください


セクション構造の例

セクションには複数の画像ブロックが含まれ、それぞれに画像とキャプションがあります。

例:

  • 画像 – ルック 1

  • 画像 – ルック 2

  • 画像 – ルック 3

  • 画像 – ルック 4


ヘルプが必要ですか?

  • 💬 Discordでコミュニティに参加: https://discord.gg/hcc2GvgZc6

  • 📧 メールでお問い合わせ: [email protected]

  • 💻 ライブチャット: 月曜〜金曜、午前10時〜午後6時(EST)に当社ウェブサイトで直接利用可能

最終更新