スタイルリファレンス

コレクション表示フラグメントを除くすべてのフラグメントには、スタイル設定セクションがあります。 スタイル設定を使って、フラグメントのルックアンドフィールを設定します。 これらのオプションの多くはCSSクラスに対応しており、スタイルブックでサポートされるトークンが定義されています。 追加のフラグメント設定オプションについては、 一般設定リファレンス および フラグメント サブ要素リファレンス を参照してください。

注

デフォルトでは、スタイル設定はフラグメント全体に適用されるため、フラグメント内のすべての要素は、そのCSSが許す限り、これらの変更を継承します。それ以外の場合、内部要素は無視されます。 カスタムフラグメントを設定することで、一部の内部要素にのみスタイル変更を適用することができます。 詳細については、 フラグメントへのスタイルの適用 を参照してください。

次の手順に従って、フラグメントのスタイル メニューにアクセスします。

1. フラグメントをサポートするページまたはテンプレートの編集を開始します。

2. サイドバー メニューの ブラウザ パネル () を開き、目的のフラグメントを選択します。

   または、ページやテンプレート内の目的のフラグメントをクリックします。

3. ［Page Elements］サイドメニューの［Styles］タブをクリックします。

多くのスタイルには、スタイルブックでサポートされるトークンが定義されています。 トークンの値はスタイル ブックから継承できます。継承されている場合は、表示されている値の横に青いドットまたはスタイル ブックからの 値 アイコン () が表示されます。 詳細については、 スタイルブックの作成 および フロントエンド トークンの定義 を参照してください。

注

Liferay 7.4 U31+/GA31+では、画面上部のデバイスボタンをクリックするか、背景画像に アダプティブメディア を設定することで、個々のビューポートのフラグメントスタイルを設定できます。 それ以前のバージョンでは、さまざまなデバイスに対してテキストと間隔のスタイルのみを設定できます。

間隔

Liferay 7.4 U47+/GA47+の場合

設定する間隔寸法のボタンをクリックします。 内側のボタンはフラグメントのパッディングを決定し、外側のボタンはマージンを決定します。 このコンテキストでは、 パッディングはフラグメントのフレームとそのコンテンツの間のスペースを指し、マージンはフラグメントのフレームとその周囲のコンテキストの終わりの間のスペースを指します。

パッディングやマージンのボタンをクリックすると、既存のトークンから選択するか、変更値を入力することができます。 定義済みのトークンは、スタイル ブックの 間隔 カテゴリの番号付きスペーサー フィールドから取得されます。 変更値を入力した場合は、その単位を選択します（例： 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以前のバージョンでは、間隔の構成はマージンとパディングのセクションに分かれています。

マージン

フラグメントのフレームとその周囲のコンテキストの終わりの間のスペースを構成します（たとえば、フレームとページの端の間、またはフレームとそのコンテナまたはグリッドの端の間）。

項目	説明
上マージン	要素の上マージンを設定します。
下マージン	要素の下マージンを設定します。
左マージン	要素の左マージンを設定します。
右マージン	要素の右マージンを設定します。

パッディング

フラグメントのフレームとそのコンテンツの間のスペースを構成します。

項目	説明
上パッディング	要素の上パッディング（間隔）を設定します。
下パッディング	要素の下パッディングを設定します。
左パッディング	要素の左パッディングを設定します。
右パッディング	要素の右パッディングを設定します。

関連トピック

• コンテントページの使用
• フラグメントの使用
• 新しいスタイルブックの作成
• フロントエンドトークンの定義