サイト スタイルのパネルを開くには、ページ編集中に右上のペイントブラシのアイコンをクリックします。

そこから、 [フォント] や [色] など、変更したいサイト エレメントをクリックします。各パネルのより詳細な手順については、このガイドを参照してください。

サイト スタイルを閉じるには、ページ プレビューをダブルクリックするか、ペイントブラシのアイコンをクリックするか、パネルの上部にある [閉じる] をクリックします。スタイルの変更は、保存するか元へ戻すまでそのまま残ります。

サイト スタイルを閉じた状態で、特定のセクションを編集することで、より細かい変更を加えることができます。セクションのスタイルを設定するには、セクションの上にカーソルを置き、[セクションを編集] または鉛筆アイコンをクリックします。セクション スタイルはサイト全体のスタイルを上書きします。

ここでは、自動レイアウト、コレクション、ギャラリー セクションの様々なレイアウトを選択することもできます。コレクション セクションにスタイルを変更すると、そのタイプのすべてのレイアウトに影響します。たとえば、2つのブログ セクションがあり、どちらも石積みレイアウトを使用している場合、1つのセクションに加えたスタイルの変更は両方のセクションに影響します。

サイト スタイルを開くには、次の手順に従ってください。

1. [ページパネル] を開きます。
2. スタイルを設定したいページをクリックします。フッターなどのサイト全体の機能を使用するには、任意のページを開きます。コレクション アイテムの場合は、そのタイプのコレクション アイテム(ブログ投稿や製品アイテムなど)を開きます。
3. [ページ] パネルの左上にある [Webサイト] をクリックし、[デザイン] > [サイト スタイル] の順にクリックします。
4. サイト スタイルのパネルで、任意の微調整オプションをクリックして変更を加えます。

サイト スタイルが開いていると、サイトの編集は無効になります。コンテンツを追加または削除するには、サイト スタイルを閉じて、[ページ] パネルを開きます。

サイト スタイルには、現在閲覧しているページのオプションが表示されます。これらの微調整オプションに対する変更は、サイト全体の同じタイプのすべてのページに適用されます。たとえば、ストア ページのスタイルを変更すると、サイト上のすべてのストア ページに同じ変更が適用されます。

ヒント: それぞれのカバー ページは別々にスタイル設定されます。

プレビュー パネルでページのエリアをクリックすると、そのエリアで使用できるスタイル微調整オプションが表示され、それ以外は非表示になります。クリックしたエレメントの周囲にスタイル強調ボックスが表示されます。[すべて表示] をクリックして、すべてのオプションに戻ります。このショートカットは、サイトのほとんどのテンプレートとほとんどのエリアで使用できます。

たとえば、Brine テンプレートでは次のようになります。

一部の微調整オプションについては、プレビュー内でクリック & ドラッグして設定を調整できます。

アプリでのスタイルの変更の動作は、サイトのバージョンによって異なります。

アプリのバージョン7.1のスタイル

サイト スタイルを使用すると、フォント、色、スペース設定の変更など、大規模なスタイルの変更をワン タップでサイトに適用できます。通常、サイト スタイルで行う変更はサイト全体に適用されますが、特定のセクションやテキスト エリアにスタイルを設定することで、より細かい変更を加えることができます。

スタイルを変更するには、次の手順に従ってください。

1. サイトの任意のページをタップし、[プレビュー] をタップします。
2. 左上隅の [編集] をタップします。
3. ペイントブラシ アイコンをタップして、サイト スタイルを開きます。
4. [フォント] や [色] など、スタイルを設定したいサイト エリアをタップします。
5. パネルのオプションを使用して、そのエリアをカスタマイズします。
   • [フォント] で、[サンセリフ] 、[セリフ] 、または [混合] をタップして、各タイプのフォント パックを確認します。ベース サイズを変更するには、フォント名をタップします。
   • [色] で、各カラー テーマごとにアクセントになる色、明るい色、暗い色を選択します。

ヒント: [設定] タブからサイト スタイルを開くこともできます。

セクションのスタイルを設定するには、次の手順に従ってください。

