Share via

Outlook Web App のテーマの作成

  • [アーティクル]

 

適用先: Exchange Server 2010 SP2, Exchange Server 2010 SP3

トピックの最終更新日: 2016-11-28

ここでは、MicrosoftOffice Outlook Web App のカスタム テーマを作成する方法について説明します。テーマとは、Outlook Web App の外観を制御するメディア ファイルとカスケード スタイル シート (.css ファイル) の集合です。

既定では、MicrosoftExchange Server 2010 が稼働しているコンピューターにクライアント アクセス サーバーの役割をインストールするときに、複数のテーマがインストールされます。

  • .css ファイル -- 色、グラデーション、およびフォントを定義します。

  • 画像 (.png) ファイル -- アイコンおよび他のグラフィック要素を提供します。アイコンを編集する場合は、そのサイズを変更しないでください。いずれかのグラフィック要素のサイズを変更した場合は、変更内容をテストして、要素が所定の範囲に収まることを確認してください。

これらのファイルは、クライアント アクセス サーバーのインストール ディレクトリ内の \Client Access\OWA\<バージョン>\themes に格納されます。各テーマは、テーマのサブディレクトリに格納されます。既存のテーマをコピーし、そのコピー内容を変更すれば、追加のテーマを作成することができます。

注意

Light バージョンの Outlook Web App は、テーマをサポートしていません。

推奨事項

Outlook Web App テーマの要素の多くは、変更することができます。Outlook Web App が不安定になるのを回避するために、カスタム テーマに直接関係のあるファイルだけを変更することをお勧めします。

ベスト プラクティスとして、次のガイドラインに従ってください。

  • 元のファイルを編集する際は常に、あらかじめそのファイルのバックアップ コピーを作成します。

  • アップグレードまたはホットフィックスの適用先となるクライアント アクセス サーバーにカスタム テーマが存在する場合は、そのテーマのバックアップ コピーを作成してから、アップグレードまたはホットフィックスを適用します。

  • 一度に 1 つまたは 2 つだけ変更を行い、その変更内容をテストしてから、さらに別の変更を行います。

  • \Client Access\OWA\<$バージョン$ >\themes\resources 内のファイルは、変更しないでください。それらのファイルで定義されているフォントおよび他の設定は、Outlook Web App 内のすべてのテーマによって使用されます。ファイルを変更してしまうと、すべてのテーマに影響が及ぶおそれがあります。

  • テーマは、各クライアント アクセス サーバーに保存されます。複数のクライアント アクセス サーバーがあり、そのすべてのサーバーでカスタム テーマを利用できるようにするには、各クライアント アクセス サーバーの themes ディレクトリにテーマをコピーする必要があります。

Outlook Web App の表示形式のカスタマイズに関連する他の管理タスクについては、「Outlook Web App サインインおよびサインアウト ページをカスタマイズする」を参照してください。

実行内容

  • 新しい Outlook Web App テーマを作成する

  • カスタム テーマに名前を付ける

  • テーマのカスタム アイコンを作成する

  • カスタム ヘッダーを作成する

  • Internet Explorer 開発者ツールを使用して、特定の色を指定する

  • テーマの色を変更する

  • テーマ内のアイコンおよびロゴを変更する

  • 既定の Outlook Web App テーマを設定する

新しい Outlook Web App テーマを作成する

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「グラフィックス エディター」。

  1. Outlook Web App をホストしているクライアント アクセス サーバー上で、Windows エクスプローラーを開き、Exchange サーバー インストール ディレクトリを見つけます。

  2. \Client Access\OWA\<バージョン>\themes で、望みの配色に近い配色を使ったテーマを見つけてから、そのコピーを作成します。

  3. 先ほど作成したコピーに短い名前を付けます。この名前は、テーマに付ける名前と同じような名前にしてください。

  4. 新しいテーマ フォルダー内にあるファイル (下記) のバックアップ コピーを作成します。テーマを作成するうえで他のファイルを変更しなければならない場合は、そのファイルのバックアップ コピーも作成します。それらのコピーには元の設定が保持されるので、変更を元に戻す必要が生じた場合に備えることができます。

    • premium.css

    • csssprites.png

    • csssprites2.png

    • headerbgmain.png

    • headerbgright.png

  5. 次のセクションの手順に従って、新しいテーマ フォルダー中のファイルを変更し、テーマを作成します。

  6. iisreset/noforce コマンドを使用して、インターネット インフォメーション サービス (IIS) を再起動します。

  7. Outlook Web App にサインインし、新しいテーマを選択して、新しいテーマをテストします。

