グローバルスタイルを使用して、すべてのPageFlyページで使用するスタイルをカスタマイズする方法

Global Styles 機能について

概要: PageFly の Global Styles 機能は、ストア全体で要素に対して事前に定義されたスタイルを使用するのに役立つように設計されています。これらの事前定義されたスタイルは、ストアのデザインとブランドガイドラインに基づいてカスタマイズできます。

この機能を使用すると、オンラインストア全体で一貫性があり、かつ迅速にページを作成できます。Global Styles で設定されたすべての値は、エディターページの Computed 値になります。

詳細については、以下のビデオチュートリアルをご確認ください。

Global Styles 機能へのアクセス方法

PageFly ダッシュボードから

Step 1: PageFly アプリ内で、ナビゲーションバーの左下にある「Extra functions」を選択します。
Step 2: 「Extra functions」で、「Global Styles」をクリックします。

PageFly エディターから

Step 1: Global Styles がサポートする要素（Heading、body text、button、image、icon、divider）をクリックし、[Styling] タブに移動します。

Step 2: Global Style パラメーターの下にある「Edit Global Styles」をクリックします。

Global Styles の設定方法

Global Styles の設定には、主に 2 つのパートがあります。

Properties: Color scheme および Typography。
Elements: Containers、Heading、Body text、Icon、Media、Button、Divider、および Fields。

これらの要素のスタイリングの名前を変更できます。この名前は、エディターページで Global Styles のスタイリングを選択する際のドロップダウンメニューに表示されます。

Properties

| Color Scheme | カラースキームは、セクションのテキスト、背景、ボタン、境界線などの調和の取れた色のコレクションです。これらのカラースキームをストアのさまざまなセクションに適用して、まとまりのある視覚的に魅力的な外観を実現します。Global Styles の Color Scheme 設定では、要素に対して事前に定義された 6 つのスキームカラーをカスタマイズできます。

Note: 各テーマには異なるテーマフォント設定があるため、テーマを切り替える前に Shopify テーマフォントを選択した場合、新しいテーマの Shopify テーマフォントが自動的に適用されます。

すべての設定が完了したら、「Publish」を選択します。 |

Elements

Containers

Global Style のコンテナには、6 つの事前定義されたスタイルがあります。各コンテナのスタイルを設定できます。

各コンテナを選択して、右側のスタイリングタブでそのスタイルを更新できます。

Note:

Containers は Gen 2 Layout の Flex Section にのみ適用されます。
「Set as default」を選択すると、このスタイルが将来のすべてのコンテナに適用されます。

その後、エディターでデフォルトのコンテナとして使用できます。

Heading

Global Styles セクションには、6 つの事前定義されたスタイルがあります。これらの 6 つの各スタイルについて、6 つの異なる見出しレベル（Heading 1 (H1) から Heading 6 (H6) まで）の書式設定をカスタマイズできます。これにより、特定の事前定義されたスタイル内で、各見出しレベル（H1、H2、H3、H4、H5、H6）に対して個別に希望のフォント、サイズ、色、その他の属性を設定できます。

Global heading styles は、以下の要素に適用されます。

Heading
Blog post title
Collection title
Product title

各見出しレベルのスタイリングをカスタマイズするには、以下の手順に従います。

Step 1: 事前定義されたスタイルのいずれかを選択します。
Step 2: 設定したい特定の見出しレベル（例: Heading 1, Heading 2 など）を選択します。
Step 3: [Styling] タブに移動し、選択したスタイル内のその特定の見出しレベルに必要な書式設定の変更を行います。

必要に応じて、各見出しレベルとスタイルに対してこのプロセスを繰り返し、希望の視覚設定を実現します。

Note: [Set as default] をチェックすると、このスタイルが将来のすべての見出しに適用されます。

すべての設定が完了したら、「Publish」を選択します。

Body Text

Global body text styles は、以下の要素に適用されます。

Blog post content
Blog post excerpt
Blog post meta
Countdown number
Countdown label
Field inputs
List item
Paragraph
Product price
Product vendor

Global Styles Body Text 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。

各本文テキスト要素のスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。

Note: [Set as default] をチェックすると、このスタイルが将来のすべての本文テキストに適用されます。

すべての設定が完了したら、「Publish」を選択します。

Button

Global Styles Button 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。

各ボタンのスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。

