# グローバルスタイルを使用して、すべてのPageFlyページで使用するスタイルをカスタマイズする方法 ### Global Styles 機能について 概要: PageFly の Global Styles 機能は、ストア全体で要素に対して事前に定義されたスタイルを使用するのに役立つように設計されています。これらの事前定義されたスタイルは、ストアのデザインとブランドガイドラインに基づいてカスタマイズできます。 この機能を使用すると、オンラインストア全体で一貫性があり、かつ迅速にページを作成できます。Global Styles で設定されたすべての値は、エディターページの Computed 値になります。 詳細については、以下のビデオチュートリアルをご確認ください。 {% embed url="" %} ### Global Styles 機能へのアクセス方法 #### PageFly ダッシュボードから * Step 1: PageFly アプリ内で、ナビゲーションバーの左下にある「**Extra functions**」を選択します。 * Step 2: 「**Extra functions**」で、「**Global Styles**」をクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-159e49d1970620f39ba1c7b9fc713e338ff7e533%2FAD_4nXfATRDFuG2TXV2JwbdeqykHNjeDxqKyGRWfcwY-i9JXEnB00Nu4GqF8w3MPYHSzm0LYUYQWvFXoh6LJjqV-c5tLYVs1DOb58vSOd5myzWfZWcQAt812LUvoABcCx330xJUmI3p453-eNo7rQK-R?alt=media) #### PageFly エディターから Step 1: Global Styles がサポートする要素（Heading、body text、button、image、icon、divider）をクリックし、\[Styling] タブに移動します。 Step 2: Global Style パラメーターの下にある「**Edit Global Styles**」をクリックします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f2cbc71bda714633c4d31dc46d04f2eacb770ecb%2FAD_4nXfs31_WDnaWUhttUk68OCFkkRQHETM1SOn3LbSPGMSIPbXtrd85BeRIkMD7A9A-x_QDvpiEKt56JAR-MAghDFlsqn5wRXEHpWQ4vtYCryYU4ZekLbJA-i72MixsvNlStQNBu0dCnHM9DqgpImB4AQkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) ### Global Styles の設定方法 Global Styles の設定には、主に 2 つのパートがあります。 * **Properties**: Color scheme および Typography。 * **Elements**: Containers、Heading、Body text、Icon、Media、Button、Divider、および Fields。 これらの要素のスタイリングの名前を変更できます。この名前は、エディターページで Global Styles のスタイリングを選択する際のドロップダウンメニューに表示されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXe_d-4RrSquv3R4kKemvZ3S7q-erXedmP36CkLrJOd6j8NgfSuNmuKYTkEU2y90upVCaBvH9ualHLCsPguaBd6wiQykqxT3XSCMyUTOZcZbwV0eikUClOixaFDd9cQeBKge-r8_oMArhvuimy_jkey00_8oZ2oDSnupySA6NKmeg.png) #### Properties \| Color Scheme | カラースキームは、セクションのテキスト、背景、ボタン、境界線などの調和の取れた色のコレクションです。これらのカラースキームをストアのさまざまなセクションに適用して、まとまりのある視覚的に魅力的な外観を実現します。Global Styles の Color Scheme 設定では、要素に対して事前に定義された 6 つのスキームカラーをカスタマイズできます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-93d9b0dbd845cc968058b4dd534ea83227e54374%2FAD_4nXdl2j_ROfmDJqkYEMF_DvCZQzN2qQX4o8Ht1Kqxqmnqo88lW9V1Q-JzH4h2FSefSF6P1CIcbrvQiMelyujZJROUaebVNcsFhHsCi2ZnxK-HpFhyy034WXV5_XBFNHbrc5UgTNDFWNqEpzs957rrRAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 色をカスタマイズするには、各タイプを選択し、右側にある各要素に設定したい色を選択してください。以下の設定が可能です。- Background - Background gradient - Text - Button background - Button background gradient - Button text - Border - Shadow - 3 user-define colors: ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfVAznfB-q7G7U5skkKoVaO5ZD2Qw_uJP46Xmm9QA7d5zBg_ni9bxXq-x8L914P1D1oVxRKIUr1euCwiUEybGHQymJxc1r5KD-kLK96oHw06pxLj6p-1BN3Bzkki3WUyJe-W7LxNPWzOX8AZOj4Akey00_8oZ2oDSnupySA6NKmeg.png) すべての設定が完了したら、「**Publish**」を選択します。 \| ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-fb7ef47bb16107fbd23810381682e1aff8790a88%2FAD_4nXdoaYo5ruk9fY6LrTPHf2ZA0NHLwe5sRQrII3G1blXIdApggUOqAeT7Pp2CZ-00tbwSq-vNgfzdcjoElhqDtVQdMXoxowdyRxYXBc7wTlPdjAqaBIPBY6kf-pNXBgK52DfTHHW4SPViJCyvR_j_tgkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) |\ \| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\ \| Typography | Global Styles > Typography 設定では、事前に定義された 6 つのフォントとスタイル（色を除く）をカスタマイズし、後でこれらの事前定義された設定をページの作成時に使用できます。フォントファミリーをカスタマイズするには、各タイプを選択し、Styling タブに移動し、必要なフォントファミリーやその他のスタイル設定を選択してください。 | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfERhEmDTZtSNwJ90u_smHye1FktMg3Fz5rjIgFqVN_GIm2deKZVBtj4AhWnX0k0sLzZsHYUNlIFEWdr2Nj__hl3cWrz_zQtX-v_-NlUtBVuGVrb2Ics0Jenrv2HgopLGNYsOducDB55cbaSrpokey00_8oZ2oDSnupySA6NKmeg.png) ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfERhEmDTZtSNwJ90u_smHye1FktMg3FqVN_GIm2deKZVBtj4AhWnX0k0sLzZsHYUNlIFEWdr2Nj__hl3cWrz_zQtX-v_-NlUtBVuGVrb2Ics0Jenrv2HgopLGNYsOducDB55cbaSrpo) Shopify テーマフォント、Google Fonts、またはアップロード済みフォントからフォントファミリーを選択できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXfNaYiKOBz8hJXbpk1x76kD5Y-UVUffrQe0GgyQu_3jjKS4UYmp4aXfeogpGEoZ_2eLZW_6kBIpylCIL8zgV360EhBy-rmRPgAqVMTmI7B1ZXz5WtqkH_iGUDrvWVVLgYrOqIkS) | {% hint style="info" %} **Note**: 各テーマには異なるテーマフォント設定があるため、テーマを切り替える前に Shopify テーマフォントを選択した場合、新しいテーマの Shopify テーマフォントが自動的に適用されます。 {% endhint %} すべての設定が完了したら、「**Publish**」を選択します。 | #### Elements **Containers** Global Style のコンテナには、6 つの事前定義されたスタイルがあります。各コンテナのスタイルを設定できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3dbe9a4150710becbd86f4b03ac8c47937ba7273%2FAD_4nXehQYuCUOTLyj53-YLtKFllqy1r5nYMwa6eokaCQ_BodHwEaPee0PkK8dRyrYzGFp01_340hpblaQ-yB0MgTzVzlOpOYceJzfB4ZSY9C3sfMriQ3caiHNok88GhcWMfLnY0d5Hc3GaBmgx14BoXkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 各コンテナを選択して、右側のスタイリングタブでそのスタイルを更新できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9cdb0f7633b5a0ae4503c1afb7c8c1e1ace493ee%2FAD_4nXfZBHF-oEV_e6liGnI2GD_pXdDhj1qaTGb8HDmLuycgIkEyo3E42qgv433CJwgp8koqtJyj-coNlntIahHyYhCr-iG1m1yIozZUHB6DyV06CKadCztRnSLR-yEDDWcTDEztyvbCgiWF6ogh35-vagkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) **Note**: * Containers は Gen 2 Layout の Flex Section にのみ適用されます。 * 「**Set as default**」を選択すると、このスタイルが将来のすべてのコンテナに適用されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-127753fa9945b7105362d04c495accbd1afc0df7%2FAD_4nXcp1IowgMDdTIqFrdtvf_wtqSqZvvCCTJb-ZVnHLpSh1Cwat5-zEYpMqf5Am4ex38okNPF_IHiA2m4UMOQYSj96xBBcD3DVUlsisO9d9rDYKWWM9hAg4sp7f_T7a3B0vl1w5R9MmaX_Mi1Abrpvvwkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) その後、エディターでデフォルトのコンテナとして使用できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b5dc06768efbf46260c3e5b4e3ee7daa5400011c%2FAD_4nXeFQWA0-4VLZyWJntbvMyXjv-KCYTX7_cYtPQ6I654ipkhoqQ9RWExxqogaEbYj6JDI3s0vhPLtIcHfSVZDSlv7whnxEAybgx9XtqtIwiOJ-NppW-9hbmMaC3utRKX5ZlcQqbz27TnQtyIayWqg?alt=media) **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 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5dccc053272f2b2181b97232c0edcd29a91f445b%2FAD_4nXdt20KsdsPHtX-AZLfp7c2Pr1EjYfNW1BbTTVkcKgIN1xH62ejLKwtMwDSjo0Y8stzctvrHbhZlYvPo9OyuFqvV-e4VFaNJrjpiCADdCPjSI3cPF2PPWWJDOLItnvfwtvb6QRzfUtsCX4kl5MuA8Akey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 各見出しレベルのスタイリングをカスタマイズするには、以下の手順に従います。 * Step 1: 事前定義されたスタイルのいずれかを選択します。 * Step 2: 設定したい特定の見出しレベル（例: Heading 1, Heading 2 など）を選択します。 * Step 3: \[Styling] タブに移動し、選択したスタイル内のその特定の見出しレベルに必要な書式設定の変更を行います。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3515adc89ee08ca8343486243b9e97e886aa9bd6%2FAD_4nXeAOZCQ6NUavyPq_HP-H2lgY2sOw69YxUJdlDZCbtR8snz3bemBFl4O2aKToFfmIwClKg-UjgSUjqHFKlSREI74FZy31gJwSlw8tJLDd31WkJA2zrxwxIWsl_IGnbpc98Axz1kncHf9ykk1xXy7kAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 必要に応じて、各見出しレベルとスタイルに対してこのプロセスを繰り返し、希望の視覚設定を実現します。 **Note**: \[Set as default] をチェックすると、このスタイルが将来のすべての見出しに適用されます。 [Styling tab](https://help.pagefly.io/manual/elements-style-settings/) の詳細については、こちらをご確認ください。 すべての設定が完了したら、「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 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8aaeae9925237d8040d3f7ced54c6611164b3b1e%2FAD_4nXcD0WNjUPSTh9kHXv9PYu8BFUzCv6oF-7MXE3iKjKMjZTefgr3P12lFp9GuHIBiUAk0UAX98XtPYArFoMykmLAl9r3wlUpU_xNS-t-sZUcEIbED6Q5hW7P1bzN4SgvsxRfJFDUurvJ2Rw4GxIPppQkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 各本文テキスト要素のスタイリングをカスタマイズするには、各タイプを選択し、\[Styling] タブに移動して、必要な設定を行ってください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-9b2039f35c9adb128a5f0188fb4b701609b552ee%2FAD_4nXdFdiuAvQLvNIxZE9bJ3UgRkkKuiUtAxQaJut-8ipDlOLHG7L2D6TzQIbAj-IbY2yDVGUgC4pCkse9DN087G7t2NaT5yuvZx4DaOOX8DclyFP1bc6826qv3fvVzk-TZmXZn6ys1D33Mot47mWo2Bwkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) [Styling tab](https://help.pagefly.io/manual/elements-style-settings/) の詳細については、こちらをご確認ください。 **Note**: \[Set as default] をチェックすると、このスタイルが将来のすべての本文テキストに適用されます。 すべての設定が完了したら、「**Publish**」を選択します。 **Button** Global Styles Button 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-989e8861590fde1e9d14587884333d495a0ee0ce%2FAD_4nXdPbKJCHAO1tY5xin2tHQ2ktKZkSLjKmSwmUuOlq03foDj4HQ_tJ_8tj3aHamt8x0xGp_EI1gMfc3CSYDsKxS6ol25Cyr6OCsRB4-AdybimOt-5BXy-WQZZRFyM4dahsd2vBXN16QtdwJX-Fd0ATQkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 各ボタンのスタイリングをカスタマイズするには、各タイプを選択し、\[Styling] タブに移動して、必要な設定を行ってください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e51685a4c6bd3f054b55a7ffc16383784a4b20ff%2FAD_4nXfPd9F0WtJkIAHvHmp_BnSFUJX80aUIPC3m4xLm_nqc3r7rVnKTc5MufPvf1iTZQHLNzmWCZL9Y8ltdze97PL2CcGRXygQ_yJfTGFDHccPxFvMP3NL3rHhywEIwKh99XcJkkc6h3msTBn6CJ2HHawkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) [Styling tab](https://help.pagefly.io/manual/elements-style-settings/) の詳細については、こちらをご確認ください。 **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 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5b083d328b92e225f995fceb9709f5e8ef21b752%2FAD_4nXeg9IWLF2P4VRm5dcuvoVHx7otLTo7ZtYsI0nX8HfThmMTPJEM4aESloXE0SXhcOQ1bGWNLT1DoWHsR9XvRO9CZ886mD3FZ8yTsm-We27vrKMcN95IQIQ6NFxaLg8R3U9Ai2jVDoqin5cBNNk3YTwkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 各画像のスタイリングをカスタマイズするには、各タイプを選択し、\[Styling] タブに移動して、必要な設定を行ってください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ab673f69d2e1c9c899437572109b9a52a0eb2a97%2FAD_4nXc0PcMKNGBv0NfGIqrAZ7bLyMT1QtsWunzS1WpUPgdNlUpN9NLMedjfRQKWA3EGhX35ox0i-X431Q2OOwb7GFj_Ni3DfthYyC2rpPdcIIapQkxY1nMAYdUqnx3pNKKSmKoaF8mZ0vZpc4cL3M7kagkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) [Styling tab](https://help.pagefly.io/manual/elements-style-settings/) の詳細については、こちらをご確認ください。 **Note**: \[Set as default] をチェックすると、このスタイルが将来のすべてのメディアに適用されます。 すべての設定が完了したら、「**Publish**」を選択します。 **Icon** Global Styles Icon 設定では、6 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-1476e57d11e1b0022cbf4080ec7e21e47bea0891%2FAD_4nXelNb0zpqdptoyon0tVyxQSkn1gzp2J6YQkcPirzVP3tzLQxP5YsafTQScOf4cbmL52ILOQOZJuwdy5zYQVvBR8bL5BZlQaK7QPbavgZk0qLsOq9feq4KcseOgKz4JXED_Xh8JJGTShtpwu-2yGOAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) 各アイコンのスタイリングをカスタマイズするには、各タイプを選択し、\[Styling] タブに移動して、必要な設定を行ってください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-83b24d5689fece787d48b8f79f11725dd55de477%2FAD_4nXesxkLVHizYvOinWDwFmrD8m-5dQMs5zSv_LzS_eSujxitXceNSxZhNHJslfEVQTGAF6C7pVW3xr6Xnh63aQFD32KeBOonwILPdo0A1NsErJCn5NKtDHp6mvRf7NgcOyoJvrg6U5UX_E0aCZa1sFAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) **Note**: \[Set as default] をチェックすると、このスタイルが将来のすべてのアイコンに適用されます。 **Divider** Global Styles Divider 設定では、3 つの事前定義されたスタイルをカスタマイズし、後でこれらのスタイルをページの作成時に使用できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeB3pUA2s9gMOj0_U6Ztbt0otW1-I2C8ohOujq7KqR7l13bk3z0ZwpPhsqHgB6jmkLIBMQOZao9uQjHpn7Av2ksL6ErtSVw9Qft7k7bLsuQSq_VzzIqPnLmacoYLqkg6gzr33tQdjJbXlZkgD9_tQkey00_8oZ2oDSnupySA6NKmeg.png) ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-48cd70bab349d51cdd308a1aacb685626e66959f%2FAD_4nXeB3pUA2s9gMOj0_U6Ztbt0otW1-I2C8ohOujq7KqR7l13bk3z0ZwpPhsqHgB6jmkLIBMQOZao9uQjHpn7Av2ksL6ErtSVw9Qft7k7bLsuQSq_VzzIqPnLmacoYLqkg6gzr33tQdjJbXlZkgD9_tQ?alt=media) 各区切り線のスタイリングをカスタマイズするには、各タイプを選択し、\[Styling] タブに移動して、必要な設定を行ってください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-46dad0f37b64b1f37e386f9f2bd72ad5b1d4cab0%2FAD_4nXchXA4d1I0DSgmdYuSGNTk7OGBmT-nIpuEzYftToHcQvIKW1ccoNC4TF_OqHw-hkw2tkLHdq3nsS73f_AgswmgVs0yYltsoR0Rb-i-dmkeyFiqj-uCUeA9WuRRSzPL_vfMi75-8LF-lSlkKWBjCLwkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) [Styling tab](https://help.pagefly.io/manual/elements-style-settings/) の詳細については、こちらをご確認ください。 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 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-2b45561963c699491b18a786a19285ebc5c56ff5%2FAD_4nXdzEdB_dzr1Tq4dfiP7eQdMsqfDHOjPQptIXYXE3RwFETueqDndbl21x_dhKVzASumzY4ItLYt32hDZYIMsrB8l8M3lA7raP2QaD2dypU9zi88eggi4DV2VWQDB3NW0hpXz-fpyfOk4UC4MB82S9Q?alt=media) 他の Global Styles 要素と同様に、各フィールドを選択して、右側のスタイリングタブでそのスタイルを更新できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-d6c59e1f10c444b122beeef8a9b6e7b2b5c3a1c0%2FAD_4nXfgGZ5Nqd9xPK98y1kvsmkEJ-071UkxGAC4bqrvf5pFjwX3RiS_Vr1pAKDUDfolaVH_upFWQ1rkiuJ4fIyXcONA0FzBCaNJUhkhRLXNVZLuGeg1lVzHmS4A_ShkpG1Yo_8YTxFfNPW-Y5v_Mq4uoQkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) **Note**: \[Set as default] をチェックすると、このスタイルが将来のすべてのフィールドに適用されます。 ### Common Cases #### Typography で設定したスタイリングとフォントファミリーを Page エディターで使用する Typography でのスタイリング設定が完了したら、以下の手順に従って PageFly エディターでこれらのフォントを使用してください。 *1. Global Styles で Heading/Body Text/Button に Typography スタイルを適用します。* Heading、Body Text、または Button に移動し、右側の設定タブで、Typography スタイルの中から、上記の Typography 部分で設定したスタイルのいずれかを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-00ae697cc239aa7bf1f0d63a5cbe1fa27d22d963%2FAD_4nXcOVaj0faDFjEpUDYOcUMlPD3tRHfQDp8hJGA2zcigsJfj2LqU4r0hz12Qu8vpvQEc1OEuiYaDrJkhahWQp17T_Cm30DmQQeo9K2riOweXiEGbfs2210OA8FZd27dJhaCYCZTQEMwhCRq8lqaDhFAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) *2. PageFly エディターでスタイルを選択します。* PageFly エディターで、Typography スタイルを適用したいテキスト要素をクリックし、\[Styling] タブに移動します。Global Style パラメーターで、適用したいスタイルを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a4b53beea04fcc31fe9f0a0a0fceb6ada2dce090%2FAD_4nXcEcdFcM4EpqppxjytjiMvcauIHZOikp-rSxQdZ12AR4i7Da-zcoNFfwnxX3UHpZMIYAB09WWuhD1bzHhmFW0iITs_xlBvKogdsd7TPYN09Y9B9klKr_7cyJpPm7G2V0PM348aB9aT2JstI1lMMrQkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) #### セクションの Color Scheme を選択する スキームの色の設定が完了したら、PageFly エディターページに移動します。エディターページで、スキームを選択したいセクションをクリックし、\[Styling] タブに移動します。Color Scheme の下で、このセクションに適用したいスキームを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b75a97e759e81e23ee8cb2727b92a8805c857fc0%2FAD_4nXfhG5nsbzCHElq2O7ofzD5C49pF1dz0eC-tDK5CpUxJr8PgDsn6wyVe7iTs_z-_-8RNKedMzmqUawVYCy1nyFeyWFuTz2DWFbzY6EuA5_jZ358kEpsO4MfBTe2pqE7k-Uq8SobDWc-pXlK70vhACAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) #### エディターページの要素に Global Styles の事前定義設定を使用する Global Styles で要素のスタイル設定が完了したら、PageFly エディターページに移動します。エディターで、スタイルを適用したい要素をクリックし、\[Styling] タブに移動し、Global Style の下で、適用したいスタイルを選択します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-501be8580b61ff8f16e16c1d2cf0816d6fe91c0c%2FAD_4nXcj-SgSTi9H8KscwKA7X34lzZ4UqjqDNG-swHS-3ErVk7cAEidDamll6ZNWb56y-2wJRLRvDJj09iMEvvuTkU8kMTKWXugeqizAMZ0wGZS2CnF98nnJZ9n8bko_XCeKt5Qy6rXkW3hbaTgbWvGcWgkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) #### Color Scheme で要素をプレビューする すべての要素には、右上に「**Preview color scheme**」ドロップダウンがあります。このドロップダウンを使用すると、Color Schemes タブで作成したさまざまなカラースキームで要素がどのように表示されるかを確認できます。このプレビューを使用すると、さまざまなカラースキームで要素のスタイルをより簡単に調整できます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-7a844bc73d77389de57048c104c33fc012137f50%2FAD_4nXdYGclEs0eBT4pwA694Y4Qc6Zftg6QjTbEhPau7TVV1tzYEg5UmBUeFV1aM9QtImOMFjT2eZSq7G5eAicV_31rKVWPfChdSMKi0C4O7qdK_DDg83j5n-c-_gMFwqK8ZmOlpKRtdl90fPyp62pPenAkey00_8oZ2oDSnupySA6NKmeg.gif?alt=media) {% hint style="info" %} **Note**: 要素に Global Style を適用し、その後、元々その Global Style で設定されていたパラメーターのいずれかを変更すると、変更したスタイリングがそれらの特定のパラメーターに対して Global Style の設定を上書きします。ただし、変更していないその他のパラメーターは、適用された Global Style からスタイリングを継承します。Global Style で定義されたパラメーターを編集すると、そのパラメーターの横に黄色の点が表示され、元の Global Style 設定から変更されたことを示します。 {% endhint %} ### 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 システムを使用することを強くお勧めします。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c84c6421a2bbc6b6d02797f7902534333f868953%2FAD_4nXetaohgnT7Jg9W6UKOMA3gARsu7PuudpW_5xLc_N0KNvvosvAFxemXAd7aBdNGM55fW1MevW-XhvaSlY-l6idModcm2jcqVEKNcvQ6olJn9M57jG3lV4pGBXnHkdsGx2f7lQFKrVVFpHgUaHkOzZAkey00_8oZ2oDSnupySA6NKmeg.png?alt=media) ### 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 * [How To Upload Custom Font](https://help.pagefly.io/manual/how-to-add-custom-font-in-pagefly/) * [Styling tab](https://help.pagefly.io/manual/elements-style-settings/)