スタイルリファレンス
コレクション表示フラグメントを除くすべてのフラグメントには、スタイル設定セクションがあります。 スタイル設定を使って、フラグメントのルックアンドフィールを設定します。 これらのオプションの多くはCSSクラスに対応しており、スタイルブックでサポートされるトークンが定義されています。 フラグメント構成の追加オプションについては、 一般設定リファレンス および フラグメント要素リファレンス を参照してください。
デフォルトでは、スタイル設定はフラグメント全体に適用されるため、フラグメント内のすべての要素は、そのCSSが許す限り、これらの変更を継承します。それ以外の場合、内部要素は無視されます。 カスタムフラグメントを設定することで、一部の内部要素にのみスタイル変更を適用することができます。 詳細については、 フラグメントへのスタイルの適用 を参照してください。
以下の手順に従って、フラグメントのスタイルメニューにアクセスしてください。
-
フラグメントをサポートするページまたはテンプレートの編集を開始します。
-
サイドバーメニューの ブラウザ パネル（
）を開き、目的のフラグメントを選択します。または、ページやテンプレート内の目的のフラグメントをクリックします。
-
［Page Elements］サイドメニューの［Styles］タブをクリックします。
多くのスタイルには、スタイルブックでサポートされるトークンが定義されています。 トークンの値はスタイル・ブックから継承することができ、その場合は表示される値の横に青い点やスタイル・ブックからの値アイコン（
）が表示されます。 詳細については、 スタイルブックの作成 および フロントエンドトークン定義 を参照してください。
Liferay 7.4 U31+/GA31+ では、画面上部のデバイス ボタンをクリックするか、背景画像用に アダプティブ メディア を設定することで、個々のビューポートのフラグメント スタイルを構成できます。 それ以前のバージョンでは、さまざまなデバイスに対してテキストと間隔のスタイルのみを設定できます。
間隔
Liferay 7.4 U47+/GA47+ 用
設定する間隔寸法のボタンをクリックします。 内側のボタンはフラグメントのパッディングを決定し、外側のボタンはマージンを決定します。 このコンテキストでは、 パッディングはフラグメントのフレームとそのコンテンツの間のスペースを指し、マージンはフラグメントのフレームとその周囲のコンテキストの終わりの間のスペースを指します。
パッディングやマージンのボタンをクリックすると、既存のトークンから選択するか、変更値を入力することができます。 定義済みのトークンは、スタイルブックの Spacing カテゴリにある番号付きのスペーサー フィールドから取得されます。 変更値を入力した場合は、その単位を選択します（例： px, rem）。 フィールドを初期値に戻すには、 リセット ボタン（
）をクリックします。
7.4 U46/GA46 以前のバージョンでは、スタイルブックで間隔値を定義する際にピクセル以外の単位を使用している場合 (例: rem)、フラグメント構成時にピクセルに変換されます。
テキストボックス
フラグメントのテキストをフォーマットします。
| 項目 | 説明 |
|---|---|
フォントファミリー ( ) | 要素のフォントを指定します。 |
フォントの太さ ( ) | テキスト内の太字または細字の表示方法を設定します。 |
フォントサイズ ( ) | フォントのサイズを設定します。 |
テキストの色 ( ) | テキストの色を選択します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳細については、 フラグメント構成タイプのリファレンス を参照してください。 |
テキスト配置 (    ) | 要素内のテキストの水平方向の配置を指定します。 左揃え、 中央揃え、 右揃え、または 両端揃え から選択してください。 |
背景
フラグメントの背景を構成します。
| 項目 | 説明 |
|---|---|
| 背景色（） | パレットから背景色を選択します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳細については、 フラグメント構成タイプのリファレンス を参照してください。 |
| 画像ソース | ［Direct］に設定すると、ユーザーは背景画像をアップロードできます。 ［マッピング］に設定すると、ユーザーはドキュメントとメディア、Webコンテンツ、ブログ、またはカテゴリから選択できます。 |
| 背景画像（直接） | ライブラリから画像を選択するか、画像のURLを入力してください。 |
| アイテム (マッピング) | ドキュメントとメディア、Webコンテンツ、ブログ、またはカテゴリから特定の項目に背景をマップします。 選択したら、 アクション （ ）をクリックして、アイテムとその権限を編集したり、使用状況を表示したりできます。 |
| フィールド (マッピング) | 項目のどのフィールドを背景画像に使用するかを決定します。 |
背景を項目のフィールドにマッピングする場合、そのストラクチャー内のフィールドからのみ選択できます。 たとえば、Webコンテンツ項目を選択した場合、そのストラクチャー内の画像フィールドからのみ選択でき、コンテンツ項目内の画像からは選択できません。
枠線
フラグメントの枠線の幅、半径、および色を決定します。
| 項目 | 説明 |
|---|---|
枠線の幅 ( ) | 要素の4つの枠線の幅を設定します。 単位 ボタン ( ) をクリックして、境界線の幅の単位 (例: px、 rem ) を選択します。 リセット ボタン（）をクリックすると、フィールドが初期値に戻ります。 |
境界半径 ( ) | 要素の角の半径を定義し、角を丸くします。 |
| 枠線の色 () | 要素の4つの枠線の色を設定します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳細については、 フラグメント構成タイプのリファレンス を参照してください。 |
効果
フラグメントの不透明度を設定し、影を持たせるかどうかを決定します。
| 項目 | 説明 |
|---|---|
| 不透明度 | 透明度レベルを設定します。 100がデフォルトで、0は透明です。 |
影 ( ) | ボックスの周囲に影を追加します。 小、中、大の影から選択します。 |
Liferay 7.4 U20以前
7.4 U20/GA20以前のバージョンでは、間隔の構成はマージンとパディングのセクションに分かれています。
マージン
フラグメントのフレームとその周囲のコンテキストの終わりの間のスペースを構成します（たとえば、フレームとページの端の間、またはフレームとそのコンテナまたはグリッドの端の間）。
| 項目 | 説明 |
|---|---|
| 上マージン | 要素の上マージンを設定します。 |
| 下マージン | 要素の下マージンを設定します。 |
| 左マージン | 要素の左マージンを設定します。 |
| 右マージン | 要素の右マージンを設定します。 |
パッディング
フラグメントのフレームとそのコンテンツの間のスペースを構成します。
| 項目 | 説明 |
|---|---|
| 上パッディング | 要素の上パッディング（間隔）を設定します。 |
| 下パッディング | 要素の下パッディングを設定します。 |
| 左パッディング | 要素の左パッディングを設定します。 |
| 右パッディング | 要素の右パッディングを設定します。 |