Note: [Set as default] をチェックすると、このスタイルが将来のすべてのボタンに適用されます。

すべての設定が完了したら、「Publish」を選択します。

Media

Global media styles は、以下の要素に適用されます。

Blog post image
Collection image
HTML video
Image
Soundcloud
QR code
Vimeo video
YouTube video

Global Styles Image 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。

各画像のスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。

Note: [Set as default] をチェックすると、このスタイルが将来のすべてのメディアに適用されます。

すべての設定が完了したら、「Publish」を選択します。

Icon

Global Styles Icon 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。

各アイコンのスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。

Note: [Set as default] をチェックすると、このスタイルが将来のすべてのアイコンに適用されます。

Divider

Global Styles Divider 設定では、3 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。

各区切り線のスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。

Note: [Set as default] をチェックすると、このスタイルが将来のすべての区切り線に適用されます。

すべての設定が完了したら、「Publish」を選択します。

Fields

Global Style fields では、6 つの事前定義されたスタイルがあり、そのスタイルを更新できます。

Global field styles は、以下の要素の field inputs に適用されます。

Contact form field
Customer form field
MailChimp form field
Blog post comment
Search form field

以下のタイプの field inputs にはスタイルが適用されないことに注意してください。

Checkbox
Dropdown
Single choice

他の Global Styles 要素と同様に、各フィールドを選択して、右側のスタイリングタブでそのスタイルを更新できます。

Note: [Set as default] をチェックすると、このスタイルが将来のすべてのフィールドに適用されます。

Common Cases

Typography で設定したスタイリングとフォントファミリーを Page エディターで使用する

Typography でのスタイリング設定が完了したら、以下の手順に従って PageFly エディターでこれらのフォントを使用してください。

1. Global Styles で Heading/Body Text/Button に Typography スタイルを適用します。

Heading、Body Text、または Button に移動し、右側の設定タブで、Typography スタイルの中から、上記の Typography 部分で設定したスタイルのいずれかを選択します。

2. PageFly エディターでスタイルを選択します。

PageFly エディターで、Typography スタイルを適用したいテキスト要素をクリックし、[Styling] タブに移動します。Global Style パラメーターで、適用したいスタイルを選択します。

セクションの Color Scheme を選択する

スキームの色の設定が完了したら、PageFly エディターページに移動します。エディターページで、スキームを選択したいセクションをクリックし、[Styling] タブに移動します。Color Scheme の下で、このセクションに適用したいスキームを選択します。

エディターページの要素に Global Styles の事前定義設定を使用する

Global Styles で要素のスタイル設定が完了したら、PageFly エディターページに移動します。エディターで、スタイルを適用したい要素をクリックし、[Styling] タブに移動し、Global Style の下で、適用したいスタイルを選択します。

Color Scheme で要素をプレビューする

すべての要素には、右上に「Preview color scheme」ドロップダウンがあります。このドロップダウンを使用すると、Color Schemes タブで作成したさまざまなカラースキームで要素がどのように表示されるかを確認できます。このプレビューを使用すると、さまざまなカラースキームで要素のスタイルをより簡単に調整できます。

Note: 要素に Global Style を適用し、その後、元々その Global Style で設定されていたパラメーターのいずれかを変更すると、変更したスタイリングがそれらの特定のパラメーターに対して Global Style の設定を上書きします。ただし、変更していないその他のパラメーターは、適用された Global Style からスタイリングを継承します。Global Style で定義されたパラメーターを編集すると、そのパラメーターの横に黄色の点が表示され、元の Global Style 設定から変更されたことを示します。

Version Updates

バージョン 4.18.0 以降

Flex Section 要素に適用される新しい Containers 要素
Checkbox および Radio タイプを除く Contact Form および Customer Form の Form Field に適用される新しい Fields 要素
要素に Background gradient color を適用
要素の Preset options を削除
Global Styles に Shopify theme fonts が追加

バージョン 4.11.0 以降

バージョン 4.11.0 では、Properties 要素が Color and Font Family システムから Color Scheme and Typography システムに変更されました。

バージョン 4.11.0 より前

バージョン 4.11.0 がリリースされる前に Color and Font Family Global Styles を使用していた場合、古い Global Styles システムは編集できなくなります。これらの色やフォントファミリーを使用している要素は影響を受けませんが、より良いグローバル編集体験のために、新しい Color Scheme and Typography システムを使用することを強くお勧めします。