ウィジェットのルック＆フィールの設定
ウィジェット ページを使用するときは、[外観と操作感の構成] メニューを使用してウィジェットの外観をカスタマイズします。 サイトのデザインに合わせて、テキスト スタイル、背景色、境界線、余白、パディング、高度な CSS 設定を調整します。 ウィジェットのオプションにアクセスするには、
-
ウィジェット ヘッダーの オプション (
) → 外観と操作感の設定をクリックします。注Liferay DXP 2025.Q1/Portal GA132 より前では、設定オプションはウィジェットの右上隅に表示されていました。
ルックアンドフィール設定 には 6 つのタブがあります。
- 一般
- Text Styles
- Background Styles
- Border Styles
- Margin and Padding
- Advanced Styling
-
カスタマイゼーションが完了したら、 ［Save］ をクリックし、ページを更新すると変更が適用されます。
表示ページテンプレートのコンテンツページのウィジェットでは、ルック＆フィールの設定オプションは使用できません。
一般設定
［General］タブには、次のオプションがあります。
カスタムタイトルを使用する を使用すると、ウィジェットのタイトルを変更できます。 タイトルボックスの値は、ウィジェットのデコレータに表示されます。 タイトルはローカライズ可能なので、さまざまな言語のタイトルの翻訳を提供できます。
アプリケーション デコレータ では、3 つのデコレータから選択できます: ベアボーン、 ボーダーレス、 デコレート。 Decorateアプリケーションデコレーターがデフォルトです。
ウィジェットボーダーをオフにすると、テーマによってはウィジェットボーダーがオンになっていることを前提とし、正しく表示されない場合がありますので、ご注意ください。
テキストのスタイル
［Text Styles］では、ウィジェットに表示するテキストの形式を設定します。
フォント: さまざまなフォントを選択します。 テキストは、太字、斜体、またはその両方を設定することができます。
［Size］： フォントサイズを0.1emから12emの範囲で設定します。 1emがデフォルトです。
色: 任意の 6 桁の 16 進カラーコードに設定します。 テキストボックスをクリックすると、カラーパレットが表示されます。
配置: 設定: 左、 中央、 右、または 両端揃え。
テキスト装飾: 設定: 下線、 上線、または 取り消し線。 デフォルトのテキスト装飾は Noneです。
単語間隔: -1 em から 0.95 em まで設定します。デフォルトは 0 em です。
行間隔: 0 em から 12 em の間で設定します。デフォルトは 0 em です。
文字間隔: -10 px から 50 px まで設定します。デフォルトは 0 px です。
背景のスタイル
［Background Styles］タブは、ウィジェットの背景色を指定します。 テキストスペースを選択すると、背景色を選択するためのカラーパレットが表示されます。または、6桁の16進カラーコードを手動で入力することもできます。
枠線のスタイル
［Border Styles］タブでは、ウィジェットの枠線の幅、スタイル、そしてカラーを設定します。 これらの各属性について、［Same for All］セレクターを有効にしておくと、上、右、下、左枠に同じ設定を適用することができます。
枠線の幅は、%値、em値、px値を指定できます。 線のスタイルは、ダッシュ、二重線、点線、溝、非表示、差込み、着手、リッジ、ソリッドから選択可能です。 枠線の色は、文字色や背景色と同じように、6桁の16進数カラーコードを入力することができます。 また、カラーパレットを使用することもできます。
マージンとパディング
［Margin and Padding］タブでは、ウィジェットの端のマージンとパディングの長さを指定します。 枠線と同様に、 Same for All セレクターを有効にしておくと、ウィジェットの各サイド（上、右、下、左）に同じ設定を適用することができます。
パディングとマージンの両方に、任意の％値、em値、またはpx値を指定できます。
詳細設定
［Advanced Styling］タブは、ウィジェットのLiferay IDやCSSクラスなど、ウィジェットに関する現在の情報を表示します。
また、ウィジェットのカスタムCSSクラス名とカスタムCSSコードを入力することができます。 ［Add a CSS rule for just this portlet］または［Add a CSS rule for all portlets like this one］リンクをクリックすると、CSSコードシェルがカスタムCSSテキストボックス内に追加されます。