Outlook Web Access のテーマを作成する方法

  • [アーティクル]

 

適用先: Exchange Server 2007 SP3, Exchange Server 2007 SP2, Exchange Server 2007 SP1, Exchange Server 2007

トピックの最終更新日: 2007-09-12

ここでは、Microsoft Office Outlook Web Access のカスタム テーマを作成する方法について説明します。テーマは、Outlook Web Access の外観を制御するファイルおよびスタイル シートの集合です。既定では、Microsoft Exchange Server 2007 を実行しているコンピュータにクライアント アクセス サーバーの役割をインストールするときに、2 つのテーマがインストールされます。2 つのテーマはシアトル スカイとカーボン ブラックです。

カスタム テーマをサポートするのは Outlook Web Access Premium のみです。Outlook Web Access Light 用のカスタム テーマを作成することはできません。

Exchange 2007 SP1 の新機能

Outlook Web Access では、Exchange Server 2007 Service Pack 1 (SP1) に 2 つのテーマが追加されています。新しい 2 つのテーマとは、Xbox と Zune です。

テーマの内容

テーマは、メディア ファイルとカスケード スタイル シート (.css ファイル) の集合です。ファイルは、クライアント アクセス サーバーのインストール ディレクトリ内の \Client Access\OWA\バージョン\themes に格納されます。各テーマは、テーマのサブディレクトリに格納されます。

.css ファイルは、色、グラデーション、およびフォントを定義します。イメージ ファイル (.gif ファイル) は、アイコンとその他のグラフィック要素を提供します。アイコンを編集する場合、サイズを変更しないでください。その他のグラフィック要素のサイズを変更する場合、変更をテストし、要素が正しく適合することを確認してください。

既定のテーマ (シアトル スカイ) は基本となるテーマで、\themes\base 内にあります。base フォルダには、テーマを定義するために必要なすべてのファイルが格納されています。これに含まれるのは、色、フォント、アイコン、グラフィックなどです。

選択したファイルを新しいディレクトリにコピーし、組織のニーズに合わせてそのファイルを変更することによって、追加のテーマを作成できます。Outlook Web Access ユーザー インターフェイスでは、テーマは配色と呼ばれています。ユーザーがカスタム テーマを選択する場合、カスタム テーマのディレクトリ内にある要素が最初に使用され、カスタマイズされていない必須要素は基本となるテーマから取り出されます。たとえば、ヘッダー グラフィックのみを新しいテーマにコピーし、変更して新しいテーマを作成した場合、ユーザーがそのテーマを選択すると、ヘッダー グラフィックは新しいテーマから使用され、残りのテーマ プロパティは基本となるテーマから使用されます。

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

推奨事項

Outlook Web Access テーマの要素の多くは変更できます。Outlook Web Access に不安定さを生じさせないように、手始めとして、ヘッダー、ログオン ページとログオフ ページ、および選択や強調表示に使用される色だけを変更することをお勧めします。

さらに複雑な変更を行う場合は、まず .css ファイルのしくみについて理解してください。カスケード スタイル シートを十分に理解したら、一度に数個の要素を変更し、変更をテストして、その結果が予想どおりであることを確認します。

ベスト プラクティスとして、以下のガイドラインを利用することをお勧めします。

  • ファイルを編集する前に元のファイルのバックアップ コピーを常に作成してください。特に、\themes\base ディレクトリ内のファイルを編集している場合は注意が必要です。
  • \Client Access\OWA\バージョン\themes\base フォルダまたはこのフォルダ内にあるファイルはどれも削除しないでください。
  • メッセージの上部に表示される情報バーは変更しないでください。有害な可能性のあるコンテンツ、フィッシング攻撃、ウイルス、およびブロックされたか見つからないコンテンツについての警告がここに表示されます。

次の図は、2 つの情報バーが表示されている Outlook Web Access 予定表要求です。

Outlook Web Access 情報バー

