Start Strong
Sell Smart
Manage with Ease
Market to Success

ウェブサイト構築とデザインに関するよくある質問

SHOPLINEは、ストアフロントのデザインと機能を作成およびカスタマイズするための柔軟なウェブサイト構築ツールを提供しています。このFAQでは、ウェブサイト構築、ストアフロントデザイン、メタフィールド、カスタムコード、その他のストアフロント機能に関するよくある質問に回答します。

 

 

ストアフロントデザインに関するFAQ

Q1: ストアフロントの著作権テキストを変更するにはどうすればよいですか？

著作権テキストは、テーマのデフォルトテキスト設定から更新できます。

著作権テキストを変更するには：

  1. SHOPLINE管理画面 > オンラインストア > デザイン に移動します。
  2. 「マイテーマ」の下で、現在のテーマの横にある ⋯（その他の操作） をクリックし、テーマのコンテンツを編集する を選択します。

  3. Copyright を検索します。

  4. テキストを更新し、更新 をクリックします。

Q2: ストアフロント全体のフォントを変更するにはどうすればよいですか？

テーマエディターのグローバル設定内のタイポグラフィセクションから、ストアフロント全体で使用されるフォントを変更できます。詳細は、「ストアページ全体のグローバル設定の構成（OS 3.0 テーマ）」の中の「カラーとタイポグラフィのカスタマイズ」セクションを参照してください。

利用可能なフォントがご希望に合わない場合は、カスタムCSSを使用してストアフロントをさらにカスタマイズできます。カスタムCSSでカスタムフォントを実装する際のサポートが必要な場合は、SHOPLINEサポートまでお問い合わせください。

Q3: ストアフロントにファビコンを追加するにはどうすればよいですか？

ファビコンはブラウザのタブやGoogle検索結果に表示されます。テーマ設定からアップロードまたは更新できます。

ファビコンを追加または更新するには：

  1. SHOPLINE管理画面 > オンラインストア > デザイン に移動し、現在のテーマの デザイン をクリックします。
  2. テーマエディターで、グローバル設定 アイコンをクリックします。
  3. ファビコン セクションを開きます。

  4. サイトアイコン の下で、＋ 画像を追加 をクリックし、ファビコンをアップロードします。

  5. 保存 をクリックします。

Q4: ブログ投稿にアンカーリンクを作成するにはどうすればよいですか？

アンカーリンクを使うと、顧客がブログ投稿の特定のセクションに直接ジャンプできるため、長い記事のナビゲーションが容易になります。

ブログ投稿にアンカーリンクを作成するには：

  1. ブログエディターで、各セクションのタイトルを見出し1～見出し6でフォーマットします。アンカーターゲットとして使用できるのは見出しのみです。

  2. アンカーリンクとして使用したいテキスト（例：目次の項目）をハイライトし、次にリンクアイコンをクリックします。

  3. URLフィールドに#を入力します。ブログ投稿内の利用可能な見出しのリストが表示されます。

  4. リンク先にしたい見出しを選択し、リンクを開く場所...で現在のウィンドウを選び、次に保存をクリックします。

顧客はストアフロント上のアンカーリンクをクリックして、ブログ投稿の選択したセクションに直接ジャンプできます。

 

 

メタフィールドよくある質問

Q5: 特定の商品ページにYouTube動画を表示するにはどうすればよいですか？

商品ごとに異なるYouTube動画を表示するには、埋め込みコードを商品メタフィールドに保存します。

設定方法は以下の通りです：

  1. SHOPLINE管理画面 > 設定 > カスタムデータに移動します。メタフィールドの下で、商品メタフィールドをマルチテキストタイプで作成します。メタフィールドの作成方法の詳細は、「メタフィールドでストアコンテンツをカスタマイズする」を参照してください。

  2. 各商品の編集ページを開き、YouTubeの埋め込みコードを商品のメタフィールドセクションに貼り付けます。

  3. テーマエディターで、カスタムHTMLブロックを追加し、以下のコードを挿入します：

    {{{product.metafields.my_fields.Video.value}}} 
注：YouTubeの埋め込みコードを正しくHTMLとしてレンダリングするために、二重波括弧（{{ }}）ではなく三重波括弧（{{{ }}}）を使用してください。

Q6: OS 2.1の製品詳細ページで商品「概要」フィールドを表示するにはどうすればよいですか？

概要パーツはOS 2.1テーマでは利用できません — OS 2.0のみ対応しています。代替策として、概要テキストを商品メタフィールドに保存し、テキストパーツを使って表示することができます。

OS 2.1で商品概要を表示するには：

  1. SHOPLINE管理画面 > 設定 > カスタムデータ に移動し、商品メタフィールドを作成します。メタフィールドの作成方法の詳細については、「メタフィールドでストアコンテンツをカスタマイズする」を参照してください。

  2. 各商品の編集ページを開き、商品のメタフィールドセクションに概要テキストを入力します。

  3. テーマエディターで商品詳細ページを開き、テキストパーツを追加し、その動的ソースを作成した商品メタフィールドに設定します。

Q7: ストアフロントでリッチテキストメタフィールドの値をどのように表示しますか？

リッチテキストメタフィールドの表示方法はテーマのバージョンによって異なります。

OS 3.0テーマ：SLINE構文のmetafield_tagを使用してリッチテキストメタフィールドを表示します。完全な構文の詳細については、SHOPLINEの開発者ドキュメントを参照してください。

{{#var metafield_ns = collection | get_metafields("collections") /}}

{{#metafield_tag metafield_ns.FAQ_RichText /}}

OS 2.0およびOS 2.1テーマ：リッチテキストメタフィールドは完全にはサポートされていません。代わりに複数行テキストメタフィールドを使用し、以下のコードで表示してください：

{{{collection.metafields.collections.FAQ.value}}}
注：メタフィールドの内容に太字や改行などの書式が含まれる場合は、メタフィールドにHTMLとして内容を入力し、トリプルブラケット（{{{ }}}）を使用してストアフロントで正しくHTMLがレンダリングされるようにしてください。

 

 

カスタムコードよくある質問

Q8: モバイルデバイスで電話番号をクリック可能にするにはどうすればよいですか？

電話番号をクリック可能にするには、HTMLのtel:リンクを使用します。顧客がモバイルデバイスでリンクをタップすると、デバイスの電話アプリが開き、番号が自動的に入力されます。

テーマエディターで、以下のコードをカスタムHTMLブロックまたはリッチテキストフィールドに追加し、サンプルの電話番号を自分の番号に置き換えてください：

<a href="tel:+1234567890">お電話はこちら: +1 (234) 567-890</a>
注： href 属性の番号には国番号を含め、スペースやダッシュは削除してください（例：+1234567890）。

 

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