テーマエディターでストアをデザインする
お好みのストアテーマを選択したら、SHOPLINEの組み込みツールを使ってストアをパーソナライズするためにテーマエディターにアクセスできます。このガイドでは、エディターへのアクセス方法、その主要な機能、および詳細設定について説明し、魅力的なオンラインストアを素早く作成する手助けをします。
| ヒント：ストアのデザインに大幅な変更を加える予定がある場合は、まずストアのステータスを閉店に設定することをお勧めします。これにより作業中はストアフロントが顧客から隠され、未完成または作業途中のレイアウトが見られることを防げます。手順については、「ストアのステータスを開店または閉店に設定する」セクションを「ストアのステータスの理解」ガイドでご覧ください。 |
テーマエディターへのアクセス
ストアのテーマを選択した後、以下の手順でテーマエディターにアクセスし、カスタマイズを開始します：
-
SHOPLINE管理画面から、オンラインストア > デザインに移動します。
-
マイテーマタブに移動し、現在のテーマセクションを見つけて、デザインをクリックします。
-
テーマエディター内でテーマのカスタマイズを開始します。
テーマエディターの機能紹介
デザインボタンを現在のテーマでクリックすると、SHOPLINEテーマエディターに入ります。ここでは利用可能な主要なツールの概要を紹介します：
ページセレクターとプレビュー操作
ページセレクターとプレビューツールを使って、レイアウトを素早く切り替え、変更内容が公開前にどのように見えるかを確認できます。
-
ページセレクター: 個別のレイアウトをカスタマイズするために、異なるページ（例：トップページ、商品ページ）間を移動します。
-
プレビューボタン: 右上にあるプレビューをクリックして、以下から選択します：
- エディター内プレビュー: 現在のエディターウィンドウ内で変更を確認します。
- オンラインストアを表示: 新しいウィンドウで公開されたストアフロントを開きます。
パーツサイドバー（左サイドバー）
パーツサイドバーを使って、ページのパーツを追加、並べ替え、カスタマイズし、サイトのビジュアル構造を管理します。
-
パーツを追加: パーツを追加をクリックして、新しいページモジュールを挿入および設定し、さらにカスタマイズします。
-
ドラッグ＆ドロップ: セクションやブロックを簡単に移動して、ページ構造を並べ替えます。
テーマ設定
ブランドの一貫性を保つために、ストア全体のグローバルスタイルを設定します。ブランド（ロゴとファビコン）、タイポグラフィ、カラー、ボタン、カード、メディアコンテナなどのレイアウト要素をカスタマイズして、統一感のあるアイデンティティを確立できます。
デバイスプレビューオプション
あらゆる画面サイズでストアがプロフェッショナルに見えるよう、複数のプレビューメソッドを用意しています：
-
アイコン切替: ページセレクターの隣にあるPC版またはモバイルアイコンをクリックして、ビューを素早く切り替えます。
-
プレビューデバイス選択: エディターの下部にあるプレビューデバイスをクリックして、人気のスマートフォンやタブレットモデルから選択します。
-
モバイルQRコード: QRコードアイコンにカーソルを合わせて、スマートフォンでスキャンし、テーマを直接ご自身のデバイスでプレビューします。
クイック編集の元に戻す・やり直し
ストアをカスタマイズする際、レイアウトや設定の最近の変更を簡単に元に戻したりやり直したりできます。これにより、異なるデザインを安心して試し、保存済みの作業に影響を与えることなく、以前の編集をすばやく復元したり変更を再適用したりできます。
ストアのデフォルトテキストのカスタマイズ
各テーマには組み込みのデフォルトテキストが含まれていますが、テーマのコンテンツを編集する機能を使ってカスタマイズできます。これにより、ストア全体のシステム文言をブランドの声により合うようにパーソナライズできます。以下は、始めるための2つの一般的な使用例です。
| 注：すべてのテーマ管理機能の概要については、記事「SHOPLINEテーマの紹介」をご参照ください。 |
使用例1：著作権テキストのカスタマイズ
標準のシステム著作権表示を変更して、ブランド名や特定のメッセージを含めることができます。例えば、「© 2026 Your Brand Name」を「Copyright © 2026 Your Brand Name. All rights reserved.」に変更することが可能です。
設定方法：
- テーマエディターで、三点リーダーアイコン [...]をクリックし、テーマのコンテンツを編集するを選択します。
-
検索バーを使って特定のメッセージ（例：Copyright）を探します。
-
フィールドにカスタムテキストを入力し、更新をクリックします。
使用例2：多言語最適化
ストアが複数言語に対応している場合、言語タブを切り替えて、各デフォルトラベルが異なるマーケット向けに自然かつ正確に翻訳されているか確認できます。
設定方法：
- テーマエディターで、三点リーダーアイコン [...]をクリックし、テーマのコンテンツを編集するを選択します。
-
編集画面の上部で、切り替えをクリックして最適化したい言語タブを選択します。変更を保存するには完了をクリックします。
-
調整したいフレーズ（例：エラー404メッセージ）を検索し、ローカライズされたテキストを入力して、更新をクリックします。
|
注意事項：
|
テーマコードのカスタマイズとダウンロード
技術的な知識をお持ちのユーザー向けに、SHOPLINE はテーマ構造に対するより深い制御を提供しています。これらの高度なオプションには、三点リーダーアイコン [...]をクリックしてアクセスできます。
コードの編集
この機能を使って、テーマのソースファイル（HTML、CSS、JSON）を編集し、高度なカスタマイズを行います：
- SHOPLINE管理画面のオンラインストア > テーマに移動します。
- 現在のテーマを見つけ、テーマカードの三点リーダーアイコン […]をクリックし、コードを編集を選択します。
-
コードエディタで、左のサイドバーから編集したいファイルを選択します（例：レイアウト、テンプレート、セクション、スニペット、アセット、設定、または ロケールの下）。
| 警告：コードを変更するとテーマはカスタムテーマに変わります。カスタムテーマはSHOPLINEからの自動システムアップデートを受け取ることができません。 |
テーマコードのダウンロード
この機能を使って、テーマのソースコードのZIPファイルをローカルにバックアップとしてダウンロードできます：
- SHOPLINE管理画面のオンラインストア > テーマに移動します。
- 現在のテーマを見つけ、テーマカードの三点リーダーアイコン […]をクリックし、コードをダウンロードを選択します。
- ポップアップウィンドウで、メールを送信をクリックしてダウンロードリクエストを確認します。ダウンロードリンクは管理アカウントに紐づくメールアドレスに送信されます。
|
注意事項：
|
テーマエディターに関するよくある質問
Q1: なぜテーマエディターの表示がおかしいのか、またどうすれば直せますか？
テーマエディターの表示が正しくない、または予期しない動作をする場合（例えば、変更が反映されない、ツールバーが固まる、パーツが読み込まれないなど）、ブラウザのキャッシュが原因の可能性があります。トラブル解決の手順として、シークレットウィンドウでテーマエディターを開き、問題が解決するか確認してください。以下の手順に従ってください：
-
ブラウザの右上にある三点メニューをクリックし、新しいシークレットウィンドウを選択します。
-
シークレットウィンドウで、サードパーティのCookieをブロックの設定を見つけてオフにします。
- ストア管理画面にログインし、テーマエディターを開いて問題が解決しているか確認してください。
| 注：問題が解決しない場合は、SHOPLINEサポートに連絡する前に、ブラウザのキャッシュをクリアするか、別のサポートされているブラウザを使用してみてください。 |
Q2: テーマエディターでストアをプレビューすると、なぜストアのパスワードページにリダイレクトされるのですか？
これは通常、パスワード保護を有効にしている場合に発生し、ブラウザがサードパーティのクッキーをブロックしているためです。その結果、テーマエディターはクロスドメインのクッキー検証を完了できず、パスワードページを自動的にスキップできません。
この問題は一部のChromeブラウザ環境でのみ発生します。お客様のストアへのアクセスや他のブラウザでのストアプレビューには影響しません。
この問題が発生した場合は、Google Chromeで以下の手順を実行してください：
- 「設定」>「プライバシーとセキュリティ」>「サードパーティのクッキー」を開きます。
- 「サードパーティのクッキーを許可する」をオンにします。
- 以下を含むストアのドメインを許可サイトリストに追加します。
- カスタムドメイン
- myshopline.comドメイン
設定を更新した後、テーマエディターを再度開き、ストアをプレビューしてください。プレビューは通常通りパスワードページをバイパスするはずです。
この記事はAIを使用して翻訳されており、不正確な部分が含まれている可能性があります。最も正確な情報については、元の英語版をご参照ください。