カスタム テーマに名前を付ける

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「グラフィックス エディター」。

  1. カスタム テーマ フォルダー内の themeinfo.xml のコピーを開きます。

  2. テーマの displayname 値を見つけ、その値を望みのテーマ名に変更します。

    例:テーマに Fourth Coffee という名前を付けるには、ファイルに「theme displayname = "Fourth Coffee"」と記述します。

  3. sortorder 値を変更し、Outlook Web App のテーマ ピッカー内の望みの場所にテーマを配置します。

    例: テーマを先頭に表示されるように設定するには、ファイルに「sortorder = 1」を入力します。

  4. 変更内容を保存してから、themeinfo.xml を閉じます。

  5. プロンプト ウィンドウを開き、コマンド iisreset/noforce を使用して、クライアント アクセス サーバー上で IIS をいったん停止した後で起動します。

  6. 行った変更をテストするには、まず Outlook Web App にサインインし、[オプション] をクリックして、テーマ ピッカー内で新しいテーマを参照します。テーマの一覧が表示されない場合は、MicrosoftInternet Explorer の [インターネット オプション] を使用して一時ファイルを削除し、ブラウザーを最新の情報に更新してから、もう一度テーマ ピッカーを表示し直します。

テーマのカスタム アイコンを作成する

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「グラフィックス エディター」。

テーマのカスタム アイコンを作成するには、themepreview.png ファイルを編集する必要がありますこのファイルは、Outlook Web App のテーマ ピッカー内のテーマ用アイコンです。

  1. 画像編集ツールで themepreview.png を開き、必要な変更を行います。寸法は変更しないようにしてください。画像は 32 x 32 ピクセルです。

  2. 行った変更をテストするには、まず Outlook Web App にサインインし、[オプション] をクリックして、テーマ ピッカー内で新しいテーマを参照します。新しいアイコンが表示されない場合は、Internet Explorer の [インターネット オプション] を使用して一時ファイルを削除し、ブラウザーを最新の情報に更新してから、もう一度テーマ ピッカーを表示し直します。

カスタム ヘッダーを作成する

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「グラフィックス エディター」。

Outlook Web App でカスタム ヘッダーを変更するには、次のファイルを編集する必要があります。それらのファイルを使用して Outlook Web App 上部のヘッダーを作成します。

  • headerbgmain.png

  • headerbgright.png

  • headerbgmainrtl.png (このファイルは、右から左に記述する言語がサポートされている場合に限り、編集する必要があります)。

  1. 画像編集ツールで .png ファイルを開き、必要な変更を行います。寸法は変更しないようにしてください。

  2. ロゴを変更するには、Paint.NET や Photoshop など透明な背景をサポートしている画像編集ツールを使用して csssprites.png を開き、変更します。このファイルには透明な背景が含まれます。Outlook Web App は各アイコンやロゴを csssprites.png 上の所定の場所から取得するので、ファイル内にある画像を移動したりサイズを変更したりしないようにしてください。ファイル内の画像をどれか編集する際には、その新しい画像を置換対象の画像のすぐ上に並べて配置する必要があります。

  3. ファイルの編集を終えたら、変更内容を保存します。

  4. カスタム テーマに加えた変更をテストするには、まず Outlook Web App にサインインし、[オプション] をクリックして、テーマ ピッカーからテーマを選択します。新しいテーマが表示されない場合は、Internet Explorer の [インターネット オプション] を使用して一時ファイルを削除し、ブラウザーを最新の情報に更新してから、もう一度カスタム テーマを選択し直します。

Internet Explorer 開発者ツールを使用して、特定の色を指定する

