PowerPoint アドインでドキュメントテーマを使用する

[アーティクル]
06/18/2024

Office テーマの一部は表示が調整されたフォントと色のセットで構成されており、このセットをプレゼンテーション、文書、ワークシート、メールに適用できます。 PowerPoint でプレゼンテーションのテーマを適用したりカスタマイズしたりするには、リボンの [デザイン] タブの [テーマ] グループと [バリエーション] グループを使います。 PowerPoint は既定の Office テーマの新しい空白のプレゼンテーションを割り当てますが、[デザイン] タブ上の使用できる他のテーマを選択したり、Office.com から追加のテーマをダウンロードしたり、独自のテーマを作成してカスタマイズしたりできます。

OfficeThemes.cssを使用して、2 つの方法でPowerPointと調整されるアドインを設計します。

PowerPointのコンテンツアドイン。 OfficeThemes.cssのドキュメントテーマクラスを使用して、コンテンツアドインが挿入されるプレゼンテーションのテーマに一致するフォントと色を指定し、ユーザーがプレゼンテーションのテーマを変更またはカスタマイズすると、それらのフォントと色が動的に更新されます。
PowerPointの作業ウィンドウアドイン。 OfficeThemes.cssの Office UI テーマクラスを使用して、作業ウィンドウアドインが組み込みの作業ウィンドウの色と一致するように、UI で使用されるものと同じフォントと背景色を指定し、ユーザーが Office UI テーマを変更すると、それらの色が動的に更新されます。

文書のテーマの色

すべての Office 文書のテーマには 12 色が定義されています。これらのうち 10 色は、色選択を使ってプレゼンテーション内のフォントや背景などの色を設定するときに利用できます。

カラーパレット。

PowerPointで 12 個のテーマの色の完全なセットを表示またはカスタマイズするには、[デザイン] タブの [バリエーション] グループで [その他] ドロップダウンをクリックし、[色] を選択し>色をカスタマイズして、[新しいテーマの色の作成] ダイアログボックスを表示します。

[新しいテーマの色の作成] ダイアログボックス。

最初の 4 色はテキストと背景用です。テキストを明るい色で作成すると常に暗い色より読みやすくなり、テキストを暗い色で作成すると常に明るい色より読みやすくなります。続く 6 色は、4 つの背景になる色の上に常に表示されるアクセントです。最後の 2 色は、ハイパーリンクと表示済みハイパーリンクの色です。

文書のテーマのフォント

すべての Office 文書のテーマには 2 つのフォント (見出し用と本文テキスト用) も定義されています。 PowerPoint はこれらのフォントを使用して自動的にテキストスタイルを構成します。また、テキストとワードアートのクイックスタイル ギャラリーでも同じフォントが使用されます。これらの 2 つのフォントは、フォントピッカーを使用してフォントを選択するときに、最初の 2 つの選択項目として利用できます。

フォントピッカー。

PowerPointでテーマフォントを表示またはカスタマイズするには、[デザイン] タブの [バリエーション] グループで [その他] ドロップダウンをクリックし、[フォント>カスタマイズフォント] を選択して、[新しいテーマフォントの作成] ダイアログボックスを表示します。

[新しいテーマフォントの作成] ダイアログボックス。

Office の UI のテーマのフォントと色

Office also lets you choose between several predefined themes that specify some of the colors and fonts used in the UI of all Office applications. そのためには、(任意の Office アプリケーションから) [ファイル>Account>Office テーマ ] ドロップダウンを使用します。

[Office テーマ] ドロップダウン。

OfficeThemes.css には、作業ウィンドウアドインでPowerPointに使用できるクラスが含まれているため、これらの同じフォントと色が使用されます。したがって、組み込み作業ウィンドウの外観と一致する作業ウィンドウアドインを設計できます。

OfficeThemes.cssを使用する

OfficeThemes.css ファイルとコンテンツアドインをPowerPointに使用すると、アドインの外観を、実行しているプレゼンテーションに適用されたテーマと調整できます。 PowerPointの作業ウィンドウアドインで OfficeThemes.css ファイルを使用すると、アドインの外観を Office UI のフォントと色と調整できます。

