ウィジェットの外観をスタイルエディタで変更する
スタイルエディタは、基本ビジュアルプロパティを編集するためのパネルです。たとえば、フォントの色やマージン、または枠線の太さを変更する際に使用します。[Interface]タブで、画面やブロックを開き要素を選択して、プロパティペインの[Styles]タブをクリックします。スタイルエディタパネルは、スタイルシートエディタでも使用可能で、エディタを使用して保存したスタイルを変更できます。
ウィジェットのスタイルを設定するには、Font、LayoutおよびBordersのオプションを使用します。以下は、スタイルエディタを使用して変更できる項目の概要です。
- Font
- スタイル(太字、イタリック、下線)、サイズ、色。
- レイアウト
- 幅、高さ、配置(左、中央、右)、背景色。マージン、間隔。選択した要素が該当する場合、WidthプロパティとMargin Leftプロパティの値はグリッドの列数になります。
- Borders
- 枠線の太さと色。角の丸み。
MarginsとBordersには、どのようにしてウィジェットに編集を適用するかを示すアイコンがあります。
アイコン | 意味 |
---|---|
![]() |
この値は、関連する他のすべてのプロパティに適用されます。 |
![]() |
この値は、現在のプロパティのみに適用されます。 |
すべての変更は現在のウィジェットのみに適用されます。
他のウィジェットで同じスタイルを使用する場合は、スタイルを一連のプロパティ(クラス)として保存します。次に、スタイルを設定するウィジェットのスタイルエディタの[Style Classes]セクションにクラスを追加します。スタイルをクラスに昇格するには、モジュールにローカルテーマがある必要があります。
拡張可能な[Styles Properties Applied]セクションは、スタイルがどこで定義されたかにかかわらず、ウィジェットに適用されたすべてのスタイルを一覧表示します。スタイルをクリックして、スタイル定義のスタイルシートエディタを開きます。
モジュールのThemeで直接CSSを編集することで、ビジュアル要素をうまく制御できます。
なお、CSSの詳細度のルールに従って、スタイルエディタでの編集がExtended Propertiesのstyle
の値で上書きされる場合があります。ご注意ください。また、class
拡張プロパティで追加されたクラスはエディタに表示されません。
使用例
ウィジェットの外観を変更してスタイルを保存し、アプリケーションの他のウィジェットに適用するためのスタイルエディタの使用例を以下に示します。
ウィジェットのスタイルを変更する
- ウィジェットを(Web)画面にドラッグします。
- [Properties]ペイン内で[Styles]タブをクリックします。
- テキストを含む要素について、[Font]セクションでテキストプロパティを編集します。
- [Color]フィールドを使用してカラーピッカーを開き、プロパティの色を設定します。
- [Layout]で、幅、高さ、配置を変更します。
- [Layout/Margin]と[Layout/Padding]で、外側と内側のスペースを調整します。
- [Borders]セクションに枠線を追加し、角の丸みを調整します。
スタイルを保存する
- スタイルエディタでウィジェットを編集します。
- [Style Classes]セクション(または[Styles Properties Applied]セクション)で[Save changes to reusable class]をクリックします。
- 開いているダイアログで、クラス名を入力します(
myStyle
など)。クラスによってすべてのスタイル要素がグループ化されます。 - 開いている[Style Sheet Editor]ウィンドウで[OK]を押します。
保存したスタイルを適用する
- スタイルを適用するウィジェットをクリックします。
- [Style Classes]セクションで、鉛筆アイコンをクリックします。
- スタイルリストをスペースで区切ってスタイルクラスに追加します。例:
BaseStyle1 BaseStyle2 myStyle
保存したスタイルを編集する
- 編集するスタイルを持つウィジェットをクリックします。
- [Style Classes]セクション(または[Style Properties Applied]セクション)で、
myStyle
などのスタイル名をクリックします。 - 開いている画面で、埋め込まれているスタイルエディタのプロパティを編集します。
- 編集が終了したら、[OK]をクリックします。