開始する前に

以下の手順を実行するには、Outlook Web Access をホストしているサーバーにログインする必要があります。また、このとき使用するアカウントにローカルの Administrators グループのメンバシップが委任されている必要があります。

テーマの作成

以下の手順は、Outlook Web Access のカスタム テーマを作成するための一般的な手順です。Outlook Web Access テーマの個別の要素を変更する具体的な手順については、以降のセクションで説明します。

新しい Outlook Web Access テーマを作成するには、次の操作を行います。

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

  2. \Client Access\OWA\<バージョン>\themes に、新しいフォルダを作成します。

  3. premium.css ファイルと owafonts.css ファイルを、基本となるテーマから新しいフォルダにコピーします。

  4. 基本となるテーマからテーマを作成するために変更するファイルを、作成した新しいフォルダにコピーします。

  5. 新しいテーマ フォルダ内でファイルを変更して、テーマを作成します。

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

  7. Outlook Web Access にログオンし、新しいテーマを選択して、新しいテーマをテストします。

カスタム テーマの名前

カスタム テーマに名前を付けるには 2 つの方法があります。1 つ目は、新しいテーマを作成したフォルダに、テーマの名前を付ける方法です。たとえば、カスタム テーマに "Fourth Coffee" という名前を付けるには、作成した新しいテーマが含まれるフォルダの名前を Fourth Coffee にします。

基本となるテーマから新規作成テーマ フォルダに themeinfo.xml ファイルをコピーして、そのファイルを編集することで、カスタム テーマに名前を付けることもできます。メモ帳などのテキスト エディタを使用して themeinfo.xml ファイルを編集し、テーマの表示名を目的の名前に変更できます。

themeinfo.xml ファイルを編集してカスタム テーマに名前を付けるには、次の操作を行います。

  1. 基本となるテーマのフォルダから themeinfo.xml ファイルを、カスタム テーマを作成したフォルダにコピーします。

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

  3. テーマの displayname の値を見つけ、この値を目的の名前に変更します。

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

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

note注 :
テーマの名前を変更する場合、変更内容を有効にするには、IIS を停止して再起動する必要があります。このためには、コマンド プロンプト ウィンドウを開き、コマンド iisreset/noforce を使用します。

カスタム ヘッダーの作成

メインの Outlook Web Access ページのヘッダーをカスタマイズできます。Outlook Web Access のヘッダーを変更するには、以下のファイルが必要です。

  • premium.css
  • owafonts.css
  • logopt.gif
  • logopb.gif
  • nbbkg.gif

Premium.css と owafonts.css は、Outlook Web Access で使用されるフォントと色を定義します。Logopt.gif、logopb.gif、および nbbkg.gif は、Outlook Web Access のページ上部にヘッダーを作成するために使用される画像ファイルです。

画像編集ツールで .gif ファイルを開き、Outlook Web Access のヘッダーを作成するためにどのように使用されているかを確認してください。

次の図は、Seattle Sky Outlook Web Access テーマのヘッダーに使用されている元のファイルです。

Outlook Web Access ヘッダー ファイル カスタム ヘッダーを作成するには、次の操作を行います。

  1. 基本となるテーマのフォルダから premium.css、owafonts.css、logopt.gif、logopb.gif、および nbbkg.gif をカスタム テーマ フォルダにコピーします。

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

  3. ヘッダーから "Microsoft Exchange に接続しました" を削除するには、"background:url("logopb.gif") no-repeat;" を見つけてその直後に display:none; を追加します。

  4. ロゴを変更するには、画像編集ツールを使用して logopt.gif を開き、修正します。

  5. logopt.gif の背景色を変更するには、画像編集ツールを使用して logopb.gif と nbbkg.gif を編集し、同じ背景色を設定します。

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

  7. カスタム テーマへの変更内容をテストするには、Outlook Web Access にログオンし、[オプション] をクリックし、[全般設定] をクリックし、[表示] メニューからカスタム テーマを選択します。変更内容を保存してから、Internet Explorer で [最新の情報に更新] をクリックすると、新しいテーマが表示されます。