OfficeThemes.css ファイルをプロジェクトに追加する

次の手順を使用して、 OfficeThemes.css ファイルをアドインプロジェクトに追加して参照します。

注:

この手順は、Visual Studio 2015 にのみ適用されます。 Visual Studio 2019 を使用している場合、 OfficeThemes.css ファイルは、作成した新しいPowerPoint アドインプロジェクトに対して自動的に作成されます。

ソリューションエクスプローラーで、project_nameWeb プロジェクトの Content フォルダーを右クリック (または選択して長押し) し、[追加] を選択し、[スタイルシート] を選択します。
新しいスタイルシートに OfficeThemes という名前を付けます。

重要

スタイルシートの名前は OfficeThemes と指定する必要があります。そうでない場合、ユーザーがテーマを変更した際にアドインのフォントと色を動的に更新する機能が動作しません。

ファイル内の既定の body クラス (body {}) を削除し、次の CSS コードをコピーしてファイルに貼り付けます。

/* The following classes describe the common theme information for office documents */ 

/* Basic Font and Background Colors for text */ 
.office-docTheme-primary-fontColor { color:#000000; } 
.office-docTheme-primary-bgColor { background-color:#ffffff; } 
.office-docTheme-secondary-fontColor { color: #000000; } 
.office-docTheme-secondary-bgColor { background-color: #ffffff; } 

/* Accent color definitions for fonts */ 
.office-contentAccent1-color { color:#5b9bd5; } 
.office-contentAccent2-color { color:#ed7d31; } 
.office-contentAccent3-color { color:#a5a5a5; } 
.office-contentAccent4-color { color:#ffc000; } 
.office-contentAccent5-color { color:#4472c4; } 
.office-contentAccent6-color { color:#70ad47; } 

/* Accent color for backgrounds */ 
.office-contentAccent1-bgColor { background-color:#5b9bd5; } 
.office-contentAccent2-bgColor { background-color:#ed7d31; } 
.office-contentAccent3-bgColor { background-color:#a5a5a5; } 
.office-contentAccent4-bgColor { background-color:#ffc000; } 
.office-contentAccent5-bgColor { background-color:#4472c4; } 
.office-contentAccent6-bgColor { background-color:#70ad47; } 

/* Accent color for borders */ 
.office-contentAccent1-borderColor { border-color:#5b9bd5; } 
.office-contentAccent2-borderColor { border-color:#ed7d31; } 
.office-contentAccent3-borderColor { border-color:#a5a5a5; } 
.office-contentAccent4-borderColor { border-color:#ffc000; } 
.office-contentAccent5-borderColor { border-color:#4472c4; } 
.office-contentAccent6-borderColor { border-color:#70ad47; } 

/* links */ 
.office-a { color: #0563c1; } 
.office-a:visited { color: #954f72; } 

/* Body Fonts */ 
.office-bodyFont-eastAsian { } /* East Asian name of the Font */ 
.office-bodyFont-latin { font-family:"Calibri"; } /* Latin name of the Font */ 
.office-bodyFont-script { } /* Script name of the Font */ 
.office-bodyFont-localized { font-family:"Calibri"; } /* Localized name of the Font. Corresponds to the default font of the culture currently used in Office.*/ 

/* Headers Font */ 
.office-headerFont-eastAsian { } 
.office-headerFont-latin { font-family:"Calibri Light"; } 
.office-headerFont-script { } 
.office-headerFont-localized { font-family:"Calibri Light"; } 

/* The following classes define font and background colors for Office UI themes. These classes should only be used in task pane add-ins */ 

/* Basic Font and Background Colors for PPT */ 
.office-officeTheme-primary-fontColor { color:#b83b1d; } 
.office-officeTheme-primary-bgColor { background-color:#dedede; } 
.office-officeTheme-secondary-fontColor { color:#262626; } 
.office-officeTheme-secondary-bgColor { background-color:#ffffff; }

Visual Studio 以外のツールを使用してアドインを作成する場合は、前の手順の CSS コードをテキストファイルにコピーします。次に、ファイルを OfficeThemes.cssとして保存します。

アドインの HTML ページの参照OfficeThemes.css

アドインプロジェクトでOfficeThemes.css ファイルを使用するには、この形式でアドインの UI を実装する web ページの<head> タグ (.html、.aspx、.php ファイルなど) 内のOfficeThemes.css ファイルを参照する<link> タグを追加します。

<link href="<local_path_to_OfficeThemes.css>" rel="stylesheet" type="text/css" />

Visual Studio でこの作業を行うには、次の手順に従ってください。

[新規プロジェクトの作成] を選択します。
検索ボックスを使用して、アドインと入力します。 [PowerPoint Web アドイン] を選択し、[次へ] を選択します。
プロジェクトに名前を付けて、[作成] を選択します。
[Office アドインの作成] ダイアログウィンドウで、[新機能を PowerPoint に追加する] を選択してから、[完了] を選択してプロジェクトを作成します。
ソリューションが Visual Studio によって作成され、2 つのプロジェクトがソリューションエクスプローラーに表示されます。 Home.html ファイルが Visual Studio で開きます。
既定のテンプレートの Home.html など、アドインの UI を実装する HTML ページで、OfficeThemes.css ファイルを参照する <head> タグ内に次の<link> タグを追加します。
```
<link href="../../Content/OfficeThemes.css" rel="stylesheet" type="text/css" />
```

Visual Studio 以外のツールを使用してアドインを作成する場合は、アドインと共に展開されるOfficeThemes.cssのコピーへの相対パスを指定する同じ形式の<link> タグを追加します。

コンテンツアドインOfficeThemes.css HTML ページでドキュメントテーマクラスを使用する

OfficeTheme.css 文書テーマクラスを使用するコンテンツアドイン内の HTML の簡単な例を以下に示します。ドキュメントテーマで使用される 12 色と 2 つのフォントに対応する OfficeThemes.css クラスの詳細については、「コンテンツアドインのテーマクラス」を参照してください。

<body>
    <div id="themeSample" class="office-docTheme-primary-fontColor ">
        <h1 class="office-headerFont-latin">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent1-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent2-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent3-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent4-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent5-bgColor">Hello world!</h1> 
        <h1 class="office-headerFont-latin office-contentAccent6-bgColor">Hello world!</h1> 
        <p class="office-bodyFont-latin office-docTheme-secondary-fontColor">Hello world!</p> 
    </div>
</body>

実行時に、既定の Office テーマを使用するプレゼンテーションに挿入すると、コンテンツアドインは次のようにレンダリングされます。

Office テーマで実行されているコンテンツアプリ。

プレゼンテーションを変更して別のテーマを使用したり、プレゼンテーションのテーマをカスタマイズしたりすると、 OfficeThemes.css クラスで指定されたフォントと色が、プレゼンテーションのテーマのフォントと色に対応するように動的に更新されます。前述の例と同じ HTML を使用すると、アドインの挿入先のプレゼンテーションでファセットのテーマが使用され、アドインは次のように表示されます。

ファセットテーマで実行されているコンテンツアプリ。

作業ウィンドウアドインOfficeThemes.css HTML ページで Office UI テーマクラスを使用する

ユーザーは、文書のテーマに加えて、すべての Office アプリケーションの Office ユーザーインターフェイスの配色をカスタマイズできます。そのためには、[ファイル] > [アカウント] > [Office テーマ] ドロップダウンボックスを使用します。

OfficeTheme.css クラスを使用してフォントの色と背景色を指定する作業ウィンドウアドイン内の HTML の簡単な例を次に示します。 Office UI テーマのフォントと色に対応する OfficeThemes.css クラスの詳細については、「作業ウィンドウアドインのテーマクラス」を参照してください。

<body> 
    <div id="content-header" class="office-officeTheme-primary-fontColor office-officeTheme-primary-bgColor"> 
        <div class="padding">
            <h1>Welcome</h1>
        </div> 
    </div> 
    <div id="content-main" class="office-officeTheme-secondary-fontColor office-officeTheme-secondary-bgColor"> 
        <div class="padding"> 
            <p>Add home screen content here.</p> 
            <p>For example:</p> 
            <button id="get-data-from-selection">Get data from selection</button> 
            <p><a target="_blank" class="office-a" href="https://go.microsoft.com/fwlink/?LinkId=276812">Find more samples online...</a></p>
        </div>
    </div>
</body>

PowerPoint で [ファイル] > [アカウント] > [Office テーマ] を [白] に設定して実行すると、作業ウィンドウアドインは次のように表示されます。

Office White テーマの作業ウィンドウ。

OfficeTheme をダークグレーに変更すると、OfficeThemes.css クラスで指定されたフォントと色が動的に更新され、このようなレンダリングが行われます。

Office 濃い灰色をテーマにした作業ウィンドウ。

OfficeTheme.css のクラス

OfficeThemes.css ファイルには、コンテンツと作業ウィンドウアドインでPowerPointに使用できる 2 つのクラスセットが含まれています。

コンテンツアドインのテーマクラス

OfficeThemes.css ファイルには、ドキュメントテーマで使用される 2 つのフォントと 12 色に対応するクラスが用意されています。これらのクラスの適切な使用法は、PowerPoint 用のコンテンツアドインと併用して、アドインのフォントと色が挿入先のプレゼンテーションに合わせて調整されるようにすることです。

コンテンツのアドインのテーマのフォント

クラス	説明
`office-bodyFont-eastAsian`	本文のフォントの東アジア言語の名前。
`office-bodyFont-latin`	本文のフォントのラテン文字の名前。既定は「Calabri」です。
`office-bodyFont-script`	本文のフォントのスクリプト名。
`office-bodyFont-localized`	本文のフォントのローカライズされた名前。 Office で現在使用されているカルチャに従って既定のフォント名を指定します。
`office-headerFont-eastAsian`	ヘッダーのフォントの東アジア言語の名前。
`office-headerFont-latin`	ヘッダーのフォントのラテン文字の名前。既定は「Calabri Light」です。
`office-headerFont-script`	ヘッダーのフォントのスクリプト名。
`office-headerFont-localized`	ヘッダーのフォントのローカライズされた名前。 Office で現在使用されているカルチャに従って既定のフォント名を指定します。

コンテンツのアドインのテーマの色

クラス	説明
`office-docTheme-primary-fontColor`	第 1 フォントの色。既定は #000000 です。
`office-docTheme-primary-bgColor`	第 1 フォントの背景色。既定は #FFFFFF です。
`office-docTheme-secondary-fontColor`	第 2 フォントの色。既定は #000000 です。
`office-docTheme-secondary-bgColor`	第 2 フォントの背景色。既定は #FFFFFF です。
`office-contentAccent1-color`	フォントのアクセント 1。既定は #5B9BD5 です。
`office-contentAccent2-color`	フォントのアクセント 2。既定は #ED7D31 です。
`office-contentAccent3-color`	フォントのアクセント 3。既定は #A5A5A5 です。
`office-contentAccent4-color`	フォントのアクセント 4。既定は #FFC000 です。
`office-contentAccent5-color`	フォントのアクセント 5。既定は #4472C4 です。
`office-contentAccent6-color`	フォントのアクセント 6。既定は #70AD47 です。
`office-contentAccent1-bgColor`	背景のアクセント 1。既定は #5B9BD5 です。
`office-contentAccent2-bgColor`	背景のアクセント 2。既定は #ED7D31 です。
`office-contentAccent3-bgColor`	背景のアクセント 3。既定は #A5A5A5 です。
`office-contentAccent4-bgColor`	背景のアクセント 4。既定は #FFC000 です。
`office-contentAccent5-bgColor`	背景のアクセント 5。既定は #4472C4 です。
`office-contentAccent6-bgColor`	背景のアクセント 6。既定は #70AD47 です。
`office-contentAccent1-borderColor`	境界線のアクセント 1。既定は #5B9BD5 です。
`office-contentAccent2-borderColor`	境界線のアクセント 2。既定は #ED7D31 です。
`office-contentAccent3-borderColor`	境界線のアクセント 3。既定は #A5A5A5 です。
`office-contentAccent4-borderColor`	境界線のアクセント 4。既定は #FFC000 です。
`office-contentAccent5-borderColor`	境界線のアクセント 5。既定は #4472C4 です。
`office-contentAccent6-borderColor`	境界線のアクセント 6。既定は #70AD47 です。
`office-a`	ハイパーリンクの色。既定は #0563C1 です。
`office-a:visited`	表示済みのハイパーリンクの色。既定は #954F72 です。

次のスクリーンショットは、既定の Office テーマの使用時にアドインテキストに割り当てられるテーマの色のクラスすべて (2 つのハイパーリンクの色を除く) の例を示しています。

既定の Office テーマの色の例。

作業ウィンドウアドインのテーマクラス

OfficeThemes.css ファイルには、Office アプリケーション UI テーマで使用されるフォントと背景に割り当てられた 4 つの色に対応するクラスが用意されています。これらのクラスは、PowerPointのタスクアドインで使用するのに適しており、アドインの色が Office の他の組み込み作業ウィンドウと調整されます。

作業ウィンドウアドインのテーマのフォントと背景色

クラス	説明
`office-officeTheme-primary-fontColor`	第 1 フォントの色。既定は # B83B1D です。
`office-officeTheme-primary-bgColor`	第 1 背景色。既定は #DEDEDE です。
`office-officeTheme-secondary-fontColor`	第 2 フォントの色。既定は 262626 です。
`office-officeTheme-secondary-bgColor`	第 2 背景色。既定は #FFFFFF です。

次の方法で共有

PowerPoint アドインでドキュメントテーマを使用する

文書のテーマの色

文書のテーマのフォント

Office の UI のテーマのフォントと色

OfficeThemes.cssを使用する

OfficeThemes.css ファイルをプロジェクトに追加する

アドインの HTML ページの参照OfficeThemes.css

コンテンツアドインOfficeThemes.css HTML ページでドキュメントテーマクラスを使用する

作業ウィンドウアドインOfficeThemes.css HTML ページで Office UI テーマクラスを使用する

OfficeTheme.css のクラス

コンテンツアドインのテーマクラス

コンテンツのアドインのテーマのフォント

コンテンツのアドインのテーマの色

作業ウィンドウアドインのテーマクラス

作業ウィンドウアドインのテーマのフォントと背景色

関連項目

その他のリソース

次の方法で共有

PowerPoint アドインでドキュメント テーマを使用する

文書のテーマの色

文書のテーマのフォント

Office の UI のテーマのフォントと色

OfficeThemes.cssを使用する

OfficeThemes.css ファイルをプロジェクトに追加する

アドインの HTML ページの参照OfficeThemes.css

コンテンツ アドインOfficeThemes.css HTML ページでドキュメント テーマ クラスを使用する

作業ウィンドウ アドインOfficeThemes.css HTML ページで Office UI テーマ クラスを使用する

OfficeTheme.css のクラス

コンテンツ アドインのテーマ クラス

コンテンツのアドインのテーマのフォント

コンテンツのアドインのテーマの色

作業ウィンドウ アドインのテーマ クラス

作業ウィンドウ アドインのテーマのフォントと背景色

関連項目

その他のリソース

PowerPoint アドインでドキュメントテーマを使用する

コンテンツアドインOfficeThemes.css HTML ページでドキュメントテーマクラスを使用する

作業ウィンドウアドインOfficeThemes.css HTML ページで Office UI テーマクラスを使用する

コンテンツアドインのテーマクラス

作業ウィンドウアドインのテーマクラス

作業ウィンドウアドインのテーマのフォントと背景色