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

あなたが学ぶこと

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

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

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

  • デスクトップとモバイルでレイアウトとタイポグラフィを調整する方法


🧩 セクション概要

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


セクションの追加方法

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

  2. を選択し、 画像ストリーム

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


画像の追加

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

画像を追加するには:

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

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

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

💡 ヒント: クリーンなレイアウトにするためにキャプションは短く保ちましょう


セクション設定

コンテンツとリンク

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

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

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

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

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


レイアウトと表示

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

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

  • 高さモード:

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

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

追加オプション:

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

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

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

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


タイポグラフィ設定

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

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

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

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


間隔設定

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

デスクトップの間隔

  • 上:20px

  • 下:20px

モバイルの間隔

  • 上:16px

  • 下:16px

画像間のギャップ

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

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


セクション構造の例

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

例:

  • 画像 – ルック1

  • 画像 – ルック2

  • 画像 – ルック3

  • 画像 – ルック4


ヘルプが必要ですか?

  • 💬 Discord のコミュニティに参加してください: https://discord.gg/hcc2GvgZc6

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

  • 💻 ライブチャット: 月〜金、現地時間(EST)10:00〜18:00 に当社ウェブサイトで直接利用可能

最終更新