# ページエディタ - スタイルタブ ### ページエディター - スタイルタブについて 概要: [Page Editor - Styling Tab](https://help.pagefly.io/manual/elements-style-settings/)は、ウェブページ上のすべての要素に対して広範なスタイル設定を提供する包括的なツールです。 ページエディター - スタイルタブを使用すると、ユーザーはテキスト、画像、ボタンなど、ウェブサイトの要素の外観をカスタマイズして、プロフェッショナルで統一感のあるルックを実現できます。 ### ページエディター - スタイルタブへのアクセス方法 PageFlyダッシュボードで、以下の手順に従ってページエディター - スタイルタブ機能にアクセスします。 * ステップ1: PageFlyエディターページを開きます。 * ステップ2: スタイルを設定したい要素をクリックします。設定メニューが右側に表示されます。 * ステップ3: スタイルタブに移動して、要素のデザイン設定を調整します。 ![](/files/6m2qzEyn2ExCoeJqnLfp) ### ページエディター - スタイルタブのカスタマイズ #### Gen 2 エディター - スタイルタブ PageFly 4.16以降、スタイルタブのパラメータは、サイズ、レイアウト、全体、間隔、タイポグラフィ、背景、ボーダー、エフェクト、高度な設定の8つの異なるグループに整理されています。 詳細に入る前に、このビデオチュートリアルを見てみましょう。新しいアップデートの概要と視覚的な説明が得られます。 {% embed url="" %} さらに、ユーザーは「**Edit global style**」ボタンをクリックすることで、サイト全体のグローバル設定を簡単に変更でき、コンテンツ全体で一貫したスタイリングを確保できます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc8zjxwYX7XEL7GUcK9srPykd0i3VPwQW9LmUmBG_ZQMkppDcqgjfcQTLCXNWv6KdkyRuMRhy1fLjQQ-vF8FCFgossJI2a7w4aJ1P1HDNpViFzDiDhG8f6TPVUdiFnTv1_KyU_RzbCGYGMZwT-Y7wkeyNg2cLDmb626Y_vX35Us8Vg.png) **サイズ設定** PageFlyのスタイル設定にあるサイズグループでは、要素の幅と高さを制御できます。これらのパラメータは、要素がそのコンテナ内でどれだけのスペースを占めるかを決定するのに役立ちます。 | 幅 - コンテナに合わせる: 要素は親コンテナの幅全体に自動的に拡張されます。 - コンテンツに合わせる: 要素の幅はコンテンツのサイズに合わせて調整されます。 - 固定幅: 要素に特定の幅を設定できます。 | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](/files/JjGMmrSGAVb5BeSOPgPl) | | 高さ - コンテナに合わせる: 幅オプションと同様に、これは要素が親コンテナ内の利用可能な垂直方向のスペースを満たすように拡張されることを保証します。 - コンテンツに合わせる: 要素の高さは、含まれるコンテンツに応じて調整されます。 - 固定高さ: 要素に特定の高さを設定できます。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdZWri3_33W1abQKG1kMJEOT1sTgyINbC1-MAn5-mY7YYN81I7sXRcXcuYuIajdiBBmyKmJ8IziJMOqf8Z-QG7up4qiZzHYVEjplyVP0Q4NwuB08WP51Jc8tMZAHmi-QRQ5BoCLjkoTo8JhYBmogkeyNg2cLDmb626Y_vX35Us8Vg.gif) | | その他の設定 - 最大幅/最大高さ: 要素が大きくなりすぎるのを防ぐために、要素が到達できる最大幅または最大高さを設定します。 - 最小幅/最小高さ: 要素が小さくなりすぎないように、最小幅または最小高さを設定します。 | | ![](/files/MZPw34Izz2fWrMZUzpYr) | {% hint style="info" %} **注意**: すべての要素にサイズ設定があるわけではありません。たとえば、画像やアイコンにはこれらのオプションが含まれていない場合があります。これは、それらのサイズが通常、固有のサイズまたは画像のプロパティによって制御されるためです。 {% endhint %} **レイアウト設定** PageFlyのスタイル設定にあるレイアウトグループは、コンテナ要素全体の構造と配置を制御するように設計されています。 {% hint style="info" %} **注意**: このグループはコンテナ要素でのみ利用可能です。 {% endhint %} 主なパラメータは次のとおりです。 | コンテンツ幅 (Flex Sectionでのみ利用可能): - コンテナに合わせる: コンテナ内のコンテンツがコンテナの幅全体を埋めるようにします。 - 最大幅: コンテンツの最大幅を設定でき、応答性を維持しながら、特定の制限を超えないようにします。 | | ----------------------------------------------------------------------------------------------------------------------------- | | ![](/files/NJ090QiiCeLjIlna9BFS) | | 方向: コンテナ内のアイテムが水平方向 (左から右) または垂直方向 (上から下) のどちらに配置されるかを定義します。 | ![](/files/1MqGKBlC8wKxpH1MCEMQ) ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXc5vAHfJPtveidV2DWGUfE_Ou9hI0qATdzb81T8_GXfBmmpTknAKcuT2NrECmnW0K4FqowRsALNuqGqp5u3F3-h84UHF9IX8tag-O-fxuXP2T7o7WPqqQTMO_Upm0ccJDSHG0t5EGudQNdUJCw59QkeyNg2cLDmb626Y_vX35Us8Vg.gif) |\ \| 逆順序: これは応答性の高いデザインに特に役立ちます。コンテナ内のアイテムの順序を逆にして、さまざまな画面サイズに合わせてレイアウトを調整できます。 |\ \| ![](/files/YdzAQXxe1vktOD5OgMGp) |\ \| 水平ギャップ: コンテナ内のアイテム間のスペースを水平方向に調整します。 | ![](/files/ufTTz2zu9Vc9ko8YJVMG) |\ \| 垂直ギャップ: コンテナ内のアイテム間のスペースを垂直方向に調整します。 | ![](/files/I5veQTKJrEteboNQsaii) |\ \| アイテムを整列: コンテナ内でアイテムがどのように並ぶかを制御するのに役立ちます。アイテムを整列させることができます。 - アイテムは上部 (垂直レイアウトの場合) または左側 (水平レイアウトの場合) に配置されます。 - アイテムはコンテナの中央に配置されます。 - アイテムは下部 (垂直レイアウトの場合) または右側 (水平レイアウトの場合) に配置されます。 その他のオプションは次のとおりです。 - 伸縮: アイテムはコンテナの高さ (垂直レイアウトの場合) または幅 (水平レイアウトの場合) に合わせて伸縮します。 - ベースライン: アイテムはテキストのベースラインに基づいて整列されます。 | ![](/files/cCpQWZ3YZDcTJGnFSIUK) |\ \| コンテンツを整列: コンテナ内でアイテムがどのように分散されるかを決定します。オプションは次のとおりです。 - アイテムはコンテナの先頭にグループ化されます。 - アイテムはコンテナの中央に配置され、両側に等しいスペースが空けられます。 - アイテムはコンテナの末尾にグループ化されます。 その他のオプションは次のとおりです。 - アイテム間: アイテム間に等しいスペースがあり、端にはありません。 - アイテム周囲: 各アイテムの周囲に等しいスペースがあります。 - アイテム均等: アイテム間と端に等しいスペースがあります。 | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeNgxEbLEgu57EJjNdstX1VkkthSBhnLX96S86ub7rHnKM52svbhT0CJ2feIbvu1DegZuVW_gDOrQBcVWnQ-gZGwciEl7-KINIwHqGCgJ97gYDyqbD1OiNNkTG9tZzJwJ6lbPolymfAJdS6LGfRzAkeyNg2cLDmb626Y_vX35Us8Vg.gif) | **全体、間隔、タイポグラフィ、背景、ボーダー、エフェクト、高度な設定** | 全体: コンテンツの色を変更できます。色パラメータを使用すると、テキストまたはアイコンであるコンテンツの色を選択できます。 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](/files/R3hidISq3rXC6xv1hOWO) | | 間隔: 間隔パラメータを使用すると、要素の周囲および内部の間隔を制御できます。パディングとマージンのパラメータにはそれぞれ4つの空のボックスがあり、上下左右の4辺の値を入力できます。これに関する詳細については、[編集間隔の記事](https://help.pagefly.io/documentation/pagefly-edit-spacing-margin-and-padding/)を参照してください。 | | ![](/files/uVQEgYPHSEx615DKJqCp) | | タイポグラフィ: タイポグラフィセクションで、フォントファミリーパラメータに移動してフォントファミリーを変更します。フォントファミリーには6つの定義済みフォントがあります。これらはグローバルスタイル設定で編集できます。フォントマネージャーを開くことでさらにフォントを追加できます。すべてのフォントで、以下のパラメータを設定できます。 - フォントサイズ - テキスト整列 - テキストスタイル 詳細設定ボタンには4つの追加オプションがあります。 - フォントの太さ - 行の高さ - 文字間隔 - テキスト変換 | ![](/files/MxA6gm9RBDSYJXhWLjc4) ![](/files/X9qNy22TBbklYOaCKPU0) |\ \| 背景: 色、グラデーションの色、背景画像をカスタマイズできます。 | ![](/files/NI3Je5IGHJFlXqoA05Cb) |\ \| 背景グラデーション: 背景グラデーション機能を使用すると、複数の色の間の滑らかな遷移を任意の要素に適用できます。カスタマイズのための3つの主要なパラメータがあります。 - カラーストップ: このパラメータを使用すると、最大10個のカラーストップでグラデーションを生成できます。各ストップで特定の画像を割り当てることができ、要素全体にシームレスな色の遷移を作成できます。 - グラデーションタイプ: この機能を使用すると、グラデーションの表示スタイルを変更できます。2つのオプションから選択できます。 - 円形グラデーション: 中央から外側に向かって色が遷移する円形のグラデーションを適用します。 - 円錐形グラデーション: 要素の周囲を360度回転しながらグラデーションを表示し、滑らかな円形の遷移を作成します。 - 位置: このセクションでは、グラデーションパス沿いの各カラーストップの位置を制御でき、各遷移が正確にどこで発生するかを調整できます。 | ![](/files/oWxvfKaT7gxMNauqwKY5) |\ \| ボーダー: 要素のボーダースタイルとボーダーラジウスを設定できます。 | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXebHs70rbMYELbqXlEk3ZD5AbhOabCjnwarA_pRfR8kYS9cgAO_6FSdotY1Q0-la10UzMa45RzWJ-9Z3yB2LfxmgZjFb2IfpDW3chlZGmxtiAhEoiWbx5fC6xAdGgwgTqWsrnMA6lvgHCxqZG4UYQkeyNg2cLDmb626Y_vX35Us8Vg.png) |\ \| エフェクト: - 透明度: 要素の透明度を調整できます。 - 要素にシャドウ効果を追加するには、影を有効にするオプションをオンにします。ここでは、さまざまな設定でシャドウ効果をカスタマイズできます。 - 水平オフセット - 垂直オフセット - 影のぼかし - 影の色 影の効果はボックスシャドウとしてのみ機能することに注意してください。 | ![](/files/sBOfO6yNWYBlQYXZiokW) | **高度な設定** 高度な設定では、独自のCSSコードを追加してデザインをカスタマイズできます。これは、通常のオプションでは提供されない特定の変更を行いたい場合に便利です。 * CSSコード: 要素の見た目（色、レイアウト、フォントなど）を制御するために、カスタムCSSを入力できます。必要なものは何でも設定可能です。 * テーマスタイルのオーバーライド: 公開ページがエディターで表示されるものと異なる場合、これをオンにします。これにより、カスタムスタイルがウェブサイトに正しく表示されるようになります。 このオプションは、ページの見た目や機能についてより詳細な制御が必要な場合に最適です。 #### レガシーエディター - スタイルタブ それらがどのように機能するかを説明するために、ページエディター - スタイルタブの要素を見てみましょう。 \| コンテンツの編集 | 色パラメータを使用すると、テキストまたはアイコンであるコンテンツの色を選択できます。 ![](/files/ESwdvdG8qPtZFvQZ04f3) [グローバルスタイル設定](https://help.pagefly.io/manual/global-styling-feature/)を編集するには、「**Edit global style**」ボタンをクリックします。 \| ![](/files/wym70nyMknuH5KxkID5S) 注意: 一部の要素、例えば画像要素にはこのパラメータはありません。 |\ \| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\ \| 水平方向の整列 | 水平整列パラメータは、インライン要素にのみ表示されます。 1. 画像 2. アイコン 3. カウントダウン 4. ボタン 5. 商品メディア 6. 商品カートに追加ボタン 7. 商品数量 8. 商品詳細を見る 9. コレクション詳細を見る 10. コレクション画像 11. ブログ投稿画像 12. ブログ投稿詳細を見る 13. お客様フォームボタン 14. 問い合わせフォームボタン 15. QRコード このパラメータを使用すると、選択した要素を水平方向に整列できます。 |\ \| ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXdeDzf0BvmL0rPRsf7iEb0zheEjLOjUIcwM_esZAIPkAmhGPQMvxk5pFCaP5sS8Fu-NyX9vrcXTC_ydVf2f7zo9H6Kz3jVEalQMeEMEssbbvPqPYFKsNXCND4Pt6akhpeGY8_03a4D74IyZpaHMcgkeyNg2cLDmb626Y_vX35Us8Vg.gif) |\ | {% hint style="info" %} ``` | ``` **注意**: このパラメータを使用する場合、選択した要素のマージン左およびマージン右を調整することはできません。 {% endhint %} |\ \| 間隔 | 間隔パラメータを使用すると、要素の周囲および内部の間隔を制御できます。パディングとマージンのパラメータにはそれぞれ4つの空のボックスがあり、上下左右の4辺の値を入力できます。 ![](/files/a9sh6yCC0uURnNzsYvIE) これに関する詳細については、[編集間隔の記事](https://help.pagefly.io/documentation/pagefly-edit-spacing-margin-and-padding/)を参照してください。 |\ \| タイポグラフィ | タイポグラフィセクションで、フォントファミリーパラメータに移動してフォントファミリーを変更します。フォントファミリーには6つの定義済みフォントがあります。これらはグローバルスタイル設定で編集できます。 ![](/files/W8AftEJ8hwDo7Sgca1qa) フォントファミリーの下にあるShopifyテーマフォントを選択できます。また、フォントマネージャーを開くことでさらにフォントを追加できます。すべてのフォントで、以下のパラメータを設定できます。 - フォントサイズ - テキスト整列 - テキストスタイル ![](/files/Yq7lJm1CiFicZoyaD7mf) 詳細設定ボタンには4つの追加オプションがあります。 - フォントの太さ - 行の高さ - 文字間隔 - テキスト変換 ![](/files/nft0hjsEf721Hlj5CObF) |\ \| 背景 | 色と画像をカスタマイズできます。 ![](/files/MyoLIYMKNtfbyf0E5mcl) |\ \| ボーダーの編集 | ボーダースタイルとボーダーカラーで要素のボーダースタイルをカスタマイズできます。グローバルスタイルで設定したカスタムカラーを選択することもできます。 ![](/files/JqihdgdAib8fVhI6g6Hz) |\ \| 表示 | CSSの表示オプションで要素の配置を管理します。 - Inline - Block - Flex ![](/files/bpqDjcoRKqWMUcHL3cjk) |\ \| エフェクト | 透明度で要素の透明度を調整できます。 ![](/files/y8zYzl5aSmgAK4l9ijOg) 要素にシャドウ効果を追加するには、影を有効にするオプションをオンにします。ここでは、さまざまな設定でシャドウ効果をカスタマイズできます。 - 水平オフセット - 垂直オフセット - 影のぼかし - 影の色 影の効果はボックスシャドウとしてのみ機能することに注意してください。 | ### よくあるケース #### テーマスタイルのオーバーライドの動作 * このパラメータをオンにした後でも、手動で!importantを追加できます。 * このパラメータをオンにした後でテーマスタイルのオーバーライドをオフにすると、このパラメータによって追加されたすべての!importantコードが自動的に削除されます。 * テーマスタイルのオーバーライドをオンにした後、CSSコードボックスから!importantを手動で削除すると、このパラメータは自動的にオフになります。 ![](/files/GQnjJXVs2Jmcaf7yFeGU) * CSSパラメータ内のすべてのスタイリングに手動で!importantを追加すると、テーマスタイルのオーバーライドがオンになります。 * 要素のスタイルをコピーして別の要素に貼り付けると、同じ設定が新しい要素に引き継がれ、テーマスタイルのオーバーライドが自動的にオンになります。 #### カスタムCSS * 要素のために行ったすべての設定は、CSSコードボックスに表示されます。 * CSSコードを編集し、すべての変更をページエディターに適用できます。 #### デバイス固有の設定 特定のデバイスのスタイルを編集するには、[デバイススイッチャー](https://help.pagefly.io/manual/top-navigation/)を使用して編集モードを対象マシンに切り替え、スタイル設定を調整します。 注意: 「すべてのデバイス」で設定されたパラメータはすべてのデバイスに影響し、自動的に正しく機能します。まれに、特定のデバイスに対してのみ設定を行う必要がある場合があります。 #### カスタムフォント PageFlyフォントにリストされていないカスタムフォントを使用したい場合は、カスタムコードを使用できます。詳細については[こちら](https://help.pagefly.io/manual/use-custom-fonts)を参照してください。 段落要素をカスタマイズする方法については、このビデオをご覧ください。 {% embed url="" %} #### オーバーレイカラー 背景画像に背景色/グラデーションの色を組み合わせて表示したい場合は、画像を透過させるために色の透明度を下げる必要があります。 ![](/files/ylwkjlyAo8iTOCgeSjOU) ### バージョンアップデート バージョン4.16.0で、PageFlyは新しいサイズとレイアウト設定をスタイル設定に導入しました。これらの追加により、ユーザーは要素がコンテナ内でどのようにサイズ変更され配置されるかをより詳細に制御できるようになり、応答性が高く構造化されたページを簡単にデザインできるようになりました。 バージョン4.18.0で、PageFlyは新しいグラデーションカラーピッカーを導入しました。これはPAYG料金モデル（[スロットプラン](https://help.pagefly.io/manual/pricing-plans/)）のユーザー限定で利用できます。この機能を使用すると、任意の要素の背景にグラデーションカラーを適用できます。ラジアルおよびローテーションオプションでグラデーションのスタイルをカスタマイズでき、各カラーストップの位置を正確に制御できます。この強化により、デザインの柔軟性が向上し、よりダイナミックで視覚的に魅力的なページを作成するのに役立ちます。 ### よくある質問 **1. グローバルスタイル要素とは何ですか？** グローバルスタイル要素を使用すると、設定でグローバルスタイルに設定された要素に対して異なるスタイルを選択できます。 まだ何か設定が必要な場合でも、スタイルプリセットには各要素のデフォルトスタイルが付属しています。 PageFlyでグローバルスタイルを設定する方法については、このビデオチュートリアルをご覧ください。 {% embed url="" %} **2. ステートスタイリングとは何ですか？** ステートスタイリングは、要素のステートスタイリングを選択する場所です。ノーマル状態、マウスオーバー状態、アクティブ/選択状態の3つのオプションから選択できます。 注意: このパラメータは、以下の要素（サブ要素）にのみ表示されます。 * 見出し * ボタン * アイコン * 画像 * タブ (タブヘッダー) * アコーディオン (アコーディオンヘッダー) * 商品タイトル * 商品メディア * 商品カートに追加 * 商品詳細を見る * 商品数量 (数量ボタン) * コレクション詳細を見る * コレクションタイトル * コレクション画像 * お客様フォームボタン * 問い合わせフォームボタン * ブログ投稿詳細を見る * 商品バリアント {% hint style="info" %} **注意**: 商品バリアント要素の場合、オプション結合がオフの場合にのみステートスタイリングが表示されます。ただし、オプション値 \[バリアント画像] の場合、オプション結合がオンでもオフでもステートスタイリングは表示されます。オプション結合がオンの場合、さらに無効状態という状態が追加されます。 {% endhint %} 異なる状態に対して異なるスタイルを設定できます。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/editor/user-interface/elements-style-settings.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.