1. 編集するページをタップし、[プレビュー] をタップします。
2. [編集] をタップし、スタイルを設定するセクションをタップします。
3. セクション ツールバーの鉛筆アイコンをタップします。
4. [フォーマット] 、[背景] 、または [色] をタップして、新しいスタイルを選択します。
5. [完了] をタップし、[変更を保存] をタップします。

アプリのバージョン 7.0 のスタイル

サイト スタイルでスタイルを変更する。

1. [その他] をタップし、[ページ] をタップしてから、変更を適用するページをタップします。これにより、編集中のページに関連するオプションを表示し、変更のプレビューを表示するようにサイト スタイルに指示します。ナビゲーション メニューやフッターなどのサイト全体の機能を変更する場合は、任意のページを開きます。
2. [...] をタップし、[サイト スタイル] をタップします。
3. サイト スタイルのパネルが開き、スタイル微調整オプションのリストが表示されます。任意の微調整オプションをタップして変更を加えます。

フォントを変更するには、サイト スタイルを開き、[フォント] をクリックします。

[フォント] パネルでは、サイト上のすべてのテキストに適用するフォント パックを選択したり、特定の種類のテキストのフォントを変更したりできます。詳細については、 フォントを変更するを参照してください。

任意のテキスト エリアで、テキストの書式を見出し、段落、または等幅テキストに変更したり、リンクを追加したりすることができます。

• ハイパーリンクには常に下線が表示されます。
• 訪問者がリンクをクリックすると、その周囲に点線が表示されるので、すべての訪問者がサイトにアクセスしやすくなります。

フォントやサイズを変更するには、サイト スタイルの [タイポグラフィー] または [フォント] の微調整オプションを使用します。詳細については、 フォントを変更するを参照してください。

サイトの色を変更するには、サイト スタイルを開き、[色] をクリックします。

厳選されたカラー パレットを使用すれば、サイトのすべての色を同時に変更したり、サイトのエレメントごとに色をカスタマイズしたりできます。サイトとセクションの色の変更の詳細については、 色を変更するを参照してください。アクセシビリティに関するベスト プラクティスを確認するには、アクセスしやすいサイト コンテンツを作成するを参照してください。

色を変更するには、ラベルの横にある色付きの円で、サイト スタイルの微調整オプションを選択します。詳細については、色を変更するを参照してください。アクセシビリティに関するベスト プラクティスを確認するには、アクセスしやすいサイト コンテンツを作成するを参照してください。

サイトのヘッダーを編集するには、サイト プレビューの左上にある [編集] をクリックし、ヘッダーにカーソルを合わせて [サイト ヘッダーの編集] をクリックします。エディターのオプションを使用して、サイトのタイトルやロゴ、ナビゲーション リンクをカスタマイズします。ショッピング カートのアイコン、ソーシャル アイコン、コール トゥ アクションのボタンを追加することもできます。

より詳細な手順については、サイト ヘッダーを構築するを参照してください。

サイトのヘッダー スタイルはテンプレートに依存します。具体的なヘッダー設定については、テンプレートのガイドを参照してください。

テンプレートによっては、ヘッダーに特別な機能があります。利用可能な機能のリストについては、 サイト ヘッダーを構築するを参照してください。

フッターのスタイルを設定するには、次の手順に従ってください。

1. 左上にある [編集] をクリックします。
2. フッターにカーソルを合わせ、[フッターの編集] をクリックします。
3. スタイルを変更するには、[セクションを編集] または鉛筆アイコンをクリックします。

詳細については、 フッターを編集するを参照してください。

サイトのフッター スタイルはテンプレートに依存します。具体的なフッター設定については、テンプレートのガイドを参照してください。

テンプレートごとのフッター オプションの詳細については、フッターを編集するを参照してください。

サイトのスペース設定を変更するには、サイト スタイルを開き、[スペース設定] をクリックします。

次の微調整オプションを使用すると、サイトのすべてのページのスペース設定が変更されます。