Internet Explorer 8 および Internet Explorer 9 には開発者ツールが付属していて、特定の要素の色およびフォントを指定したり、それらの値に加えた変更をテストしたりできます。さらに、開発者ツールで該当の情報を使用し, .css ファイル内でそれらの値を指定して、既存の値を変更してテーマをカスタマイズすることができます。

  1. Outlook Web App にサインインし、テーマをどれか選択します。

  2. カスタマイズ対象の要素が表示されるモジュールに移動します。たとえば、メール中のハイライト色をカスタマイズしたい場合、移動先は「メール」モジュールです。

  3. Internet Explorer で、プログラム ツールバーに移動し、[ツール] > [開発者ツール] を順に選択して、F12 キーを押します。

  4. Outlook Web App と [開発者ツール] が重ならないように、ウィンドウを並べ替えます。

  5. 開発者ツールで、ツールバーの左側にある選択矢印をクリックし、Ctrl+B キーを押します。

  6. カスタマイズ対象の Outlook Web App セクションにマウス ポインターを移動します。各要素の上にマウス ポインターを置くと、周りにアウトラインが表示されます。変更する要素のアウトラインが表示されたら、クリックします。

  7. [開発者ツール] ウィンドウ内を確認します。ページの作成に使用されるコード、および選択した要素が、左側のウィンドウ内でハイライト表示されるのを確認できます。

  8. 右側のウィンドウ内で、要素の色を確認します。色は RGB 値 (先頭がシャープ記号 (#) の後に 6 桁の英数字が続く7 桁の文字列) として表現されます。たとえば、白は #ffffff と表現されます。

  9. RGB 値が表示されない場合、上記の一連の手順を実行して、もう一度表示し直してください。

  10. RGB 値が表示されたら、必要な値に変更して、Enter キーを押します。行った変更は、Outlook Web App にほぼ直ちに反映されます。この結果、テーマが変更されることはありません。変更されるのは、ローカルの設定および現在のセッションだけです。

  11. 開発者ツールの右ウィンドウに、該当の値が格納されているファイル、およびそのファイルの場所が表示されます。

  12. 変更する値を確認したら、クライアント アクセス サーバー上でカスタム テーマ用のフォルダーに移動して、premium.css 内の値を変更する必要があります。

注意

さまざまな色の HTML RGB 値については、MSDN Library のカラー テーブルに関するページを参照してください (このサイトは英語の場合があります)。特定の色に一致させる必要があり、その色をオンラインで見つけられない場合は、画像編集ツールを使用して色をサンプリングすると、その HTML RGB 値を特定することができます。開発者ツールには、便利なカラー ピッカー ツールが用意されています。メニューから [ツール] > [カラー ピッカーを表示する] を選択します。使用したい色の RGB 値を確認するには、その色が含まれる要素の上にマウス ポインターを合わせます。

テーマの色を変更する

変更する色を見つけ、必要な色の RGB 値を確認したら、クライアント アクセス サーバー上のプレミアム スタイル シート (premium.css) で該当するプロパティを見つけて、既存の値を新しい値に置き換える必要があります。

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「グラフィックス エディター」。

  1. メモ帳などのテキスト エディターを使用して、カスタム テーマの premium.css ファイルを開きます。

  2. このファイルで、Internet Explorer ツールを使って確認した値を検索します。

  3. この RGB 値を、目的の色の RGB 値で置き換えます。

  4. カスタム テーマに加えた変更をテストするには、まず Outlook Web App にサインインし、[オプション] をクリックして、テーマ ピッカーからテーマを選択します。行った変更が表示されない場合は、Internet Explorer の [インターネット オプション] を使用して一時ファイルを削除し、ブラウザーを最新の情報に更新してから、もう一度カスタム テーマを選択し直します。

テーマ内のアイコンおよびロゴを変更する

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「グラフィックス エディター」。

テーマ内のアイコンおよびロゴを変更するには、Paint.NET や Photoshop など透明な背景をサポートしている画像編集ツールを使用して csssprites.png および csssprites2.png を開き、変更します。それらのファイルには、個々の要素を正しく表示するうえで保持する必要のある透明な背景が含まれています。Outlook Web App は各画像をファイル上の所定の場所から取得するので、ファイル内にある画像を移動したりサイズを変更したりしないようにしてください。ファイル内の画像をどれか編集する際には、その新しい画像を置換前の画像と同一の場所に格納しておく必要があります。

画像を変更するには:

  1. 透明な背景をサポートしている画像編集ツールを使用して、変更したいグラフィック要素が格納されているファイルを開きます。

  2. 元の要素の格納場所とサイズを変えないように注意しながら、変更したい要素を編集します。

  3. ファイルを保存して閉じます。

  4. カスタム テーマに加えた変更をテストするには、まず Outlook Web App にサインインし、[オプション] をクリックして、テーマ ピッカーからテーマを選択します。行った変更が表示されない場合は、Internet Explorer の [インターネット オプション] を使用して一時ファイルを削除し、ブラウザーを最新の情報に更新してから、もう一度カスタム テーマを選択し直します。

既定の Outlook Web App テーマを設定する

既定のテーマを設定した場合、以前に Outlook Web App にサインインして新しいテーマを選択していないユーザーのみが、既定のテーマを使用することになります。

すべてのユーザーが既定のテーマを使用するように設定するには、新たに既定のテーマを設定した上で、テーマ選択を無効にする必要があります。

シェルを使用して Outlook Web App の既定のテーマを設定する

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「Outlook Web App 仮想ディレクトリ」。

この例では、Outlook Web App の既定のテーマを設定します。ここでは、サーバー名が "FourthCoffee"、仮想ディレクトリ名が "owa"、Web サイト名が "Default Web site"、およびテーマが "Custom" という名前のフォルダー内にあることを想定しています。

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom

構文およびパラメーターの詳細については、「Set-OwaVirtualDirectory」を参照してください。

シェルを使用して Outlook Web App テーマ選択を無効にする

この手順を実行する際には、あらかじめアクセス許可を割り当てる必要があります。必要なアクセス許可の一覧については、以下を参照してください。「クライアント アクセス許可」の「Outlook Web App 仮想ディレクトリ」。

この例では、Outlook Web App のテーマ選択を無効にします。ここでは、サーバー名が "FourthCoffee"、仮想ディレクトリ名が "owa"、および Web サイト名が "Default Web site" であることを想定しています。

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -themeselectionenabled $false

また、次の例に示すように、両方のコマンドを同時に実行することもできます。

set-owavirtualdirectory -identity "fourthcoffee\owa (default web site)" -defaulttheme Custom -themeselectionenabled $false

構文およびパラメーターの詳細については、「Set-OwaVirtualDirectory」を参照してください。

その他のタスク

テーマを作成した後で、Outlook Web App サインインおよびサインアウト ページをカスタマイズする 操作も実行できます。

 © 2010 Microsoft Corporation.All rights reserved.