| Oracle® Fusion Middleware Oracle WebCenter Portalでのポータルの構築 11gリリース1 (11.1.1.8.3) E50013-03 |
|
 前 |
 次 |
この章では、ページ・テンプレートやスキンなど、WebCenter Portalで使用可能な各種機能を使用してポータルのルック・アンド・フィールを作成する方法について説明します。この章ではまた、モバイル機器での表示用にポータルのルック・アンド・フィールを最適化する方法についても説明します。
この章の内容は、次のとおりです。
|
権限: この章は、WebCenter Portalの機能を使用して、組織内のポータルに説得力のあるルック・アンド・フィールを作成しようとするWeb開発者を対象としています。 ポータルのルック・アンド・フィールの制御機能を使用するには、適切なアセットに対するアプリケーション・レベルの |
Web開発者の役割の1つは、すべてのポータルに適用できる、その企業ならではの強い影響力のあるルック・アンド・フィールを作成して、組織のWebという存在に一貫したブランド・イメージの外観を提供することです。
ルック・アンド・フィールの作成には、次のような複数のテクノロジが関与しています。
HyperText Markup Language (HTML)は、WebページおよびWebブラウザに表示できるその他の情報を表示するための主要言語です。
Cascading Style Sheets (CSS)は、一貫性のあるルック・アンド・フィールを確認し、フォント、色、スペースなどのスタイルをWebドキュメントに追加するためのシンプルなメカニズムを提供します。CSSを使用するとコンテンツをプレゼンテーションから分割できるため、アクセシビリティが向上し、異なる状況(携帯電話やスクリーン・リーダー機器など)に対してコンテンツを容易にレンダリングできます。
JavaScriptはスクリプト言語で、通常、強化されたユーザー・インタフェースと動的なWebサイトを作成するためにWebブラウザの一部として実装されます。
Oracle Application Development Framework (ADF)は、開発者に対してJava EEアプリケーション開発をより速くより簡単にすると同時に、実証済のソフトウェア・パターンを利用して、開発するアプリケーションを確実にスケーラブルで高性能なものにします。
式言語(EL)は、Java EE Webコンテナに格納されたアプリケーション・データの取得および操作のための演算子を提供することで、Webアプリケーション・データを使用する簡単な方法を提供します。
WebCenter Portalには、これらのテクノロジを使用してアプリケーション、個々のポータル、ページ、コンポーネントおよびコンテンツのルック・アンド・フィールを制御する、次の機能が備わっています。
ページ・テンプレートは、ページの構造とレイアウトを定義します。ページ・テンプレートには、通常、ページ上部のヘッダー、ページ上部または重要なリンク先のリンクのサイドバーのナビゲーション構造、コンテンツ領域、ページ下部のフッターなどが含まれます。
ページ・テンプレートの詳細は、第21章「ページ・テンプレートの使用」を参照してください。
ナビゲーションは、ポータルまたは外部のリソースのコンテンツにアクセスするためのリンクを提供します。たとえば、ポータルには、各ページ上部に沿って並ぶ一連のタブやメニュー、各ページの横にあるツリー構造やリンクのリスト、ユーザーがポータル内の現在の場所にたどり着くまでのパスを示すブレッドクラム・トレイルなどが含まれます。
ナビゲーションの詳細は、第22章「ポータル・ナビゲーションの使用」を参照してください。
スキンは、色、フォント、その他の外観を定義して、個々のポータルやWebCenter Portalアプリケーション全体を個性的にしたり、特定のブランド設定を提供します。
スキンの詳細は、第24章「スキンの使用」を参照してください。
ページ・スタイルは、新しく作成するページのレイアウトを記述し、そのページでサポートされるコンテンツのタイプも決定できます。たとえば、Wikiページ・スタイルでは、インスタントwikiが用意されていて、「空白」ページ・スタイルにはそのスタイルに基づいたページにユーザーが追加できるコンテンツのタイプに対する制限がほとんどありません。
ページ・スタイルの詳細は、第25章「ページ・スタイルの使用」を参照してください。
コンテンツ・プレゼンタ表示テンプレートは、選択したコンテンツのスタイルとレイアウトを定義します。
コンテンツ・プレゼンタ表示テンプレートの詳細は、第26章「コンテンツ・プレゼンタ・テンプレートの使用」を参照してください。
この項には次のトピックが含まれます:
ページ・テンプレートの設計で最大の問題は、テンプレートとページ・コンテンツの両方の要素でコンポーネントをどのようにレイアウトするかという点です。基本的に次の2つの方針があります。
フロー・レイアウト: コンポーネントには固定サイズがあり、隣合せに配置されます。必要に応じて、ブラウザにスクロール・バーが表示されます。
ストレッチ・レイアウト: コンポーネントはページ上の使用可能なスペースいっぱいに表示されるようストレッチされます。必要に応じて、個々のコンポーネントにスクロール・バーが表示されます(つまり、1ページ上に複数のスクロール・バーが表示されることがあります)。ストレッチにより、表示可能な領域を最大限使用できるようになります。タブ、アコーディオン、メニュー、ポップアップを使用して、表示可能な領域を実質的に拡張します。
ほとんどのWebサイトでフロー・レイアウトが使用されており、ユーザーが親しみやすく感じる見込みが高いため、フロー・レイアウトを使用することもできます。しかし、種類が豊富なダッシュボードとアプリケーション向けの場合やデスクトップ操作を模倣する必要がある場合には、ストレッチ・レイアウトが優れています。同一ページでフロー・レイアウトとストレッチ・レイアウトを結合することも可能です。
垂直方向の動作
使用する方針に応じて、次のようにページの垂直方向の動作が異なります。
レイアウト・フロー:
ヘッダーまたはフッターは常に表示されているわけではありません
ページの高さはコンポーネントに基づいて計算されます
コンテンツが垂直方向にストレッチされることはありません
ブラウザにスクロール・バーが表示されることもあります
ストレッチ・レイアウト:
ヘッダーおよびフッターは常に表示されます
ページの高さはブラウザ・ウィンドウにより決まります
コンテンツは垂直方向にストレッチされます
コンテンツにスクロール・バーが表示されることもあります。
水平方向の動作
使用する方針に応じて、次のようにページの水平方向の動作が異なります。
レイアウト・フロー:
ページにサイド・バー(左側のナビゲーションなど)がある場合でも、サイド・バーは常に表示されているわけではありません
ページの幅はコンポーネントに基づいて計算されます
一部のコンポーネントは、既存スペースを満たすようにストレッチされることがあります
ブラウザにスクロール・バーが表示されることもあります
ストレッチ・レイアウト:
ページにサイド・バー(左側のナビゲーションなど)がある場合、サイド・バーは常に表示されています
ページの幅はブラウザ・ウィンドウにより決まります
コンテンツは水平方向にストレッチされます
コンテンツにスクロール・バーが表示されることもあります。
ページ・レイアウトのその他の考慮事項
ページ・テンプレートのレイアウトを定義する際には、次のような複数の検討事項があります。
テンプレート開発者は、コンテンツ・ファセットをページのフロー領域またはストレッチ領域に配置するかどうかを制御しますが、コンテンツを制御することはできません。したがって、ページ・コンテンツ作成者は、レイアウトの方針を認識して考慮する必要があります。
ページ・テンプレートは変更される可能性があるため、ページの作成およびカスタム・コンポーネントの設計では、フローおよびストレッチのコンテキストで適切に表示されるようにします。
トリニダードまたはHTMLタグを使用することも可能ですが、ADF Facesコンテナを使用してページ・レイアウトを作成することをお薦めします。
ブロック・レイアウト(図60-1):
af:panelStretchLayout: 「top」、「start」、「center」、「end」および「bottom」を持つストレッチ・フレーム
af:panelSplitter: ユーザーによる変更が可能な2つのセクションに分割されたストレッチ・ボックス
af:panelDashboard: ストレッチされた、ボックスのタイル状構造
af:panelGroupLayout: 一連のコンポーネント(デフォルト、水平、垂直、スクロール構造)
af:panelBorderLayout: 「top」、「start」、「center」、「end」および「bottom」を持つフロー・フレーム
trh:tableLayout、trh:rowLayoutおよびtrh:cellFormat: フローRaw HTML表構造
レイアウト・コンポーネントごとの外観の詳細は、ADF Facesリッチ・クライアントの次のデモ・オンライン・ツールを参照してください。
http://jdevadf.oracle.com/adf-richclient-demo/faces/visualDesigns/index.jspx
コンポーネントを表示し、「ソースの表示」メニューから「ページ」または「ページ・テンプレート」を選択し、使用されているタグと属性およびコンポーネント構造のページの外観を確認します。
ストレッチ・レイアウトの作成:
作成する外部構造に格納されたコンテナは、ストレッチでき、その子をストレッチできます。documentコンポーネント内部のdecorativeBox、panelStretchLayout、panelSplitterなどのコンテナを使用して、ストレッチ可能な外部フレームを作成します。
|
注意: 各レイアウトまたはパネル・コンポーネントのタグ・ドキュメントでは、ストレッチできるかどうか、およびそのコンポーネントの「形状管理」ドキュメントでストレッチを実現する方法が識別されます。一部のコンポーネントには、子をストレッチさせるかどうかを決定する属性が含まれています。例: |
フロー・アイランドを作成します。ストレッチ可能な外部構造の内部に、フロー(ストレッチでない)コンポーネントのアイランドを作成します。これをストレッチからフローへ遷移させるには、この遷移ではストレッチ対象となっていてもその子をストレッチさせないため、panelGroupLayoutをlayout="scroll"またはlayout="vertical"と一緒に使用します。
ストレッチ・コンポーネントをフロー・アイランドに埋め込まないでください。
フロー・コンテナ内部では、何かを垂直方向にストレッチ(高さにパーセント値を使用して)させないでください。
多数のリーフ・コンポーネントは、分離された状態では意味をなしません。たとえば、一連の入力コンポーネントがある場合、それらを単にpanelGroupLayoutに配置することはないでしょう。ラベルとフィールドがそろうようにpanelFormLayoutに配置すれば、ずっと使いやすくなります。
positionスタイルを使用しないでください。
|
注意: 次のコンポーネントは、信頼できる状態でストレッチできないコンポーネントのごく一部です。
|
フロー・レイアウトの作成:
panelGroupLayoutやpanelBorderLayoutなどの非ストレッチ・コンテナを使用します。panelBorderLayoutを使用して、HTML表のコンポーネントの近似値を求めることができます。
スクロール・バーが複数になることを避けるため、layout="vertical"を使用するかわりに、スクロールのpanelGroupLayoutコンポーネントをネストしないでください。
大半のストレッチ可能なADFコンポーネントは、dimensionsFrom="auto"でのフロー・コンテキストでも機能します。
コンポーネントを水平にストレッチさせるには、styleClass="AFStretchWidth"を(inlineStyle="width:100.0%"のかわりに)使用します。
af:divの近似値を求める手順は次のとおりです。
<af:group id="pt_navbarright" rendered="#{securityContext.authenticated}">
<div id="navbarright" class="floatright">
right side menu stuff...
</div>
</af:group>
af:groupはDOM構造を保護します。divにより、CSSスタイルと配置を適用できます。
カスタマイズ可能なコンポーネントの使用:
panelCustomizableで、layout="auto"を使用してその子をストレッチするかどうかを調べます。
フロー・レイアウトまたはストレッチ・レイアウトをサポートするには、showDetailFrameをstretchChildren="auto"と一緒に使用します。
次のメカニズムを使用して、コンポーネントの外観をカスタマイズできます。
カスタム・スタイルには、宣言的な手法(テーマ、ヒント、その他の属性)を使用します。たとえば、af:documentのtheme="dark"を使用してページをダーク・ブルーにします。
テーマ別のdecorativeBoxコンポーネントを使用して、サンプル・スキンで表示されるようなビジュアルな特徴と装飾境界線を持つページのレイヤーを編成します。すべてのスキンに代替テーマがあるわけではないため、区別が確認できないことがあります。decorativeBoxコンポーネントが異なる色の背景で表示されない場合、代替テーマの定義を持つスキンを使用していることが分かっているときには、falseに設定されているoracle.adf.view.rich.tonalstyles.ENABLEDに対するweb.xml context-paramの設定をしていない可能性があります。
ご使用のドキュメント・コンポーネントにもテーマ属性が備わっているため、それを使用してページの主要な背景のスタイルを変更できます。
既存のスキンに必要なすべてが備わっていない場合には、一貫した外観の変更に対してカスタム・スキンを使用します。
インスタンス固有の代替スタイルには、styleClass属性を使用します。対応するスタイル定義は、カスタム・スキン、ドキュメント・コンポーネントのmetaContainerファセット、リソース・タグにより提供されるスタイルなどの管理しやすい場所に保存します。
最後の手段として、inlineStyle、contentStyle、labelStyleなどのコンポーネントの属性を使用します。これらの属性は、宣言性は少なく、管理が難しく、より多くのページのRaw HTMLサイズを使用し、前述のメカニズムを使用している場合には不要なこともあります。
スタイルはWebブラウザで直接処理されるため、非常に強力ですが、宣言性が少なくエラーを発生しやすいという代償を伴います。ブラウザではすべての要素のすべてのスタイルがサポートされていませんし、スタイルの特定の組合せでは明確でない結果となります。次のスタイル構成は回避してください。
%単位のheight値を持つinlineStyle
90%から100%のwidth値を持つinlineStyle (かわりにstyleClass="AFStretchWidth"またはstyleClass="AFAuxiliaryStretchWidth"を使用してください)
height、topおよびbottom値を持つinlineStyle
width、leftおよびright値を持つinlineStyle
position値を持つinlineStyle
親コンポーネントによりストレッチされた子の場合、width値またはheight値を持つinlineStyle
スクロールバーの設置は、フロー・アイランド・コンテンツの周囲にのみとなります。ストレッチ外部フレームからフロー・アイランドへの切替え用遷移コンポーネントには、panelGroupLayoutにlayout="scroll"を含めることをお薦めします。このpanelGroupLayoutのコンテンツが割り当てられたスペースの大きさに合わない場合、ブラウザではスクロールバーが必要かどうかが判断され、自動的に追加されます。
スクロールpanelGroupLayoutコンポーネントをネストすると、ユーザーには複数のスクロールバーが表示されるため、ネストしないでください。また、これはストレッチ領域からフロー領域への遷移でのみ使用され、フロー領域内部にストレッチ領域がないため、通常、ネストされたスクロールバーを使用して終了できません。最もよいのは、ユーザーが検索している項目を表示するためにスクロールする必要がある領域の数を、最小限にすることです。ユーザーが必要とするスクロールについて十分検討してください。不要なスクロールバーが存在する場合、そのpanelGroupLayoutのlayout属性をverticalに変更する必要がある場合があります。
Internet Explorer 7.0.5730.11に対して報告されているスクロールに関する既知の問題があります。この問題は、完全なIE8レンダリング・モードで実行する場合には、Internet Explorer 8でのみ解決されます。スクロール・ボックスに含まれたボックスと同じ幅に設定されたコンテンツが存在し、そのコンテンツが明らかに垂直スクロールバーを必要とする大きさである場合、不要な水平のスクロールバーが追加されます。ブラウザでは垂直スクロールバーを備えるコンテンツの幅の調整に失敗すると、水平スクロールバーが表示されます。この水平スクロールバーにより、垂直スクロールバーの幅と等しいわずかなスペースがスクロールされます。この問題では、90%から100%までの幅を指定しないようお薦めします。それより小さな幅では、通常、不具合は発生しません。回避策(このページに表示されたとおり)では、ブラウザでは垂直スクロールバーが収まるだけのスペースが確保されるように、コンテンツの幅を全幅より小さく設定します。便宜上、AFStretchWidthという名前のstyleClassがスキン内に作成され、このstyleClassを持つコンポーネントは、Internet Explorer 7では幅を縮小され、他のブラウザでは全幅になります。細い補助列に対してさらに小さなサイズが必要な場合、かわりにAFAuxiliaryStretchWidthを使用するか、次のように独自のスキンで同様のスキンの定義を作成できます。
@agent ie and (version: 7.0) {
.AFIEOverflowWorkaround75 {
width: 75%;
}
}
ブラウザのCSSボックス・モデル・ルールのため、コンポーネント上の余白、境界線、パディングの定義が複雑になる場合があります。様々なメカニズムをパディングに適用するには、ナビゲーション-マスター-ディテール、タイル・フロー、タイル・ストレッチのレイアウト・パターン例を参照してください。
多くの場合、このようなスタイルを適用するには、複数のコンポーネントを一緒に使用する必要があります。スクロール領域では、追加のpanelGroupLayoutにlayout="vertical"でパディングを定義して、外側のlayout="scroll" panelGroupLayout内部に追加する必要があります。ストレッチ領域では、panelStretchLayout内のコンポーネントを、パディング用のtopファセット、startファセット、endファセットおよびbottomファセットにスペーサを追加して、ラップする必要がある場合があります。
WebCenter Portalのスキンを作成する際、それを大まかな観点と細かい観点から見ることができます。大まかなレベルでは、背景やページ中央などのページ内の多数の大きな要素にごく基本的なスタイル技術を使用して、特定の企業ブランドに対するルック・アンド・フィールを容易に施すことができます。細かいレベルでは、ページ内の特定のコンポーネントとコントロールにスタイルを適用できます。スキンを開発する際に最も効率的な方法は、大まかな要素の定義から開始し、次に細かいスタイルを使用して全体のルック・アンド・フィールを企業ブランドに沿って調整します。
多くの場合、スタイルのハイブリッド・モデルが非常に効果的です。大まかな要素(ページ背景、ボディの主要部分など)を取り込んでそれらとともに従来のCSS手法を使用すると、ADFスキンの使用が特定的になっても、共に機能してWebCenter Portalの外観全体を生成します。
ハイブリッド手法の一例では、WebCenter Portalで技術を使用して、順序づけられていないリストとリスト項目を使用するメニューを生成し、次に従来のCSSをそれらに適用します。WebCenter Portalのナビゲーション・モデルが有効な場合でも、従来のADFスキン作成ではなく、標準CSSを使用しています。
図60-2に図示されたCSSナビゲーションでは、ナビゲーション内の種々の項目を、WebCenter Portalでクライアント向けにレンダリングされるマークアップに配置するために、WebCenter Portalに用意された式言語を使用します。その際には、従来のCSS技術を使用する大まかなスタイルを適用して、メニューのスタイルを形作ります。
式言語(EL)を使用すると、テンプレート・デザイン内のナビゲーション用の様々なオブジェクトにアクセスできます。EL内のループは単純で、コーディングはページ・テンプレートとインラインで実行されます。通常のHTMLを直接ループ・マークアップに混在させることができます。
応答するWebデザインを使用すると、Webページは異なるフォーム・ファクタに柔軟に適応できるようになります。それはWebの世界でWebコンテンツをデスクトップ・ブラウザ、タブレット、スマートフォンに配信する1つの方法として始まりました。
これらの技術により、HTML/CSSマークアップから類似のルック・アンド・フィールを持つポータルへと迅速に進むことができます。また、モバイル機器から表示する際のポータルの操作性も向上します。
スマート・フォンやタブレット経由でWebCenter Portalにアクセスできるようにするには、次のような方法があります。
最も簡単な解決策は、ブラウザベースのオプションを持つ既存のWebCenter Portalアプリケーションを利用することです。この方法だと、WebCenter Portalが機器のネイティブ・ブラウザ内で確実にレンダリングされるようにする以外は、変更の必要はありません。ただし、この解決策ではユーザーは最善の操作性を得ることができません。
デバイス固有のテンプレートやページを構成して、デバイスのプロファイルに基づいてHTMLを生成することで、既存のWebCenter Portalアプリケーションを利用することも可能です。この解決策では、ユーザーの操作性は多少向上します。
ユーザーの操作性を最善にするには、ADFモバイルまたはネイティブiOSまたはAndroid SDKを使用して開発されたネイティブ・アプリケーションを作成できます。これにより最善のユーザーの操作性が得られますが、多くの先行開発時間とサポートも必要になります。
使用可能なビューポートに適応するアプリケーションを設計することで、適応できるプログラミング技術を使用できます。
ポータルを設計する際には、タブレット向けに設計し、デスクトップ向けにそのデザインを拡大します。スマート・フォンには、個々のデザインを作成する必要があります。これらのデザインは、ページ・テンプレートにより実現します。
モバイル機器を設計する際に実行する最も重要な2つの点は、次のとおりです。
viewportメタ・タグを設定して、モバイルのブラウザで良好な初期ズームを設定します。
ページ・テンプレートのページ定義のパラメータ・セクションで、viewportパラメータを次のように設定します。
<parameter id="viewport" value="width=device-width, initial-scale=1.0"/>
ページ・テンプレートのソース・コードの編集方法の詳細は、第20.4.2項「アセットのソース・コードの編集」を参照してください。
viewportパラメータの値は、viewportメタ・タグのcontent属性の値として使用されるので、推奨値の"width=device-width, initial-scale=1.0"に設定すると、次のメタ・タグがページに追加されます。
<meta name="viewport" content="width-device, initial-scale=1.0"/>
max-widthをイメージに設定して、イメージをモバイルのブラウザにうまく合わせます。
次のコードをCSSに追加します。
img, object {
max-width: 100%;
}
ADFスキンはポートレットにより機能して共通のルック・アンド・フィールを実現しますが、多数のスタイルをHTMLに挿入するので、必ずリセット・スキンを作成して-tr-inhibitプロパティを使用します。
リセット・スキンは、次のようになります。
body {
color: inherit;
font: inherit;
}
af|document {
-tr-inhibit: all;
}
af|commandLink {
-tr-inhibit: all;
}
af|goLink {
-tr-inhibit: all;
}
af|inputText::content {
font: inherit;
}
リセット・スキンを設定して、図60-3で示すようにV1.2 ADFスキンから設定を継承します。
CSS3メディア問合せを使用すると、小さいスクリーンへの適合、向きの調整など、特定の状況専用にCSSルールを記述できます。CSS3メディア問合せの例は、次のとおりです。
@media only screen and (max-width: 480px) {
#content {
margin: 0;
}
#navbarright {
display: none;
}
}
ADF Rich Facesには、次のモバイル・サポートが用意されています。
iPadのサポート
HTMLによるDVTコンポーネントのレンダリング
タッチ・ジェスチャーのサポート
ページ・サイズの最大20%の縮小
適応する技術によりWebおよびタブレットのデザインを稼働できますが、デザインを電話向けに調整する必要があります。特定のスマート・フォンのユースケースに重点を置きます。個々のサイトと個々のテンプレートを作成し、コードに組み込んでスマート・フォンを検出して適切なデザインにリダイレクトします。
WebCenter Portalのindex.htmlに追加できる簡単なJavaScriptリダイレクトの例は、次のとおりです。
<script>
car Browser = navigator.userAgent;
if (Browser.indexOf('iPad') > 0)
{
location.replace('http://<host>/CustomerAccount/faces/pages_home');
}
else if (Browser.indexOf('iPhone') > 0)
{
location.replace('http://<host>/CustomerAccount/faces/PhonePage.jspx');
}
else {
location.replace('http://<host>/CustomerAccount/faces/pages_home');
}
</script>
WebCenter Portalのようこそページのモバイル・バージョンへのリンクを記載したメッセージを表示するアプリケーション内の手動リダイレクトの例は、次のとおりです。
#{requestContext.agent.platformName=='windows' ? '' :
'Click <A HREF="http://<host>/myApp/faces/PhoneWelcome.jspx">here</A> to view the mobile site.' }
モバイル機器をWebCenter Portalのモバイル・バージョンに自動的にリダイレクトするアプリケーション内のリダイレクトの例は、次のとおりです。
#{requestContext.agent.platformName=='windows' ? '' :
'<META HTTP-EQUIV="Refresh" CONTENT="0; URL=http://<host>/myApp/faces/PhoneWelcome.jspx">' }
|
関連項目: デバイス設定を使用して、異なるモバイル機器に使用するページ・テンプレートおよびスキンを決定する方法の詳細は、第9章「ポータルのデバイス・グループの管理」を参照してください。 モバイル機器での表示用にデザインした代替ページを作成する方法の詳細は、第12.3項「デバイス・グループのページ・バリアントの作成」を参照してください。 |
ChromeおよびFirefoxでビジュアル化機能と調査機能を使用すると、作業のスタイルを形作るために必要なCSSで非常に速く作業できるようになります。さらにCSS3には、従来はイメージで実現する必要があったビジュアルを提示できる、非常に強力な機能があります。たとえば、CSS3ジェネレータを使用して、ドロップ・シャドウやグラデーションなどのデザインを効率的に処理できます。最後に、JQueryなどを使用すると、Document Object Modelを操作してクライアント側の技術を使用して、どのような変更も実現できます。
図60-4は、Google Chrome内での調査機能の例を示しています。上部右側の隅にある「ログイン」リンクにカーソルを合わせると、ページのこの特定の要素に適用されているスタイルについて表示されます。これにより、簡単に特定のコンポーネントに対するスキンに戻って調整できるようになります。これは、細かいスキンの例です。
