ページエディター - スタイルタブ

Last updated 24 days ago

Was this helpful?

ページエディター - スタイルタブ

ページエディター - スタイルタブについて

概要: Page Editor - Styling Tabは、ウェブページ上のすべての要素に対して広範なスタイル設定を提供する包括的なツールです。

ページエディター - スタイルタブを使用すると、ユーザーはテキスト、画像、ボタンなど、ウェブサイトの要素の外観をカスタマイズして、プロフェッショナルで統一感のあるルックを実現できます。

ページエディター - スタイルタブへのアクセス方法

PageFlyダッシュボードで、以下の手順に従ってページエディター - スタイルタブ機能にアクセスします。

ステップ1: PageFlyエディターページを開きます。
ステップ2: スタイルを設定したい要素をクリックします。設定メニューが右側に表示されます。
ステップ3: スタイルタブに移動して、要素のデザイン設定を調整します。

ページエディター - スタイルタブのカスタマイズ

Gen 2 エディター - スタイルタブ

PageFly 4.16以降、スタイルタブのパラメータは、サイズ、レイアウト、全体、間隔、タイポグラフィ、背景、ボーダー、エフェクト、高度な設定の8つの異なるグループに整理されています。

詳細に入る前に、このビデオチュートリアルを見てみましょう。新しいアップデートの概要と視覚的な説明が得られます。

さらに、ユーザーは「Edit global style」ボタンをクリックすることで、サイト全体のグローバル設定を簡単に変更でき、コンテンツ全体で一貫したスタイリングを確保できます。

サイズ設定

PageFlyのスタイル設定にあるサイズグループでは、要素の幅と高さを制御できます。これらのパラメータは、要素がそのコンテナ内でどれだけのスペースを占めるかを決定するのに役立ちます。

幅 - コンテナに合わせる: 要素は親コンテナの幅全体に自動的に拡張されます。 - コンテンツに合わせる: 要素の幅はコンテンツのサイズに合わせて調整されます。 - 固定幅: 要素に特定の幅を設定できます。

高さ - コンテナに合わせる: 幅オプションと同様に、これは要素が親コンテナ内の利用可能な垂直方向のスペースを満たすように拡張されることを保証します。 - コンテンツに合わせる: 要素の高さは、含まれるコンテンツに応じて調整されます。 - 固定高さ: 要素に特定の高さを設定できます。

その他の設定 - 最大幅/最大高さ: 要素が大きくなりすぎるのを防ぐために、要素が到達できる最大幅または最大高さを設定します。 - 最小幅/最小高さ: 要素が小さくなりすぎないように、最小幅または最小高さを設定します。

注意: すべての要素にサイズ設定があるわけではありません。たとえば、画像やアイコンにはこれらのオプションが含まれていない場合があります。これは、それらのサイズが通常、固有のサイズまたは画像のプロパティによって制御されるためです。

レイアウト設定

PageFlyのスタイル設定にあるレイアウトグループは、コンテナ要素全体の構造と配置を制御するように設計されています。

注意: このグループはコンテナ要素でのみ利用可能です。

主なパラメータは次のとおりです。

コンテンツ幅 (Flex Sectionでのみ利用可能): - コンテナに合わせる: コンテナ内のコンテンツがコンテナの幅全体を埋めるようにします。 - 最大幅: コンテンツの最大幅を設定でき、応答性を維持しながら、特定の制限を超えないようにします。

方向: コンテナ内のアイテムが水平方向 (左から右) または垂直方向 (上から下) のどちらに配置されるかを定義します。

全体、間隔、タイポグラフィ、背景、ボーダー、エフェクト、高度な設定

全体: コンテンツの色を変更できます。色パラメータを使用すると、テキストまたはアイコンであるコンテンツの色を選択できます。

