テーマエディターのパーツを使ったストアページのデザイン（OS 3.0 テーマ） – SHOPLINE ヘルプセンター

OS 3.0 テーマのテーマエディターでは、パーツはトップページから商品ページやカテゴリページまで、ストアのあらゆるページをデザインするための基本要素です。各ページはパーツから組み立てられ、多くのパーツは入れ子になったパーツでさらにカスタマイズできるため、ストアフロントのレイアウトを一貫性のあるモジュール式で構築・調整できます。

このガイドでは、ストアページの構造、パーツの種類（ユニバーサルとページ専用）の違い、それぞれの完全な設定の場所、そしてパーツをページ間でコピーするなどのエディター操作の使い方について説明します。

始める前に：正しいツールを使用していることを確認してください

この記事は、PC版テーマエディター（オンラインストア > デザインからアクセス）内のパーツについて説明しています。Shopper Appで同等のデザイン設定をお探しの場合は、「アプリデザイン」のヘルプ記事をご参照ください。

テーマエディターにおけるパーツとブロックの理解

各ストアページは、左サイドバーのパーツを追加ボタンから追加するバナー、商品カルーセル、パンくずリストなどのパーツで構成されています。ほとんどのパーツは、パーツ内にネストされたより小さな要素であるブロックを1つ以上含むことができ、これらはパーツを追加アイコンを通じて追加されます（例：タイトル、リッチテキストフィールド、購入ボタンなど）。ブロックは複数階層にネスト可能で、単一のパーツ内でより詳細なレイアウトを実現できます。

注意事項：

テーマエディターのサイドバーは、上から下へヘッダー、テンプレート、フッターの3つの固定エリアに分かれています。これら3つのエリアのいずれにも、パーツ（パーツを追加アイコン経由）とブロック（パーツを追加アイコン経由）の両方を追加できます。
テンプレートエリアは、ページのメインコンテンツ、つまりヘッダーとフッター以外のすべてを表すため、通常最も豊富なパーツとブロックのセットを提供します。
パーツとブロックの設定パネルは、画面比率によって位置が異なります。本記事では画面上の表示位置ではなく、表示される内容について説明しています。

ユニバーサルパーツとページ専用パーツ

パーツは2つのカテゴリに分かれます：

ユニバーサルパーツ：どのページタイプにも追加可能です（例：パンくずリスト）。一般的な設定はこの記事で説明しています。ページごとにユニバーサルパーツに特別な動作がある場合は、そのページ専用の記事で本記事への参照とともに説明します。
ページ専用パーツ：特定のページタイプでのみ利用可能です（例：商品詳細ページの購入ボタン）。この記事ではそれらが何でどこにあるかを紹介し、完全な設定手順とテーマの対応状況は該当ページの記事で説明します。

ユニバーサルパーツの設定

SHOPLINE OS 3.0 テーマは現在、以下のユニバーサル

パーツをサポートしており、それぞれ任意のページに追加可能です：

