Documentation

Documentation Menu
Go Back

スタイルリファレンス

Liferayのページフラグメントには便利なスタイル設定が含まれているため、Liferay UIを介してルックアンドフィールを構成できます。 これらのオプションの多くはCSSクラスに対応しており、スタイルブックでサポートされるトークンが定義されています。 追加のフラグメント設定オプションについては、 一般設定リファレンス および フラグメントサブ要素リファレンス を参照してください。

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

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

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

    または、ページまたはテンプレートで目的のフラグメントをクリックして、このメニューを開くこともできます。

    注釈

    フラグメント内のサブ要素には、独立したスタイルオプションはありません。

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

編集サイドバーメニューのブラウザパネルでフラグメントのスタイル設定にアクセスします。

多くのスタイルには、スタイルブックでサポートされるトークンが定義されています。 詳細については、Creating a Style Bookおよび スタイルブックトークンの定義 を参照してください。

注釈

Liferay 7.4 バージョン U31+ と GA31+ では、すべてのスタイルをデバイスの種類ごとに独立して設定できます(画面上部のデバイスボタン、または背景画像については アダプティブメディア で設定します)。 それ以前のバージョンでは、テキストとスペーシングスタイルの設定のみデバイスごとに異なる設定が可能です。

間隔

注釈

この機能を使用するには、Liferay DXP 7.4 U21+またはGA21+が必要です。 古いバージョンを使っている場合は、代わりに このセクション を参照してください。

Spacingセクションで矩形を囲む領域をクリックし、Fragmentの周囲の間隔を設定します。 外側のボタンをクリックすると、Fragment のフレームとその周囲のコンテキストの端との間のスペース(margin size)を設定します。これは、Fragment のフレームとページの端との間のスペースや、Fragment のコンテナなどのマージンに影響します。 内側のボタンをクリックすると、Fragment のフレームとコンテンツの間のスペース(padding size)を設定することができます。

Spacingセクションの矩形の周囲をクリックして、Fragmentのマージンやパディングの間隔を設定します。

これらの領域の一つをクリックすると、選択したスペーシングサイズを何ピクセルに設定するか、あらかじめ定義されたオプションのリストが表示されます。 これらのサイズは、スタイルブック を作成または編集する際に、Spacing カテゴリにある番号付きの Spacer フィールドから取得されます

注釈

スタイルブックのスペーシングオプションがピクセル以外の単位(remなど)で定義されている場合、フラグメントのスタイル設定でそれらを選択すると、ピクセル数に相当する値に変換されます。

いずれかの領域をクリックすると、表示されるサイズの一覧から希望の間隔を選択します。

テキストボックス

フラグメントのテキストをフォーマットします。

項目

説明

フォントファミリー

要素のフォントを指定します。

フォントの太さ

テキスト内の太字または細字の表示方法を設定します。

フォントサイズ

フォントのサイズを設定します。

テキストの色

テキストの色を選択します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳しくは、 フラグメント設定タイプのリファレンス を参照してください。

テキストの配置

要素内のテキストの水平方向の配置を指定します。 [] 、 [] 、 [中央揃え] 、または [両端揃え] から選択します 。

背景

フラグメントの背景を構成します。

項目

説明

背景色

パレットから背景色を選択します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳しくは、 フラグメント設定タイプのリファレンス を参照してください。

画像ソース

Direct] に設定すると、ユーザーは背景画像をアップロードできます。 [マッピング] に設定すると、ユーザーはドキュメントとメディア、Webコンテンツ、ブログ、またはカテゴリから選択できます。

背景画像(Direct

ライブラリから画像を選択するか、画像URLを入力します。

項目(マッピング

ドキュメントとメディア、Webコンテンツ、ブログ、またはカテゴリから特定の項目に背景をマップします。 選択したら、アクションボタン(Actions button)をクリックして、項目とその権限を編集するか、その使用法を表示します。

フィールド(マッピング

項目のどのフィールドを背景画像に使用するかを決定します。

注釈

背景を項目のフィールドにマッピングする場合、そのストラクチャー内のフィールドからのみ選択できます。 たとえば、Webコンテンツ項目を選択した場合、そのストラクチャー内の画像フィールドからのみ選択でき、コンテンツ項目内の画像からは選択できません。

枠線

フラグメントの枠線の幅、半径、および色を決定します。

項目

説明

枠線の幅

要素の4つの枠線の幅を設定します。

枠線の角丸

要素の角の半径を定義し、丸みを帯びた角を追加できます。

枠線の色

要素の4つの枠線の色を設定します。 使用可能なカラーパレットは、フラグメント開発者が設定できます。 詳しくは、 フラグメント設定タイプのリファレンス を参照してください。

効果

フラグメントの不透明度を設定し、影を持たせるかどうかを決定します。

項目

説明

不透明度

透明度レベルを設定します。 100がデフォルトで、0は透明です。

ボックスの周りに影を追加します。小、中、大の影から選択できます。

Liferay 7.4 U20とそれ以前

Liferay DXP 7.4 U21 または GA21 より前のバージョンでは、Spacing セクションは MarginPadding セクションに分割されています。

マージン

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

項目

説明

上マージン

要素の上マージンを設定します。

下マージン

要素の下マージンを設定します。

左マージン

要素の左マージンを設定します。

右マージン

要素の右マージンを設定します。

パッディング

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

項目

説明

上パディング

要素の上パディング(スペース)を設定します。

下パディング

要素の下パッディングを設定します。

左パディング

要素の左パッディングを設定します。

右パディング

要素の右パッディングを設定します。

追加情報