Documentation

スタイルリファレンス

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

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

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

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

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

    注釈

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

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

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

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

マージン

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

フィールド

説明

上マージン

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

下マージン

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

左マージン

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

右マージン

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

パッディング

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

フィールド

説明

上パディング

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

下パディング

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

左パディング

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

右パディング

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

テキスト

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

フィールド

説明

フォントファミリー

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

フォントの太さ

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

フォントサイズ

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

テキストの色

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

テキストの配置

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

背景

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

フィールド

説明

背景色

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

画像ソース

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

背景画像(Direct

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

項目(マッピング

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

フィールド(マッピング

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

注釈

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

枠線

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

フィールド

説明

枠線の幅

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

枠線の角丸

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

枠線の色

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

効果

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

フィールド

説明

不透明度

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

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