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

学べること

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

  • スクロール速度、方向、間隔の制御方法

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

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


🧩 セクション概要

Image Stream セクションは水平方向にスクロールする画像の列で、キャンペーン写真、編集ルック、ブランドのハイライトを表示するのに最適です。ストアフロントに動きを加え、自動スクロールに設定できます。


セクションの追加方法

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

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

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


画像の追加

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

画像を追加するには:

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

  • 画像をアップロードするか選択します

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

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


セクション設定

コンテンツとリンク

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

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

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

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

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


レイアウトと表示

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

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

  • 高さモード:

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

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

追加オプション:

  • ストリームの方向を反転:右から左へスクロールするように有効化します

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

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

⚠️ ゆっくりめのスクロール速度の方が滑らかで追いやすく見えます


タイポグラフィ設定

  • セクションヘッダーサイズ(デスクトップ):デフォルトは16pxです

  • セクションヘッダーサイズ(モバイル):デフォルトは14pxです

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

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


間隔設定

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

デスクトップの間隔

  • 上:20px

  • 下:20px

モバイルの間隔

  • 上:16px

  • 下:16px

画像間のギャップ

  • 選べるオプション:なし、小、中、大

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


セクション構成の例

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

例:

  • 画像 – ルック1

  • 画像 – ルック2

  • 画像 – ルック3

  • 画像 – ルック4


ヘルプが必要ですか?

最終更新