この記事で、グローバルスタイリング機能と使用法について学びます。
グローバルスタイリング機能について
PageFlyグローバルスタイリング機能はマーチャントがストアで要素にこのを使用するようにすることを目的としています。 この定義済みのスタイリングはマーチャントによってカスタマイズされた。マーチャントがストアで迅速かつ均一でページを作成できます。グローバルスタイリングで設定された値はエディタページに計算値になります。
例えは:
ページの全部で同じ見出しスタイルを表示したい場合、スタイルをコピーして貼り付けるのではなく、スタイリングタブでグローバルスタイリングを選択してください
グローバルスタイリングを適用している見出しのスタイルを変更したい場合、グローバルスタイリングの設定でスタイルを変更するだけです。
別の例:ボタン、そしてイコンなどの要素にブランド色を適用したい場合、グローバルスタイリングで要素の色の設定とグローバルスタイリングの色でブランドの色の設定はできます。
全体として、グローバルスタイリングの使用でストアの作成のプロセス中で時間と労力を節約するだけでなく、ページの表示も向上できます。
この機能の使用を理解するため、引き続き、この記事をお読みください。
グローバルスタイリング機能にアクセスします
- 手順1:PageFlyアプリでナビゲーションバーの左下に設定を選択してください
- 手順2:設定で、グローバルスタイリングをクリックします
グローバルスタイリングの構成
グローバルスタイリング設定で 2つの主要部分があります
プロパティの部分には色やフォント群があります
要素の部分にはイコン、イメージ、ボタン、見出し、パラグラフ、そしてディバイダがあります。
要素のスタイリングの名前を変更することができます。エディタページでグローバルスタイリングを選択する時、この名前はドロップダウンメニューに表示されます
プロパティ
色
グローバルスタイリングの色の設定で8つの定義済みの色ををカスタマイズし、ページの作成のプロセス中で使用できます。その色の名前はプライマリー、セカンダリ、フォアグラウンド、バックグラウンド、色5、色6、色7、そして色8です。
色をカスタマイズするように各タイプを選択して、スタイリングタブで色を選択してください
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みの色を使用するように色を変更する要素を選択し、スタイリングタブに移動してください。そして、内容の色と背景の色の下でグローバルスタイリングの色を自由に選択します。
グローバルスタイリングの色と異なる色を選択する場合、色のタイプはカスタムに自動的に変更されます。
フォント群
グローバルスタイリングのフォント群の設定で3つの定義済みのフォントをカスタマイズし、ページの作成のプロセス中で使用できます。その色の名前はプライマリー、セカンダリ、そしてターシャリです。
フォント群をカスタマイズするように各タイプを選択して、スタイリングタブでフォント群を選択してください。
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みのフォントを使用するようにフォント群を変更する要素を選択し、スタイリングタブに移動してください。そして、フォント群の下でグローバルスタイリングの色を自由に選択します。
グローバルスタイリングのフォント群と異なるフォントを選択する場合、フォント群のタイプはカス タムに自動的に変更されます。
要素
アイコン
グローバルスタイリングの色の設定で6つの定義済みのスタイルをカスタマイズし、ページの作成のプロセス中で使用できます。
各イコンのスタイリングをカスタマイズするように各タイプを選択しスタイリングタブに移動して構成を行ってください
スタイリングタブの詳細については ここを参照してください
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みのイコンを使用するように要素機能の追加というプラスアイコンをクリックして、ドロップダウンメニューにイコン要素をクリックします。そして、ページエディタに要素をドラッグしてドロップしてください。
その後、イコンを選択して、スタイリングタブに移動してください。要素のグローバルスタイルの下でイコンのスタイルを自由に選択してください。
イメージ
グローバル・スタイリング・イメージの設定で6つの定義済みのスタイルをカスタマイズし、ページの作成のプロセス中で使用できます。
各イメージのスタイリングをカスタマイズするように各タイプを選択して、スタイリングタブに移動して、構成を自由に行ってください。
スタイリングタブの詳細については ここを参照してください
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みのイメージを使用するように要素機能の追加というプラスアイコンをクリックして、ドロップダウンメニューにイメージ要素をクリックします。そして、ページエディタに要素をドラッグしてドロップしてください。
その後、イメージを選択して、スタイリングタブに移動してください。要素のグローバルスタイルの下でイメージのスタイルを自由に選択してください。
ボタン
グローバルスタイリングのボタンの設定で6つの定義済みのスタイルをカスタマイズし、ページの作成のプロセス中で使用できます。
各ボタンのスタイリングをカスタマイズするように各タイプを選択して、スタイリングタブに移動して、構成を自由に行ってください。
スタイリングタブの詳細についてはここを参照してください
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みのボタンを使用するように要素機能の追加というプラスアイコンをクリックして、ドロップダウンメニューにボタン要素をクリックします。そして、ページエディタに要素をドラッグしてドロップしてください。
その後、ボタンを選択して、スタイリングタブに移動してください。要素のグローバルスタイルの下でボタンのスタイルを自由に選択してください。
見出し
グローバルスタイリングの見出しの設定で6つの定義済みのスタイルをカスタマイズし、ページの作成のプロセス中で使用できます。
各見出しのスタイリングをカスタマイズするように各タイプを選択 して、スタイリングタブに移動して、構成を行ってください。
スタイリングタブの詳細についてはここを参照してください
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みの見出しスタイルを使用するように要素機能の追加というプラスアイコンをクリックして、ドロップダウンメニューに見出し要素をクリックします。そして、ページエディタに要素をドラッグしてドロップしてください。
その後、見出しを選択して、スタイリングタブに移動してください。要素のグローバルスタイルの下で見出しのスタイルを自由に選択してください。
パラグラフ
グローバルスタイリングのパラグラフの設定で4つの定義済みのスタイルをカスタマイズし、ページの作成のプロセス中で使用できます。
各パラグラフのスタイリングをカスタマイズするように各タイプを選択して、スタイリングタブに移動して、構成を行ってください。
スタイリングタブの詳細についてはここを参照してください
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みのパラグラフのスタイルを使用するように要素機能の追加というプラスアイコンをクリックして、ドロップダウンメニューにパラグラフ要素をクリックします。そして、ページエディタに要素をドラッグしてドロップしてください。
その後、パラグラフを選択して、スタイリングタブに移動してください。要素のグローバルスタイルの下でパラグラフのスタイルを自由に選択してください。
ディバイダ
グローバルスタイリングのディバイダの設定で3つの定義済みのスタイルをカスタマイズし、ページの作成のプロセス中で使用できます。
各ディバイダのスタイリングをカスタマイズするように各タイプを選択して、スタイリングタブに移動して、構成を行ってください。
スタイリングタブの詳細について はここを参照してください。
構成の完了後、公開を選択します。
PageFlyエディタでこのような定義済みのディバイダのスタイルを使用するように要素機能の追加というプラスアイコンをクリックして、ドロップダウンメニューにディバイダの要素をクリックします。そして、ページエディタに要素をドラッグしてドロップしてください。
その後、ディバイダを選択して、スタイリングタブに移動してください。要素のグローバルスタイルの下でディバイダのスタイルを自由に選択してください。
注意:
- グローバルスタイリングを公開すると、グローバルスタイリングのプロパティと要素での変更はグローバルスタイリングを使用しているページに適用されます。
- グローバルスタイリングのパラメータはスタイリングタブでリセットのボタンがありません。
- ある要素にグローバルスタイリングを適用して、設定されているパラメータを編集する場合、他のパラメータはグローバルスタイリングの設定を引き続き使用します。
- スタイリングタブでグローバルスタイリングを使用した後、ローバルスタイリングを元に戻すオプションがあります。要素の編集・プロパティのグローバルスタイリングを選択してください。