グローバルスタイルを使用して、すべての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 つのスキームカラーをカスタマイズできます。
色をカスタマイズするには、各タイプを選択し、右側にある各要素に設定したい色を選択してください。以下の設定が可能です。- Background - Background gradient - Text - Button background - Button background gradient - Button text - Border - Shadow - 3 user-define colors:
すべての設定が完了したら、「Publish」を選択します。
| 
|
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Typography | Global Styles > Typography 設定では、事前に定義された 6 つのフォントとスタイル（色を除く）をカスタマイズし、後でこれらの事前定義された設定をページの作成時に使用できます。フォントファミリーをカスタマイズするには、各タイプを選択し、Styling タブに移動し、必要なフォントファミリーやその他のスタイル設定を選択してください。 |
Shopify テーマフォント、Google Fonts、またはアップロード済みフォントからフォントファミリーを選択できます。
|
すべての設定が完了したら、「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] をチェックすると、このスタイルが将来のすべての見出しに適用されます。
Styling tab の詳細については、こちらをご確認ください。
すべての設定が完了したら、「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] タブに移動して、必要な設定を行ってください。
Styling tab の詳細については、こちらをご確認ください。
Note: [Set as default] をチェックすると、このスタイルが将来のすべての本文テキストに適用されます。
すべての設定が完了したら、「Publish」を選択します。
Button
Global Styles Button 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。
各ボタンのスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。
Styling tab の詳細については、こちらをご確認ください。
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] タブに移動して、必要な設定を行ってください。
Styling tab の詳細については、こちらをご確認ください。
Note: [Set as default] をチェックすると、このスタイルが将来のすべてのメディアに適用されます。
すべての設定が完了したら、「Publish」を選択します。
Icon
Global Styles Icon 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。
各アイコンのスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。
Note: [Set as default] をチェックすると、このスタイルが将来のすべてのアイコンに適用されます。
Divider
Global Styles Divider 設定では、3 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。
各区切り線のスタイリングをカスタマイズするには、各タイプを選択し、[Styling] タブに移動して、必要な設定を行ってください。
Styling tab の詳細については、こちらをご確認ください。
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 タブで作成したさまざまなカラースキームで要素がどのように表示されるかを確認できます。このプレビューを使用すると、さまざまなカラースキームで要素のスタイルをより簡単に調整できます。
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 システムを使用することを強くお勧めします。
Frequently Asked Questions
1. フォントをアップロードしてグローバルスタイルに適用できますか？
はい、できます。ただし、アップロードされたフォントは Global Styles でのみ使用できることに注意してください。カスタムフォントを使用するには、エディターの要素に Global Styles を適用できます。
2. Body text styles と一緒に使用できる要素は何ですか？
以下の要素は Body Text Styles を使用してスタイル設定できます。
Blog post content
Blog post excerpt
Blog post meta
Contact form field
Countdown timer
Customer form field
List items
Paragraphs
Product price
Product variant option value
Product variant option name
3. Global Style 機能を使用してグラデーションカラーオーバーレイを追加できますか？
いいえ、Global Style Container で背景グラデーションカラーオーバーレイを設定して、異なる背景画像全体に適用することはできません。
Additional Resources
Last updated
Was this helpful?