パーツ	説明
パンくずリスト	顧客がたどったページ階層を表示し、現在のページを除くすべてのノードがクリック可能です。
ビフォー＆アフター	視覚的比較のために2つの画像を並べて表示します。
ブログ	ブログ記事のリストを表示します。
コラージュ	複数の画像をコラージュスタイルのグリッドレイアウトで配置します。
商品カテゴリリスト	複数のカテゴリを表示します。
連絡先フォーム	顧客がページから直接問い合わせを送信できるフォームです。
カウントダウン	特定の日付やプロモーション終了時間までのカウントダウンを表示します。
カスタムページ	カスタムページコンテンツのためのページタイトルと画像を表示します。
カスタムセクション	コードを使って完全にカスタムのレイアウトを構築できます。以下の注意事項を参照してください。
カスタムSLINE	高度なレイアウトカスタマイズのためにカスタムSLINEコードを挿入できます。
割引プロモーション	割引やプロモーションオファーを強調表示します。
メールマガジンの購読	ニュースレターのサインアップフォームです。
よくある質問	折りたたみ形式でよくある質問のリストを表示します。
おすすめ商品カテゴリ	特定の商品カテゴリを強調表示します。
おすすめ商品	特定の商品を強調表示します。
画像バナー	全幅の画像バナーです。
画像とテキストリスト	画像とテキストを組み合わせたリストを列で表示します。
画像とテキストパーツ	全幅の画像にテキストと任意のボタンを組み合わせて表示します。
成分表示	美容、スキンケア、食品などでよく使われる、各成分に画像と説明を付けた商品成分のリストを表示します。
商標リスト	ブランドやパートナーのロゴを一列に表示します。
地図	店舗のロケーションなどの地図を表示します。
メディアプロモーション商品	メディアタイル（画像または動画）を通じて商品を表示し、商品情報と行動喚起ボタンを組み合わせます。
マルチレベルフィルタ	複数レベルやカテゴリのフィルタオプションを提供します。
最近閲覧した商品	顧客が最近閲覧した商品を表示します。
ユニークおすすめ商品	キュレーションまたはアルゴリズムに基づくおすすめ商品のリストを表示します。
リッチテキスト	リッチフォーマットの自由形式テキストコンテンツです。
ショッピング画像	クリック可能なショッピング商品ホットスポット付きの画像です。
ショッピング動画	ショッピング商品要素を含む動画コンテンツです。
スライドショー	回転する画像またはスライドのセットです。
ユニークカテゴリ	ユニークカテゴリの下にキュレーションされた商品カテゴリのグループを強調表示します。
ユニークスライドショー	分割画面レイアウトのスライドショーです。
画像とテキストパーツの結合	2つの画像とテキストのブロックを並べて結合し、それぞれ独自のコンテントコンテナ内に配置。2つの商品やプロモーションをタイトルとボタン付きで一緒に紹介するのに便利です。
ホバー時の画像切替	ホバー時に画像を切り替え、別の商品のビューを表示することが多いです。
動画	動画を表示します。

注：

Appsなどの一部のパーツは、パーツピッカーのテーマタブではなく、別のAppsタブから追加され、インストール済みのアプリからコンテンツを挿入できます。詳細は「OS 3.0 テーマへのアプリ統合」をご覧ください。
パーツを使ったカスタムレイアウトのステップバイステップ設定については、「カスタムセクションとコンテンツコンテナによるページレイアウトのカスタマイズ（OS 3.0 テーマ専用）」をご覧ください。
これらのパーツで推奨される画像サイズについては、「推奨ストアイメージサイズ（OS 3.0 テーマ）」をご覧ください。

以下のセクションでは、最も一般的に使用される3つのユニバーサルパーツ、スライドショー、パンくずリスト、およびコンテンツコンテナのステップバイステップ設定方法を説明します。

スライドショーの設定と画像リンクの追加

スライドショーパーツを使用して、複数のバナー画像を表示し、その表示、コンテンツ、およびリンクをカスタマイズできます。顧客がリンク付きの画像をクリックすると、別のストアページ、外部URL、または指定された電話番号にリダイレクトされます。

注：スライドショー画像へのリンク追加は、Bottleを除くすべてのSHOPLINE公式無料OS 3.0テーマでサポートされています。

スライドショーを設定するには、以下の手順に従ってください：

テーマエディターで、スライドショーパーツを含むページ（例：ホームページ）に移動します。次に、左のサイドバーでスライドショーを選択します。
右側の設定パネルで、スライドショーの表示方法を設定します：

PC版の高さ と モバイルの高さ: PC版とモバイルデバイスのスライドショーの高さを設定します。
全画面表示: このオプションを有効にすると、スライドショーが全画面幅で表示されます。
ページネーションスタイル: 顧客がスライド間を移動する方法を選択します。例えば、プログレスバー、矢印、または ドットなどです。
自動切り替えをオンにする: このオプションを有効にすると、画像が自動的に切り替わります。切り替え間隔を使って画像の切り替え頻度を設定します。
モバイル画像テキストレイアウトスタイル: モバイルデバイスで画像とテキストがどのように表示されるかを選択します。例えば、画像内のテキスト、画像の下のテキスト、または 画像に重なるテキストなどです。

