Outlook Web App のテーマを作成する

[アーティクル]
04/04/2023

製品: Exchange Server 2013

テーマは、Microsoft Outlook Web Appで使用される背景色、フォント、強調表示の色、アイコン、ヘッダーを定義します。各テーマは、\Client Access\OWA\prem\version\resources\theme のインストールディレクトリの Microsoft Exchange サーバーに格納されているメディアファイルとカスケードスタイルシート (.css) ファイルのコレクションです。各テーマは、\theme の独自のサブディレクトリに格納されます。

既定のテーマは、\Client Access\OWA\prem\version\resources\themes\base にあります。各テーマフォルダーには、テーマを定義するために必要なすべてのファイルが含まれています。これらのファイルには、CSS ファイル、グラフィックス、テーマの名前を定義する .xml ファイルが含まれます。 1 つのテーマのすべてのファイルを新しいフォルダーにコピーし、必要に応じてそれらのファイルを変更することで、追加のテーマが作成されます。

既定では、2013 Exchange Serverインストールすると、次のように複数のテーマがインストールされます。

CSS (.css) ファイルは、色、グラデーション、フォントを定義します。
画像 (.png) ファイルには、アイコンやその他のグラフィック要素が用意されています。いずれかのアイコンを編集する場合は、サイズを変更しないでください。グラフィック要素のサイズを変更する場合は、変更をテストして、要素がまだ正しく一緒に収まることを確認します。

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

テーマを作成したら、サインイン、言語の選択、エラーページOutlook Web Appカスタマイズすることもできます。

注:

Outlook Web Appのライトバージョンでは、テーマはサポートされていません。

警告

Outlook Web Appをサポートする複数のサーバーがある場合は、カスタムテーマを各サーバーにコピーする必要があります。カスタムテーマのバックアップコピーも作成する必要があります。 Exchange を再インストールまたはアップグレードする場合、テーマフォルダーにあるすべてのファイルは上書きされます。再インストールまたはアップグレードが完了したら、テーマを適切なフォルダーにコピーし直す必要があります

カスタムテーマの作成を開始する前に、変更するすべてのファイルのバックアップコピーを作成します。

はじめに把握しておくべき情報

このタスクを完了するための推定時間: 60 分。
この手順を実行する際には、あらかじめアクセス許可が割り当てられている必要があります。必要なアクセス許可を確認するには、「クライアントとモバイルデバイスのアクセス許可」トピックの「仮想ディレクトリのOutlook Web App」エントリを参照してください。
これらの手順を実行するには、ローカルサーバー管理者アクセス権が必要です。
既定の色を変更するにはテキストエディター、画像を変更するにはグラフィックエディターが必要です。特定の色に一致させる必要があり、その色を「色の一覧」で見つけられない場合は、画像編集ツールを使用して色をサンプリングすると、その HTML RGB 値を特定することができます。
ベストプラクティスとして、Outlook Web App テーマを変更または作成するときは、いつでも次のガイドラインを使用することをお勧めします。
- 既存のテーマを編集する場合は、編集を開始する前に元のファイルのバックアップコピーを作成します。
- フォルダー \Client Access\OWA\prem\version\resources\themes\base またはその中のファイルは削除しないでください。
このトピックの手順で使用可能なキーボードショートカットについては、「Exchange 管理センターのキーボードショートカット」を参照してください。

ヒント

問題がある場合は、 Exchange のフォーラムで質問してください。 Exchange Serverのフォーラムにアクセスしてください。

手順 1: 新しいOutlook Web App テーマを作成する

まず、新しいテーマのフォルダーを作成し、既存のテーマから新しいフォルダーにファイルをコピーします。

ローカルの Administrators グループに委任されたメンバーシップを使用して、Outlook Web App仮想ディレクトリをホストしている Exchange サーバーにログオンします。
Windows エクスプローラーを開き、Exchange サーバーのインストールディレクトリを見つけます。
\Client Access\OWA\prem\version\resources\themes で、新しいフォルダーを作成し、名前を付けます (例: Fourth Coffee)。
別のテーマのすべてのファイルを新しいフォルダーにコピーします。

手順 2: 新しいテーマに名前を付けます

新しいテーマの表示名を設定するには、次の操作を行います。

