ルックアンドフィールの設定

ルックアンドフィールの設定

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

ウィジェットのルックアンドフィール構成メニューにアクセスするには、

  1. ウィジェットの右上隅にある オプションOptions)をクリックします。

  2. [ Look and Feel Configuration選択し* 。

ルックアンドフィール構成 は6つのタブがあります。

  • 一般的な
  • 文字スタイル
  • 背景のスタイル
  • ボーダースタイル
  • マージンとパディング
  • 高度なスタイリング

カスタマイズを行った後、[ 保存 ]をクリックし、ページを更新して変更を適用します。 変更の効果が気に入らない場合、一部のタブには変更を破棄するための リセット ボタンがあります。

一般設定

[全般]タブには次のオプションがあります。

カスタムタイトルを使用 は、ウィジェットのタイトルの変更を有効にします。 タイトルボックスの値は、ウィジェットのデコレータに表示されます。 タイトルはローカライズ可能であるため、さまざまな言語のタイトルの翻訳を提供できます。

アプリケーションデコレーター :次の3つのデコレータの間で選択できます ベアボーンボーダレス、及び 装飾。 デコレートアプリケーションデコレータがデフォルトです。 ウィジェットのボーダーをオフにすることに注意してください。一部のテーマは、ウィジェットの境界線がオンになっていることを前提としており、オフにすると正しく表示されない場合があります。

図1:ルックアンドフィールの構成メニューの一般タブでは、カスタムウィジェットのタイトルを定義し、ウィジェットのURLを特定のページにリンクし、デコレーターを使用してウィジェットのコントラストオプションを選択できます。

文字スタイル

テキストスタイル は、ウィジェットに表示されるテキストのフォーマットを構成します。 オプションは次のとおりです

フォント: さまざまなフォントを選択します。 テキストを太字、斜体、またはその両方に設定できます。

サイズ: フォントサイズを0.1 emから12 emまで、0.1 em刻みで設定します。 デフォルトは1 emです。

色: 任意の6桁の16進数の色コードに設定します。 テキストボックスをクリックして、カラーパレットを開きます。

アラインメント: セットに センター、又は 詰め

テキスト装飾: に設定し 下線上線、又は 取り消し線。 デフォルトのテキスト装飾は なしです。

図2:テキストスタイルタブでは、ウィジェットに表示されるテキストのフォーマットを設定できます。

ワード間隔: -1 emから0.95 emまで、0.05 em刻みで設定。 デフォルトは0 emです。

行間: 0 emから12 emまで、0.1 em刻みで設定します。 デフォルトは0 emです。

文字間隔: -10ピクセルから50ピクセルまで、1ピクセルの増分で設定します。 デフォルトは0 pxです。

背景のスタイル

[背景のスタイル]タブでは、ウィジェットの背景色を指定します。 テキストスペースを選択すると、背景色を選択するためのカラーパレットが表示されます。または、6桁の16進数のカラーコードを手動で入力できます。

図3:背景のスタイルタブでは、ウィジェットの背景色を指定できます。

ボーダースタイル

[ボーダースタイル]タブでは、ウィジェットのボーダーの幅、スタイル、色を構成します。 これらの各属性について、 Same for All セレクターを有効のままにして、上、右、下、および左の境界線に同じ設定を適用します。

図4:境界線のスタイルタブでは、ウィジェットの両側の境界線の幅、スタイル、および色を指定できます。

ボーダー幅には、%値、em値、またはpx値を指定できます。 ボーダースタイルについては、破線、二重、点線、溝、非表示、インセット、アウトセット、リッジ、またはソリッドを選択できます。 境界線の色には、テキストの色や背景色と同じように、6桁の16進数の色コードを入力できます。 カラーパレットを使用することもできます。

マージンとパディング

「マージンとパディング」タブは、ウィジェットのエッジのマージンとパディングの長さを指定します。 ボーダースタイルの場合と同様に、ウィジェットの各側(上、右、下、左)に同じ設定を適用するには、[ をすべて 一致]セレクターを有効のままにします。

図5:マージンとパディングタブでは、ウィジェットの側面のマージンとパディングの長さを指定できます。

パディングとマージンの両方に、%値、em値、またはpx値を指定できます。

高度なスタイリング

[詳細スタイル]タブには、ウィジェットのLiferay IDやCSSクラスなど、ウィジェットに関する現在の情報が表示されます。

図6:高度なスタイルタブにはウィジェットのLiferay IDが表示され、ウィジェットの外観をカスタマイズするためのCSSコードを入力できます。

ウィジェットとカスタムCSSコードのカスタムCSSクラス名を入力することもできます。 をクリックして、このポートレットのみのCSSルールを追加する または このようなすべてのポートレットにCSSルールを追加する リンクをクリックすると、CSSコードシェルがカスタムCSSテキストボックスに追加されます。 あなたがチェックした場合は I入力時に更新私のスタイルを ボックスを使用すると、編集内容の効果を見ることができるので、あなたのCSSコードは、あなたのウィジェットに動的に適用されます。

次に、ウィジェット間の通信について学びます。

« ウィジェットの構成ウィジェットデータのエクスポート/インポート »
この記事は役に立ちましたか?
1人中0人がこの記事が役に立ったと言っています