左のサイドバーで スライドショー を開き、修正したい画像パーツを選択します。右側のパネルの設定で画像を設定します：

PC版の画像 と モバイルの画像: PC版とモバイルデバイスに表示される画像を追加または置き換えます。
画像リンクのリダイレクト: URLまたは電話番号を入力するか、顧客をリダイレクトするストアページを選択します。（この設定は Bottle テーマではサポートされていません。）
画像表示エリア: スライドショー内で画像が配置される場所を選択します。
レイヤーマスクの不透明度: 画像オーバーレイの不透明度を調整します。
テキストマスクを表示: このオプションを有効にすると、画像にテキストオーバーレイが表示されます。
テキストマスクの色: テキストオーバーレイの色を選択します。
カラースキームを継承: このオプションを有効にすると、現在のテーマのカラースキームがテキストオーバーレイに使用されます。

設定の下で、レイアウトを開き、方向、自動折り返し、配置、均等配置、間隔、利益率、およびサイズを含むコンテンツレイアウトを設定します。
さらに多くの画像を追加するには、左のサイドバーのスライドショーパーツにカーソルを合わせ、＋アイコンをクリックして別の画像ブロックを追加します。次に、新しい画像を必要に応じて設定します。
保存をクリックして変更を申請します。

ページナビゲーションにパンくずリストを使用する

パンくずリストは、顧客がたどるページ階層（例：ホーム / カテゴリ / 商品）を表示し、現在のページを除くすべてのノードがクリック可能です。

ページにパンくずリストを追加するには：

テーマエディターで、目的のページに移動します。
パーツを追加をクリックし、テーマタブに移動して、パンくずリストを選択します。
希望のカラースキームを設定し、PC版および/またはモバイルで有効にするか選択し、必要に応じてレイアウトを設定します。
保存をクリックして変更を申請します。

カスタムレイアウトのためのコンテンツコンテナの使用

タイトル、販売価格、数量セレクターなどのブロックをグループ化し、単一の縦積みではなく左右に配置できる中間レイアウト層です。

コンテンツコンテナを追加するには：

パーツ内で、パーツを追加をクリックします。
テーマタブの下にあるコンテンツコンテナを選択します。
配置したいブロックを追加し、コンテナのレイアウトコントロールを使って方向と配置を設定します。
変更を適用するには、保存をクリックします。

注意：

コンテンツコンテナを移動するには、その親ブロックを選択してそこで配置を適用してください。コンテナ自体を直接配置しても位置は変わりません。
このコントロールはコンテンツコンテナ内に配置されたブロックにのみ影響し、ページテンプレート全体の垂直配置を上書きしません。
テーマ対応状況：この機能は、Bottleテーマを除くすべての公式OS 3.0無料テーマでサポートされています。

ページ間でのパーツの再利用

パーツとそのカスタマイズされたコンテンツや設定をすべてコピーし、別のページテンプレートに貼り付けることができます。これにより、ホームページ、カテゴリページ、ブログ投稿などで同じバナー、画像ブロック、プロモーションエリアを手動で再構築する必要がなくなります。

別のページでパーツを再利用するには：

テーマエディターの左サイドバーで再利用したいパーツを見つけます。
三点リーダーアイコン（操作）をクリックし、コピーを選択してクリップボードにコピーします。
対象のページに移動し、既存のパーツの三点リーダーアイコンをクリックして、下に貼り付けを選択します。
保存をクリックします。

注意：

商品詳細ページの商品やユニークおすすめ商品など、特定のページテンプレートに不可欠なパーツはコピーできません。
各ページは最大25個のパーツをサポートしています。
コピーしたコンテンツはエディターのメモリにのみ保存され、テーマエディターを閉じるとクリアされます。
テーマ対応状況：この機能は、Bottleテーマを除くすべての公式OS 3.0無料テーマでサポートされています。サードパーティの有料テーマではサポートされていません。

この記事はAIを使用して翻訳されており、不正確な箇所が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。