作成したカスタムテーマフォルダーにある themeinfo.xml のコピーを開きます。
テーマ displayname の値を見つけて、使用する名前に値を変更します。たとえば、displayname = "Fourth Coffee Theme" となります。
themeinfo.xml を保存して閉じます。

手順 3: 新しいテーマの並べ替え順序を変更する (省略可能)

必要に応じて、themeinfo.xml ファイルを編集して、新しいテーマの並べ替え順序を変更できます。並べ替え順序によって、[設定] メニューの [ テーマの変更 ] パネルのテーマの位置が決まります。

themeinfo.xml ファイルを使用して新しいテーマの並べ替え順序を変更するには、次の操作を行います。

カスタムテーマフォルダーにある themeinfo.xml のコピーを開きます。
テーマ sortorder の値を見つけて、新しいテーマをリストに表示する場所を反映するように値を変更します。テーマは数値順に並べ替えられます。既定では、基本テーマは最初のテーマであり、その sortorder 値は "0" です。たとえば、sortorder="<number>" となります。
themeinfo.xml を保存して閉じます。

手順 4: 新しいテーマを変更する

ファイルの上にコピーし、テーマに名前を付けたので、カスタマイズできます。 Outlook Web Appテーマでは、次の要素をカスタマイズできます。

ヘッダー領域とアイコンを定義するイメージファイル。
CSS ファイル。フォントと色を定義します。

画像ファイル

テーマイメージは、\themes_\theme name>_\<images\ の 2 つのフォルダーに格納されます。 \images\0 フォルダーには、左から右の言語 (英語など) で使用されるイメージが含まれており、右から左に読み取られた言語では \images\rtl フォルダー内のイメージが使用されます。

注:

\images\rtl フォルダー内のイメージの一部は、\images\0 フォルダーと同じイメージですが、ミラー化されています。

テーマをカスタマイズするには、画像編集ツールを使用して、次の画像を開いて変更できます。

Headerbgmain.png

これは、メインヘッダーイメージです。画像のヘッダーの高さが 30 ピクセルを超えないようにすることをお勧めします。既定のテーマでは背景イメージが使用されないため、このイメージは透明です。カスタム背景画像を持つテーマの例については、 Blueprint テーマフォルダーのイメージを参照してください。
Headerbgright.png

これは、ヘッダーの背後にあるタイリングイメージとして使用されます。既定のテーマではタイリングの背景画像が使用されないため、このイメージは透明です。カスタムタイリングの背景画像を持つテーマの例については、 Blueprint テーマフォルダーのイメージを参照してください。
sprite1.mouse.png

これには、テーマで使用されるほとんどの画像が含まれています。テーマに合わせて画像の色を変更したり、既定のOutlook Web Appテキストロゴを変更したりできます。

問題を回避するには、スプライト内の個々のアイコンのサイズを変更せず、透明な .png ファイルとして保存されていることを確認してください。
themepreview.png

この画像は、Outlook Web Appの [設定] メニューの [テーマの変更] パネルでテーマを表すために使用されます。

色とフォント

カスケードスタイルシート (.css) ファイルは、テーマで使用される色とフォントを定義し、\theme\<theme 名>の下の複数のフォルダーに格納されます。 \<theme name>\0 フォルダーには、左から右の言語 (英語など) で使用される.cssファイルが含まれており、右から左に読み取られる言語では、\<theme name>\rtl フォルダー内の.css ファイルが使用されます。また、言語固有のフォルダー (\ja、\ko、\zhs、\zht など) には、それらの言語で使用する.css ファイルが含まれています。

まず、\<theme name>\images\0 フォルダーを変更します。カスタマイズできる各テーマ全体で使用される 4 つの色があります。

BrandColor: #0072C6
NavBarHoverColor: #4C9CD7
未読色: #2A8DD4
FocusColor: #DFEDFA

メモ帳のようなテキストエディターを使用すると、owa2styles.mouseCSS と owa2styles2.mouseCSS の 2 つのファイルで、これらの値のすべてのインスタンスをテーマの色で検索して置き換えることができます。これは、これらの.cssファイルを含む新しいテーマ内のすべてのフォルダーで行う必要があります。

手順 5: 既定の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でテーマの選択を無効にします。サーバー名は 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