テーマの色の変更

テーマの色を変更するには、プレミアム スタイル シート (premium.css) で値を見つけて、使用する色の HTML RGB 値を決定する必要があります。HTML RGB カラー値は、シャープ記号 (#) の後に 6 つの数字という形式の 7 文字で定義されます。さまざまな色の HTML RGB 値については、MSDN Library のカラー テーブルに関するページを参照してください (このサイトは英語の場合があります)。特定の色に一致させる必要があり、その色をオンラインで見つけられない場合は、画像編集ツールを使用して色をサンプリングすると、その HTML RGB 値を特定することができます。

ナビゲーション バーで選択されているモジュールの強調色を変更するには、次の操作を行います。

  1. メモ帳などのテキスト エディタで premium.css ファイルを開きます。

  2. ファイル内で以下を探します。

    a.nbHiLt
{
       background-color:#FFEFB2;
}

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

  4. カスタム テーマへの変更内容をテストするには、Outlook Web Access にログオンし、[オプション] をクリックし、[全般設定] をクリックし、[表示] メニューからカスタム テーマを選択します。変更内容を保存してから [最新の情報に更新] をクリックすると、新しいテーマが表示されます。アクティブな Outlook Web Access セッションが既にある場合、F5 キーを押すとページが更新され、変更内容が表示されます。

次の図は、メール モジュールを強調表示している Outlook Web Access のナビゲーション バーの部分です。

強調表示されたモジュール 第 1 および第 2 の一覧選択色を変更するには、次の操作を行います。

  1. メモ帳などのテキスト エディタで premium.css ファイルを開きます。

  2. 第 1 の選択色を変更するには、次の記述を探します。

    tr.sel, tr.srsel, tr.lrsel
{
      background-color: #FFEFB2;

  3. 第 2 の選択色を変更するには、次の記述を探します。

    tr.shdw, tr.srshdw, tr.lrshdw
{
      background-color:#F8F0D2;

  4. 第 1 および第 2 の選択色に対応する RGB 値を目的の色の RGB 値で置き換えます。

  5. カスタム テーマをテストするには、Outlook Web Access にログオンし、[オプション] をクリックし、[全般設定] をクリックし、[表示] メニューからカスタム テーマを選択します。変更内容を保存してから [最新の情報に更新] をクリックすると、新しいテーマが表示されます。アクティブな Outlook Web Access セッションが既にある場合、F5 キーを押すとページが更新され、変更内容が表示されます。

第 1 の選択色は、一覧ウィンドウにフォーカスがあるときに、一覧で選択されている項目を強調表示するために使用されます。フォーカスがプレビュー ウィンドウやナビゲーション ウィンドウに移ると、一覧ウィンドウで選択されている項目は、第 2 の選択色で強調表示されます。次の図は、Outlook Web Access での第 1 と第 2 の選択色の違いを示しています。

プライマリおよびセカンダリ強調表示色

note注 :
前の手順で使用した方法で、テーマの他の要素の RGB 値を変更できます。

一覧表示の背景の変更

ナビゲーション ウィンドウから [メール]、[連絡先]、[仕事]、または [パブリック フォルダ] を選択すると、Outlook Web Access により、これらのモジュールで利用できるフォルダにアイテムの一覧が表示されます。

premium.css の設定を変更すると、一覧表示に背景を追加できます。

Outlook Web Access の一覧表示の背景を変更するには、次の操作を行います。

  1. .gif 形式のイメージ ファイルを探すか、作成します。

  2. このイメージ ファイルをカスタム テーマ フォルダにコピーします。

  3. メモ帳などのテキスト エディタで premium.css ファイルを開きます。

  4. 背景イメージを変更するには、次の記述を探します。

    div#divLstV{width:100%;height:100%;}

  5. この文字列を次のように変更します。

    div#divLstV{background-image: url(image file name);width:100%;height:100%;}

  6. 新しいイメージが正しく表示されるように背景の透過性を変更するには、次の記述を探します。

    td#tdIL{background-color: #FFFFFF;height:100%;vertical-align:top;}

  7. background-color 値を transparent に置き換えます。

    td#tdIL{background-color:transparent;height:100%;vertical-align:top;}

  8. カスタム テーマをテストするには、Outlook Web Access にログオンし、[オプション] をクリックし、[全般設定] をクリックし、[表示] メニューからカスタム テーマを選択します。変更内容を保存してから [最新の情報に更新] をクリックすると、新しいテーマが表示されます。アクティブな Outlook Web Access セッションが既にある場合、F5 キーを押すとページが更新され、変更内容が表示されます。

既定の Default Outlook Web Access テーマの変更

Set-OwaVirtualDirectory コマンドレットを使用して、仮想ディレクトリの既定の Outlook Web Access テーマを基本となるテーマからカスタム テーマに変更できます。Set-OwaVirtualDirectory コマンドレットを使用して、Outlook Web Access のテーマ選択オプションを無効にすることもできます。複数の Outlook Web Access 仮想ディレクトリがある場合、次の手順を使用して、それぞれの仮想ディレクトリに既定のテーマを設定できます。

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

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

Exchange 管理シェルを使用して Outlook Web Access の既定のテーマを設定するには、次の操作を行います。

  • サーバー名が "FourthCoffee"、仮想ディレクトリ名が "owa"、Web サイト名が "Default Web site"、およびテーマが "Custom" という名前のフォルダ内にある Outlook Web Access の既定のテーマを設定するには、次のコマンドを実行します。

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

Exchange 管理シェルを使用して Outlook Web Access のテーマ選択を無効にするには、次の操作を行います。

  • サーバー名が "FourthCoffee"、仮想ディレクトリ名が "owa"、および Web サイト名が "Default Web site" である Outlook Web Access のテーマ選択を無効にするには、次のコマンドを実行します。

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

また、次のコマンドを実行すると、両方のコマンドを一度に実行できます。

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

ログオン ページとログオフ ページのカスタマイズ

Outlook Web Access ログオン、言語選択、およびログオフのページは常に、基本となるテーマのフォルダ内のグラフィックと logon.css ファイルに基づいて作成されます。したがって、カスタムのログオン ページとログオフ ページを使用するには、基本となるテーマのフォルダ内にあるファイルを変更する必要があります。基本となるテーマのフォルダは、Exchange インストール ディレクトリ内の \Client Access\OWA\バージョン\themes\base にあります。

ログオン、言語選択、およびログオフのページでは、logon.css ファイルを使用して書式と色を定義します。これらのページは、上枠線、下枠線、および側面に複数の画像を組み合わせて作成されていて、反復する画像や拡大用のコーナーもページに含まれます。以下のファイルでログオン ページが作成されます。

  • logon.css
  • lgnbotl.gif
  • lgnbotm.gif
  • lgnbotr.gif
  • lgnexlogo.gif
  • lgnleft.gif
  • lgnright.gif
  • lgntopl.gif
  • lgntopm.gif
  • lgntopr.gif

最も手軽に新しい外観を作成するには、純色を使用します。ログオン ページ、各メールボックスへの初回ログオン時に表示される言語選択ページ、およびログオフ ページという 3 つのページで同じ画像群を使用するからです。これらのページはページ内容に応じて縦横にサイズ変更できます。

複数のクライアント アクセス サーバーがあって、そのすべてで同じログオン ページとログオフ ページを使用するには、修正したログオン ファイルとログオフ ファイルを各クライアント アクセス サーバーにコピーする必要があります。

Caution注意 :
ログオンおよびログオフのカスタム ページを作成するには基本となるテーマのファイルを変更する必要があるので、ログオンおよびログオフのカスタム ページを作成する前に、変更するすべてのファイルのバックアップ コピーを作成してください。

次の図は、既定の Outlook Web Access ログオン ページです。[説明を表示する] をクリックし、[これは個人のコンピュータです] と [Outlook Web Access Light を使用する] を選択すると、このページが表示されます。上の図は、ページを形成するグラフィック ファイルがどのように組み合わされているかを示しています。下の図は、ログオン ページ上の背景色と文字色が logon.css ファイルでどのように指定されているかを示しています。

既定のログオン ページ テキスト オプションを表示している既定の Outlook Web Access ログオン ページ

次の図は、既定の Outlook Web Access ログオフ ページです。上の図は、ページを形成するグラフィック ファイルがどのように組み合わされているかを示しています。下の図は、ログオフ ページ上の背景色と文字色が logon.css ファイルでどのように指定されているかを示しています。

既定のログオフ ページ テキスト オプションを表示している Outlook Web Access のログオフ ページ

ログオン ページとログオフ ページの変更のテスト

Internet Explorer で Outlook Web Access のログオンまたはログオフ ページを開いた後、IIS をリセットしたり Internet Explorer を終了したりしなくても、変更をテストできます。

ログオン ページとログオフ ページの変更をテストするには、次の操作を行います。

  1. Internet Explorer で Outlook Web Access のログオンまたはログオフ ページを開きます。

  2. ツール バーで [ツール] メニューの [インターネット オプション] をクリックします。

  3. [全般] タブで、[閲覧の履歴] の下の [削除] をクリックします。

  4. [インターネット一時ファイル] の [ファイルの削除] をクリックし、Internet Explorer のすべての一時ファイルを削除するかどうかを確認するメッセージが表示されたら、[はい] をクリックします。

  5. [OK] をクリックして、[インターネット オプション] を閉じます。

  6. [最新の情報に更新] をクリックすると変更が反映されます。

ログオンまたはログオフ ページのファイルに変更を加えるたびに、これらの手順を繰り返して変更を確認してください。複数の変更を加える場合、ログオンまたはログオフ ページを開いたままにして手順を繰り返し、変更を表示することができます。

ロゴの変更

Outlook Web Access をカスタマイズするには、ログオンおよびログオフ ページの Outlook Web Access ロゴを組織のロゴに変更できます。

Outlook Web Access のロゴを変更するには、次の操作を行います。

  1. 必要に応じて元のページに戻せるように、変更するファイルのコピーを作成し、安全な場所に保存します。

  2. 画像編集ツールで lgntopl.gif ファイルを開いて編集し、使用するロゴを作成します。

  3. 変更内容を保存してから [最新の情報に更新] をクリックし、変更を確認します。

    note注 :
    lgntopl.gif の背景色を変更した場合、ログオンおよびログオフ ページに使用される残りのファイルも同じ色に変更することをお勧めします。

フォントと配色の変更

logon.css ファイルを編集して、ページで使用されるフォントと色の一部を変更できます。これには、ログオン ページや言語選択ページの中心にあるコントロールに隠れた背景色が含まれます。これらのページの色を変更した場合、背景色も同じ色に変更することをお勧めします。

ログオン ページ、言語選択ページ、およびログオフ ページの背景色と文字色を変更するには、ログオン スタイル シート (logon.css) でその値を見つけて、使用する色の HTML RGB 値を特定する必要があります。HTML RGB カラー値は、シャープ記号 (#) の後に 6 つの数字という形式の 7 文字で定義されます。さまざまな色の HTML RGB 値については、MSDN Library のカラー テーブルに関するページを参照してください (このサイトは英語の場合があります)。特定の色に一致させる必要があり、その色をオンラインで見つけられない場合は、画像編集ツールを使用して色をサンプリングすると、その HTML RGB 値を特定することができます。

変更内容をテストするには、Internet Explorer を開き、Outlook Web Access の URL を入力します。Outlook Web Access 仮想ディレクトリをホストしているクライアント アクセス サーバーの既定の Web サイトに対する変更をテストしている場合、Internet Explorer を開いて URL に「https://localhost/owa」と入力することで、テストすることができます。

note注 :
言語選択ページが表示されるのは、ユーザーが Outlook Web Access に初めてログオンするときだけです。

次の表は、ログオンおよびログオフ ページの要素とその説明です。

ログオンおよびログオフ ページの要素とその説明

変更する要素 検索文字列 説明

背景色

Background: #7F90b1

ログオンおよびログオフ ページの背景色です。グラフィック ファイルの背景色を変更する場合、この背景色も同じ色に変更することをお勧めします。

警告テキスト

wrng{color:#f8d328}

ユーザーが [これは個人のコンピュータです] を選択した場合に表示される警告テキストの色。既存の Outlook Web Access ログオン ページでは、この警告テキストは明るい黄色で、青の背景によく目立ちます。ログオン ページの背景色を変更する場合、警告テキストが目立つように、警告テキストの色も変更することを検討してください。

テキストの色

select, table {color:#ffffff;}

テキストの色は白です。Outlook Web Access ログオン ページ上で選択できるオプションや入力フィールドが表示されます。ユーザー名やパスワードのフィールド ラベル、セキュリティ オプションの横のテキストなどがあります。ログオン ページに濃い色を選択した場合、テキストの色には白が適しています。

説明の表示

a{color#ffe052;

ログオン ページ上のリンク。クリックすると、プライベート ログオンとパブリック ログオンの説明の表示と非表示が切り替わります。

Outlook Web Access Light の説明

disBis{color:#c8d3e3;}

ユーザーが [Outlook Web Access Light を使用する] を選択する場合、Outlook Web Access Light に関する簡単な説明が表示されます。

Microsoft Exchange との接続

;color:#fffff;

"Microsoft Exchange に接続しました" という文が、ログオンおよびログオフ ページの左下隅に表示されます。この値を変更すると、このテキストの色が変わります。

区切り線

#A9AAc4

logon.css を使用する 3 つのページすべてが、細い線でセクションに分かれています。これらのページは、ログオン、ログオフ、および言語選択のページです。背景色と文字色を変更した後、見やすいけれどもテキストよりは目立たないように、線の色を変更することができます。

どの要素の色をどの HTML RGB カラー値に変更するかを決定したら、次の手順で .css ファイルに定義されている要素の色を変更します。

要素の色を変更するには、次の操作を行います。

  1. logon.css を開きます。

  2. このトピックで前に示した、ログオンおよびログオフ ページの要素の表を使用して、変更する要素を表す文字列を検索します。

  3. 変更する要素の HTML RGB カラー値を、その要素に使用する新しい HTML RGB カラー値に置き換えます。

  4. 変更内容を保存し、logon.css を閉じます。

  5. Internet Explorer を開き、Outlook Web Access ログオン ページの URL を入力して、変更をテストします。

note注 :
Outlook Web Access ログオン URL を既に開いている場合は、インターネット一時ファイルを削除し、Internet Explorer を最新の情報に更新することで、変更をテストできます。これを行うには、[ツール] メニューの [インターネット オプション] をクリックします。[全般] タブで、[閲覧の履歴] の下の [削除] をクリックします。[インターネット一時ファイル] の [ファイルの削除] をクリックし、Internet Explorer のすべての一時ファイルを削除するかどうかを確認するメッセージが表示されたら、[はい] をクリックします。[OK] をクリックして [インターネット オプション] を閉じ、F5 キーを押してログオン ページを最新の情報に更新します。

参照している情報が最新であることを確認したり、他の Exchange Server 2007 ドキュメントを見つけたりするには、Exchange Server TechCenter を参照してください。