タイポグラフィ: タイポグラフィセクションで、フォントファミリーパラメータに移動してフォントファミリーを変更します。フォントファミリーには6つの定義済みフォントがあります。これらはグローバルスタイル設定で編集できます。フォントマネージャーを開くことでさらにフォントを追加できます。すべてのフォントで、以下のパラメータを設定できます。 - フォントサイズ - テキスト整列 - テキストスタイル詳細設定ボタンには4つの追加オプションがあります。 - フォントの太さ - 行の高さ - 文字間隔 - テキスト変換

高度な設定

高度な設定では、独自のCSSコードを追加してデザインをカスタマイズできます。これは、通常のオプションでは提供されない特定の変更を行いたい場合に便利です。

CSSコード: 要素の見た目（色、レイアウト、フォントなど）を制御するために、カスタムCSSを入力できます。必要なものは何でも設定可能です。
テーマスタイルのオーバーライド: 公開ページがエディターで表示されるものと異なる場合、これをオンにします。これにより、カスタムスタイルがウェブサイトに正しく表示されるようになります。

このオプションは、ページの見た目や機能についてより詳細な制御が必要な場合に最適です。

レガシーエディター - スタイルタブ

それらがどのように機能するかを説明するために、ページエディター - スタイルタブの要素を見てみましょう。

| コンテンツの編集 | 色パラメータを使用すると、テキストまたはアイコンであるコンテンツの色を選択できます。

注意: このパラメータを使用する場合、選択した要素のマージン左およびマージン右を調整することはできません。

| | 間隔 | 間隔パラメータを使用すると、要素の周囲および内部の間隔を制御できます。パディングとマージンのパラメータにはそれぞれ4つの空のボックスがあり、上下左右の4辺の値を入力できます。

よくあるケース

テーマスタイルのオーバーライドの動作

このパラメータをオンにした後でも、手動で!importantを追加できます。
このパラメータをオンにした後でテーマスタイルのオーバーライドをオフにすると、このパラメータによって追加されたすべての!importantコードが自動的に削除されます。
テーマスタイルのオーバーライドをオンにした後、CSSコードボックスから!importantを手動で削除すると、このパラメータは自動的にオフになります。

CSSパラメータ内のすべてのスタイリングに手動で!importantを追加すると、テーマスタイルのオーバーライドがオンになります。
要素のスタイルをコピーして別の要素に貼り付けると、同じ設定が新しい要素に引き継がれ、テーマスタイルのオーバーライドが自動的にオンになります。

カスタムCSS

要素のために行ったすべての設定は、CSSコードボックスに表示されます。
CSSコードを編集し、すべての変更をページエディターに適用できます。

デバイス固有の設定

特定のデバイスのスタイルを編集するには、デバイススイッチャーを使用して編集モードを対象マシンに切り替え、スタイル設定を調整します。

注意: 「すべてのデバイス」で設定されたパラメータはすべてのデバイスに影響し、自動的に正しく機能します。まれに、特定のデバイスに対してのみ設定を行う必要がある場合があります。

カスタムフォント

PageFlyフォントにリストされていないカスタムフォントを使用したい場合は、カスタムコードを使用できます。詳細についてはこちらを参照してください。

段落要素をカスタマイズする方法については、このビデオをご覧ください。

オーバーレイカラー

背景画像に背景色/グラデーションの色を組み合わせて表示したい場合は、画像を透過させるために色の透明度を下げる必要があります。

バージョンアップデート

バージョン4.16.0で、PageFlyは新しいサイズとレイアウト設定をスタイル設定に導入しました。これらの追加により、ユーザーは要素がコンテナ内でどのようにサイズ変更され配置されるかをより詳細に制御できるようになり、応答性が高く構造化されたページを簡単にデザインできるようになりました。

バージョン4.18.0で、PageFlyは新しいグラデーションカラーピッカーを導入しました。これはPAYG料金モデル（スロットプラン）のユーザー限定で利用できます。この機能を使用すると、任意の要素の背景にグラデーションカラーを適用できます。ラジアルおよびローテーションオプションでグラデーションのスタイルをカスタマイズでき、各カラーストップの位置を正確に制御できます。この強化により、デザインの柔軟性が向上し、よりダイナミックで視覚的に魅力的なページを作成するのに役立ちます。