• ページ幅 (最大) - サイトのページの最大幅を変更します。実際の幅は、ブラウザーやデバイスによって異なります。この微調整は、サイトのヘッダーのスペース設定には影響しません。
• サイトの余白 - サイトの両側の余白の幅を変更します。ページ幅の設定によっては、この微調整がページのコンテンツに目に見える影響を与えない場合があります。この微調整は、ヘッダーを含むサイト全体に影響します。ギャラリー セクションでは、余白の幅に応じて上部と下部のパディングも変化します。

セクション エディターで個々のセクションのスペース設定を変更できます。

パディング、スペース設定、幅、境界線など、サイズに関連する多くのスタイル微調整オプションは、[サイズと値] の見出しの下にあります。テンプレートによっては、他のセクションに含めることもできます。

サイズを変更するには、サイズ微調整オプションにカーソルを合わせ、スライダーを使用するか、フィールドに数値を入力します。

ページ上部に背景画像付きのブロック セクションを追加することで、任意のページにバナー画像を作成できます。

• バナーに画像だけを使用したい場合は、空白のセクションから開始します。
• セクションに追加されたブロックはバナーにオーバーレイされます。
• 高さを変更するには、[セクションを編集]、または鉛筆アイコンをクリックしてセクションの高さを設定します。
• 背景画像を選択するときは、画像の書式設定のヒントに従ってください。

詳細については、バナー画像を追加するを参照してください。

ほとんどのテンプレートはページ バナーをサポートしており、ページの設定で追加できます。

• テンプレート ファミリーごとのすべてのバナー オプションを確認するには、バナー画像を追加するを参照してください。
• サイト固有のバナー設定については、テンプレートのガイドを参照してください。

背景を変更するには。

• [色] パネルを使用して、サイトの背景を変更します。
• セクション エディターを使って、個々のセクションの背景色を変更したり、背景画像や動画を追加したりすることができます。これにはフッター セクションも含まれます。
• セクションの背景画像が [はめ込み] に設定されている場合、はめ込み枠の色を設定できます。
• ヘッダーは、透明な場合はトップ セクションと同じ背景色になります。ヘッダー エディターで透明度をオフにすると、ヘッダーのカラー テーマを変更できます。

サイト スタイルでメイン コンテンツ エリアの背景色を設定できます。テンプレートによっては、ヘッダーやフッター、コンテンツ周囲のスペースに背景色を追加するオプションもあります。詳細については、色を変更するを参照してください。

テンプレートによっては、サイト スタイルでサイト全体またはページの背景画像を追加できます。背景画像を追加するには、背景画像の微調整オプション、またはサイト スタイル内の対応する画像アイコンをクリックします。独自の画像をアップロードすることも、ストック画像を検索して追加することもできます。詳細については、バージョン 7.0 でバナー画像を追加するを参照してください。

メインのストア ページをスタイル設定するには、ストア セクションのスタイルを開きます。セクションの形式、背景、色を変更するオプションを確認できます。

商品をスタイル設定するには、商品詳細ページのサイト スタイルを開きます。これらの設定は、個々の商品詳細ページに影響します。これらのオプションの中には、複数の画像がある商品にのみ適用されるものもあるため、商品に画像が 1 枚しかない場合、一部の変更が表示されないことがあります。

詳細については、ストア ページのスタイル設定を参照してください。

商品のスタイル オプションは、サイトのテンプレートや、テンプレートがクラシック、アドバンス、またはユニークのストア ページを使用しているかどうかによって異なります。

商品のスタイル オプションの詳細なリストについては、ストア ページのスタイル設定を参照してください。

ブロックやセクションを削除するか、ヘッダーとフッターを非表示にすることで、ソーシャル アイコン、バナー、フッターなどの特定のデザイン機能を非表示にすることができます。セクション エディターを開いて、ページのそのセクションのさまざまなオプションを検索します。

テンプレートによっては、ページ タイトル、ソーシャル アイコン、境界線、バナー、フッターなどのデザイン機能を非表示にすることができます。これらの微調整オプションは通常、サイト スタイルの [オプション] セクションにあります。