ルックアンドフィールの設定
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
ウィジェットのルックアンドフィール構成メニューにアクセスするには、
-
ウィジェットの右上隅にある オプション (
)をクリックします。
-
[ Look and Feel Configuration選択し* 。
ルックアンドフィール構成 は6つのタブがあります。
- 一般的な
- 文字スタイル
- 背景のスタイル
- ボーダースタイル
- マージンとパディング
- 高度なスタイリング
カスタマイズを行った後、[ 保存 ]をクリックし、ページを更新して変更を適用します。 変更の効果が気に入らない場合、一部のタブには変更を破棄するための リセット ボタンがあります。
一般設定
[全般]タブには次のオプションがあります。
カスタムタイトルを使用 は、ウィジェットのタイトルの変更を有効にします。 タイトルボックスの値は、ウィジェットのデコレータに表示されます。 タイトルはローカライズ可能であるため、さまざまな言語のタイトルの翻訳を提供できます。
アプリケーションデコレーター :次の3つのデコレータの間で選択できます ベアボーン、 ボーダレス、及び 装飾。 デコレートアプリケーションデコレータがデフォルトです。 ウィジェットのボーダーをオフにすることに注意してください。一部のテーマは、ウィジェットの境界線がオンになっていることを前提としており、オフにすると正しく表示されない場合があります。
文字スタイル
テキストスタイル は、ウィジェットに表示されるテキストのフォーマットを構成します。 オプションは次のとおりです
フォント: さまざまなフォントを選択します。 テキストを太字、斜体、またはその両方に設定できます。
サイズ: フォントサイズを0.1 emから12 emまで、0.1 em刻みで設定します。 デフォルトは1 emです。
色: 任意の6桁の16進数の色コードに設定します。 テキストボックスをクリックして、カラーパレットを開きます。
アラインメント: セットに 左、 センター、 右、又は 詰め。
テキスト装飾: に設定し 下線、 上線、又は 取り消し線。 デフォルトのテキスト装飾は なしです。
ワード間隔: -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進数のカラーコードを手動で入力できます。
ボーダースタイル
[ボーダースタイル]タブでは、ウィジェットのボーダーの幅、スタイル、色を構成します。 これらの各属性について、 Same for All セレクターを有効のままにして、上、右、下、および左の境界線に同じ設定を適用します。
ボーダー幅には、%値、em値、またはpx値を指定できます。 ボーダースタイルについては、破線、二重、点線、溝、非表示、インセット、アウトセット、リッジ、またはソリッドを選択できます。 境界線の色には、テキストの色や背景色と同じように、6桁の16進数の色コードを入力できます。 カラーパレットを使用することもできます。
マージンとパディング
「マージンとパディング」タブは、ウィジェットのエッジのマージンとパディングの長さを指定します。 ボーダースタイルの場合と同様に、ウィジェットの各側(上、右、下、左)に同じ設定を適用するには、[ をすべて 一致]セレクターを有効のままにします。
パディングとマージンの両方に、%値、em値、またはpx値を指定できます。
高度なスタイリング
[詳細スタイル]タブには、ウィジェットのLiferay IDやCSSクラスなど、ウィジェットに関する現在の情報が表示されます。
ウィジェットとカスタムCSSコードのカスタムCSSクラス名を入力することもできます。 をクリックして、このポートレットのみのCSSルールを追加する または このようなすべてのポートレットにCSSルールを追加する リンクをクリックすると、CSSコードシェルがカスタムCSSテキストボックスに追加されます。 あなたがチェックした場合は I入力時に更新私のスタイルを ボックスを使用すると、編集内容の効果を見ることができるので、あなたのCSSコードは、あなたのウィジェットに動的に適用されます。
次に、ウィジェット間の通信について学びます。