SharePoint のカラー パレットとフォント

このリファレンスを使用して、SharePoint で使用されるカラー パレットまたはフォント パターンを定義します。

[!重要] この機能拡張オプションは、従来の SharePoint エクスペリエンスでのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。

カラー パレット

カラー パレットは、SharePoint サイトで使用される色の組み合わせです。 SharePoint サイトのカラー パレットは、カラー パレット ファイルで定義されます。 またカラー スロットは、サイトのサムネイルおよびプレビュー イメージを生成するため、マスター ページ プレビュー ファイルによっても使われます。 次に、カラー パレット ファイルとマスター ページ プレビュー ファイルの構造について説明します。

• カラー パレット ファイル (.spcolor)

  カラー パレット ファイルは、[ 外観の変更 ] ウィザードで使用されます。これにより、ユーザーは SharePoint テーマ のユーザー インターフェイスを使用してサイトの外観を変更できます。 既定では、SharePoint には 32 個のカラー パレット ファイルがインストールされます。 追加のカラー パレット ファイルを作成することもできます。 次の例は、カラー パレット ファイルの形式を示しています。

<s:colorPalette isInverted="InvertedSetting" previewSlot1="Slot1" previewSlot2="Slot2" previewSlot3="Slot3" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:color name="ColorSlot" value="Color" />
    <!--additional color slots-->
</s:colorPalette>

カラー パレット ファイルでは、次のプレース ホルダーが置き換えられます。

• InvertedSetting はブール値です。 カラー パレットが一般的に暗い背景に明るいテキストの場合は true です。 カラーパレットが一般的に明るい背景に暗いテキストの場合は false です。

• Slot1 は、テーマ エクスペリエンスのカラー パレット選択のパレット アイコンの最初のブロックとして使用される、カラー スロットの注釈名です。

• Slot2 は、テーマ エクスペリエンスのカラー パレット選択のパレット アイコンの第 2 ブロックとして使用される、カラー スロットの注釈名です。

• Slot3 は、テーマ エクスペリエンスのカラー パレット選択のパレット アイコンの第 3 ブロックとして使用される、カラー スロットの注釈名です。

• ColorSlot は、定義するカラー スロットの注釈名 (SiteTitle など) です。

• Color は、指定したカラー スロットに使用する色の 16 進値です。 これは、6 桁 (RRGGBB) または 8 桁 (AARRGGBB) の場合があります。 16 進値が 8 桁の場合、最初の 2 桁は不透明度レベル (00-FF、0 から 255 にマップ) を表します。 16 進値が 6 桁の場合、既定の不透明度は 100% または FF です。

カラー パレット ファイルは、ルート サイトのテーマ ギャラリーにあるサイト コレクション内の 15 フォルダー (http:// SiteCollectionName/_catalogs/theme/15/) にあります。 SharePoint ユーザー インターフェイスからテーマ ギャラリーにアクセスするには、[ サイトの設定] ページの [ Web デザイナー ギャラリー] で、[ テーマ] を選択し、[ 15] を選択します。

• マスター ページ プレビュー ファイル (.preview)

  マスター ページ プレビュー ファイルは、 外観の変更ウィザードの使用時に、サムネイル イメージとプレビュー イメージの生成に使用されます。 マスター ページには、 外観の変更ウィザードで使用される、対応するプレビュー ファイルが存在する必要があります。 プレビュー ファイルは特殊な形式のファイルで、既定のカラー パレット、既定のフォント パターン、トークン化された CSS およびトークン化された HTML の各セクションが存在します。 このファイルは文字列トークンを使用して、カラー スロットの値、フォント名、およびローカライズされた UI 文字列を取得します。 次の例では、マスター ページ プレビュー ファイルで使用されるカラー スロットを示します。

[ID] #dgp-pageContainer
{
    background-color: [T_THEME_COLOR_PAGEBACKGROUND];
    color: [T_THEME_COLOR_BODYTEXT];
    width: 100%;
    height:100%;
    background-image: url('[T_IMAGE]');
    background-size: cover;
    font-family: [T_BODY_FONT];
}

詳細については、「方法: SharePoint でマスター ページ プレビュー ファイルを作成する」を参照してください。

カラー スロットのマッピング

表 1 では、SharePoint サイトで使用可能なカラー スロットおよびどこで使用されているかについて説明します。

注:

ナビゲーション項目について説明する場合、ユーザーがナビゲーション項目をクリックまたはタッチしたときに、押されたが適用されます。選択は、ユーザーがページに移動したときに適用されます。> 次に、アクションの通常のフローと、各手順でナビゲーション項目リンクに適用されるカラー スロットをまとめます。> HeaderNavigationText> ユーザーがナビゲーション項目リンクの上にカーソルを置きます。HeaderNavigationHoverText> ユーザーがナビゲーション項目のリンクをクリック、タッチ、または選択します。HeaderNavigationPressedText> ユーザーは選択したページに移動します。 ユーザーが現在アクセスしているページのナビゲーション アイテムに適用されるカラー スロット: HeaderNavigationSelectedText

表 1. カラー スロット

注釈名	色が UI のどこで使用されるか	トークン名
BodyText	通常の本文テキスト。	[T_THEME_COLOR_BODYTEXT]
SubtleBodyText	通常より明るい必要がある本文テキスト。 メタデータ テキストなどがその例です。	[T_THEME_COLOR_SUBTLEBODYTEXT]
StrongBodyText	通常の本文テキストよりも目立つ必要があるテキストの本文テキストの色。	[T_THEME_COLOR_STRONGBODYTEXT]
DisabledText	無効化されたテキスト。 メニューで使用できないアイテムなどがその例です。	[T_THEME_COLOR_DISABLEDTEXT]
SiteTitle	ページ タイトルのテキストの色。	[T_THEME_COLOR_SITETITLE]
WebPartHeading	Web パーツの見出しのテキストの色。	[T_THEME_COLOR_WEBPARTHEADING]
ErrorText	必要に応じてエラーのテキスト、枠線、および背景に使用される、主要なエラーの色。	[T_THEME_COLOR_ERRORTEXT]
AccentText	アクセント付き本文テキストのテキストの色。	[T_THEME_COLOR_ACCENTTEXT]
SearchURL	検索結果で検出された URL のテキストの色。 新しいアイテムまたは成功したステータス通知にも使用されます。	[T_THEME_COLOR_SEARCHURL]
Hyperlink	ハイパーリンクのテキストの色。	[T_THEME_COLOR_HYPERLINK]
HyperlinkFollowed	表示済みのハイパーリンクのテキストの色。	[T_THEME_COLOR_HYPERLINKFOLLOWED]
HyperlinkActive	押した場合のハイパーリンクの色。	[T_THEME_COLOR_HYPERLINKACTIVE]
CommandLinks	サイズが原因で、本文テキストの色より少し明るい必要がある、大きなコマンド リンク。	[T_THEME_COLOR_COMMANDLINKS]
CommandLinksSecondary	小さいため、目立つためにはっきりした色で示されるリンクのコマンド リンクの色。	[T_THEME_COLOR_COMMANDLINKSSECONDARY]
CommandLinksHover	ポイントされている場合のコマンド リンクの色。	[T_THEME_COLOR_COMMANDLINKSHOVER]
CommandLinksPressed	押された場合のコマンド リンクの色。	[T_THEME_COLOR_COMMANDLINKSPRESSED]
CommandLinksDisabled	コマンド リンクが無効の場合のコマンド リンクの色。	[T_THEME_COLOR_COMMANDLINKSDISABLED]
BackgroundOverlay	オプションのバックグラウンド イメージとページ コンテンツ間で表示される、主要な背景色。	[T_THEME_COLOR_BACKGROUNDOVERLAY]
DisabledBackground	ブラウザー コントロール (たとえば入力ボックス、ボタン以外の選択ボックス)など、無効化された要素の背景。	[T_THEME_COLOR_DISABLEDBACKGROUND]
PageBackground	ページの背景色。 オプションの背景イメージの後ろに表示されます。	[T_THEME_COLOR_PAGEBACKGROUND]
HeaderBackground	ページのヘッダー領域の背景色。	[T_THEME_COLOR_HEADERBACKGROUND]
FooterBackground	ページのフッター領域の背景色。	[T_THEME_COLOR_FOOTERBACKGROUND]
SelectionBackground	選択されたリスト アイテムとドロップダウン メニュー アイテムの背景色。	[T_THEME_COLOR_SELECTIONBACKGROUND]
HoverBackground	ポイントされているリスト アイテムとドロップダウン メニュー アイテムの背景色。	[T_THEME_COLOR_HOVERBACKGROUND]
RowAccent	選択されたリスト アイテムのアクセント付きの左側の枠線。	[T_THEME_COLOR_ROWACCENT]
StrongLines	ポイントされているブラウザー コントロールの枠線。	[T_THEME_COLOR_STRONGLINES]
Lines	ブラウザー コントロールの枠線。	[T_THEME_COLOR_LINES]
SubtleLines	薄い枠線の色。 たとえば、インライン編集用の枠線など。	[T_THEME_COLOR_SUBTLELINES]
DisabledLines	入力ボックスや選択ボックスなど、無効化されたブラウザー コントロールの枠線の色。	[T_THEME_COLOR_DISABLEDLINES]
AccentLines	選択されたブラウザー コントロールのフォーカスされた枠線の色。	[T_THEME_COLOR_ACCENTLINES]
DialogBorder	ダイアログ ボックスの枠線の色。	[T_THEME_COLOR_DIALOGBORDER]
ナビゲーション	水平方向と垂直方向のナビゲーション アイテムのテキストの色。	[T_THEME_COLOR_NAVIGATION]
NavigationAccent	選択された水平方向のナビゲーション アイテムのテキストの色。	[T_THEME_COLOR_NAVIGATIONACCENT]
NavigationHover	ポイントされているナビゲーション テキストの色。 最上位のナビゲーションと、水平モードのクイック起動に適用されます。	[T_THEME_COLOR_NAVIGATIONHOVER]
NavigationPressed	押された場合のナビゲーション アイテムのテキストの色。 最上位のナビゲーションと、水平モードのクイック起動に適用されます。	[T_THEME_COLOR_NAVIGATIONPRESSED]
NavigationHoverBackground	ナビゲーション アイテムをポイントしている場合の、垂直モードのクイック起動アイテムの背景色。	[T_THEME_COLOR_NAVIGATIONHOVERBACKGROUND]
NavigationSelectedBackground	ナビゲーション アイテムを選択した後の、垂直モードのクイック起動アイテムの背景色。	[T_THEME_COLOR_NAVIGATIONSELECTEDBACKGROUND]
EmphasisText	強調された背景の上に表示されるテキストの色。	[T_THEME_COLOR_EMPHASISTEXT]
EmphasisBackground	強調されたテキストの背景に直接表示される、アクセント付き背景色。	[T_THEME_COLOR_EMPHASISBACKGROUND]
EmphasisHoverBackground	強調された背景を使用している要素に対して、ポイントされた背景色。	[T_THEME_COLOR_EMPHASISHOVERBACKGROUND]
EmphasisBorder	強調された背景を使用している要素の枠線の色。	[T_THEME_COLOR_EMPHASISBORDER]
EmphasisHoverBorder	強調された背景を使用している要素をポイントしたときの枠線の色。	[T_THEME_COLOR_EMPHASISHOVERBORDER]
SubtleEmphasisText	弱く強調された背景の上に表示されるテキスト。	[T_THEME_COLOR_SUBTLEEMPHASISTEXT]
SubtleEmphasisCommandLinks	弱く強調された背景の上に表示されるリンクのコマンド リンクの色。	[T_THEME_COLOR_SUBTLEEMPHASISCOMMANDLINKS]
SubtleEmphasisBackground	弱く強調されたテキストの後ろに直接表示される背景。	[T_THEME_COLOR_SUBTLEEMPHASISBACKGROUND]
TopBarText	ウェルカム メニュー、クイック アクセス ツールバー アイコン、および閉じたリボン タブのテキストとグリフの色。	[T_THEME_COLOR_TOPBARTEXT]
TopBarBackground	トップ バーの背景色。トップ バーは、スィート ナビゲーションの下と右側に表示されます。	[T_THEME_COLOR_TOPBARBACKGROUND]
TopBarHoverText	ウェルカム メニュー、クイック アクセス ツールバー アイコン、および閉じたリボン タブをポイントした場合のテキストとグリフの色	[T_THEME_COLOR_TOPBARHOVERTEXT]
TopBarPressedText	ウェルカム メニュー、クイック アクセス ツールバー アイコン、および閉じたリボン タブを押した場合のテキストとグリフの色	[T_THEME_COLOR_TOPBARPRESSEDTEXT]
HeaderText	ヘッダー領域内の全アイテムの基本テキストの色。	[T_THEME_COLOR_HEADERTEXT]
HeaderSubtleText	ヘッダー領域内の検索ボックスのヘルプ テキスト。	[T_THEME_COLOR_HEADERSUBTLETEXT]
HeaderDisableText	ヘッダー領域内で検索ボックスが無効化されている場合の検索ボックスのテキスト。	[T_THEME_COLOR_HEADERDISABLETEXT]
HeaderNavigationText	ヘッダー領域内のナビゲーション リンクの基本テキストの色。	[T_THEME_COLOR_HEADERNAVIGATIONTEXT]
HeaderNavigationHoverText	リンクをポイントした場合の、ヘッダー領域内のナビゲーション リンクのテキストの色。	[T_THEME_COLOR_HEADERNAVIGATIONHOVERTEXT]
HeaderNavigationPressedText	リンクを押した場合の、ヘッダー領域内のナビゲーション リンクのテキストの色。	[T_THEME_COLOR_HEADERNAVIGATIONPRESSEDTEXT]
HeaderNavigationSelectedText	リンクを選択した後の、ヘッダー領域内のナビゲーション リンクのテキストの色。	[T_THEME_COLOR_HEADERNAVIGATIONSELECTEDTEXT]
HeaderLines	ヘッダー領域内の検索ボックスの線。	[T_THEME_COLOR_HEADERLINES]
HeaderStrongLines	ヘッダー領域内の検索ボックスをポイントした場合の検索ボックスの線。	[T_THEME_COLOR_HEADERSTRONGLINES]
HeaderAccentLines	ヘッダー領域内の検索ボックスをフォーカスした場合の検索ボックスの線。	[T_THEME_COLOR_HEADERACCENTLINES]
HeaderSublteLines	ヘッダー領域内で検出された薄い線。 既定の CSS では使われません。	[T_THEME_COLOR_HEADERSUBTLELINES]
HeaderDisabledLines	ヘッダー領域で検索ボックスが無効にされている場合の検索ボックスの線。	[T_THEME_COLOR_HEADERDISABLEDLINES]
HeaderDisabledBackground	ヘッダー領域で検索ボックスが無効にされている場合の検索ボックスの背景。	[T_THEME_COLOR_HEADERDISABLEDBACKGROUND]
HeaderFlyoutBorder	ヘッダー領域から生成された場合のドロップダウン メニューの枠線。	[T_THEME_COLOR_HEADERFLYOUTBORDER]
HeaderSiteTitle	ヘッダー領域内のサイト タイトルのテキストの色。	[T_THEME_COLOR_HEADERSITETITLE]
SuiteBarBackground	スィート ナビゲーションの背景色。	[T_THEME_COLOR_SUITEBARBACKGROUND]
SuiteBarHoverBackground	スィート ナビゲーションをポイントした場合の背景色。	[T_THEME_COLOR_SUITEBARHOVERBACKGROUND]
SuiteBarText	スィート ナビゲーション アイテムのテキストとグリフの色。	[T_THEME_COLOR_SUITEBARTEXT]
SuiteBarDisabledText	無効化されたスィート アイテムのテキストとグリフの色。 既定の CSS では使われません。	[T_THEME_COLOR_SUITEBARDISABLEDTEXT]
ButtonText	ボタンのテキストの色。	[T_THEME_COLOR_BUTTONTEXT]
ButtonDisabledText	無効化されたボタンのテキストの色。	[T_THEME_COLOR_BUTTONDISABLEDTEXT]
ButtonBackground	ボタンの背景色。	[T_THEME_COLOR_BUTTONBACKGROUND]
ButtonHoverBackground	ボタンをポイントした場合の背景色。	[T_THEME_COLOR_BUTTONHOVERBACKGROUND]
ButtonPressedBackground	ボタンを押している間のボタンの背景色。	[T_THEME_COLOR_BUTTONPRESSEDBACKGROUND]
ButtonDisabledBackground	無効化されたボタンの背景色。	[T_THEME_COLOR_BUTTONDISABLEDBACKGROUND]
ButtonBorder	ボタンの枠線の色。	[T_THEME_COLOR_BUTTONBORDER]
ButtonHoverBorder	ボタンをポイントした場合の枠線の色。	[T_THEME_COLOR_BUTTONHOVERBORDER]
ButtonPressedBorder	ボタンを押した場合の枠線の色。	[T_THEME_COLOR_BUTTONPRESSEDBORDER]
ButtonDisabledBorder	ボタンを無効化した場合の枠線の色。	[T_THEME_COLOR_BUTTONDISABLEDBORDER]
ButtonGlyph	ボタンに表示されるグリフのグリフ色。	[T_THEME_COLOR_BUTTONGLYPH]
ButtonGlyphActive	ボタンに表示されるグリフをポイントした場合のグリフの色。	[T_THEME_COLOR_BUTTONGLYPHACTIVE]
ButtonGlyphDisabled	無効化したボタンのグリフの色。	[T_THEME_COLOR_BUTTONGLYPHDISABLED]
TileText	タイル背景オーバーレイの上に表示されるテキスト。	[T_THEME_COLOR_TILETEXT]
TileBackgroundOverlay	タイルの背景オーバーレイの色。	[T_THEME_COLOR_TILEBACKGROUNDOVERLAY]
ContentAccent1	リッチ テキスト エディターの色選択から選択できる、最初のアクセント色。	[T_THEME_COLOR_CONTENTACCENT1]
ContentAccent2	リッチ テキスト エディターの色選択から選択できる、2 番目のアクセント色。	[T_THEME_COLOR_CONTENTACCENT2]
ContentAccent3	リッチ テキスト エディターの色選択から選択できる、3 番目のアクセント色。	[T_THEME_COLOR_CONTENTACCENT3]
ContentAccent4	リッチ テキスト エディターの色選択から選択できる、4 番目のアクセント色。	[T_THEME_COLOR_CONTENTACCENT4]
ContentAccent5	リッチ テキスト エディターの色選択から選択できる、5 番目のアクセント色。	[T_THEME_COLOR_CONTENTACCENT5]
ContentAccent6	リッチ テキスト エディターの色選択から選択できる、6 番目のアクセント色。	[T_THEME_COLOR_CONTENTACCENT6]

フォント パターン

フォントは、指定された SharePoint サイトのフォント パターン (.spfont ファイル) とマスター ページ プレビュー (.preview ファイル) で定義されます。 フォント パターンは、4 つの領域 (タイトル、ナビゲーション、見出し、本文) で使用されるフォントを定義します。 SharePoint には 7 つのフォント パターンが含まれています。 追加のフォント パターンを作成することもできます。 フォント パターンのファイルは、サイト コレクションのルート サイトにあるテーマ ギャラリーの 15 サブフォルダー (http:// SiteCollectionName/_catalogs/theme/15/) に格納されています。 SharePoint ユーザー インターフェイスからテーマ ギャラリーにアクセスするには、[ サイトの設定] ページの [ Web デザイナー ギャラリー] で、[ テーマ] を選択し、[ 15] を選択します。

次の例では, .spfont ファイルの形式について説明します。

<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="FontSchemeName" previewSlot1="Slot1" previewSlot2="Slot2" xmlns:s="http://schemas.microsoft.com/sharepoint/">
  <s:fontSlots>
    <s:fontSlot name="FontSlotName">
      <s:latin typeface="LatinScriptFont" />
      <s:ea typeface="EAScriptFont"/>
      <s:cs typeface="CSFont" />
      <s:font script="Language" typeface="ScriptFont" />
      <!--Additional fonts-->
  </s:fontSlots>
  <!--Additional font slots-->
</s:fontScheme>

.spfont ファイルでは、次のプレースホルダーが置き換えられます。

• FontSchemeName は、フォント パターンの名前です。

• Slot1 は、 外観の変更ウィザードのフォント パターン選択のフォント アイコンの最初のブロックとして使用するフォント スロットの名前です。

• Slot2 は、 外観の変更ウィザードのフォント パターン選択のフォント アイコンの第 2 ブロックとして使用するフォント スロットの名前です。

• FontSlotName は、定義するフォント スロットの名前 (タイトルなど) です。

• LatinScriptFont は、ラテン系言語に使用するフォントです。 このフォントは代替フォントでもあります。 つまり、フォント パターンで明示的にスクリプトが設定されていない言語に使用されるフォントです。

  注:

  フォント パターンで Web フォントを使用するためには、追加情報を提供する必要があります。 詳細については、この記事の「Web フォント」セクションを参照してください。

• EAScriptFont は、東アジア系言語に使用するフォントです。 現在、 <s:ea> 要素は SharePoint で使用されていません。 ただし、フォント スキームでは <、s:ea> 要素が引き続き必要です。

• CSFont は、コンプレックス スクリプトに使用するフォントです。 現在、<s:cs> 要素は SharePoint で使用されていません。 ただし、フォント スキームでは <、s:cs> 要素が引き続き必要です。

• Language は言語スクリプトです。

• ScriptFont は、指定された言語スクリプトで使用されるフォントです。

次の例では, .spfont ファイルの一部を示します。

<s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Georgia"/>
            <s:ea typeface=""/>
            <s:cs typeface="Segoe UI Light" />
            <s:font script="Arab" typeface="Tahoma" />
            <s:font script="Deva" typeface="Mangal" />
            <s:font script="Grek" typeface="Segoe UI Light" />
            <s:font script="Hang" typeface="Malgun Gothic" />
            <s:font script="Hans" typeface="Microsoft YaHei" />
            <s:font script="Hant" typeface="Microsoft JhengHei" />
            <s:font script="Hebr" typeface="Tahoma" />
            <s:font script="Hira" typeface="Meiryo" />
            <s:font script="Thai" typeface="Tahoma" />
            <s:font script="Armn" typeface="Tahoma" />
            <s:font script="Beng" typeface="Vrinda" />
            <s:font script="Cher" typeface="Plantagenet Cherokee" />
            <s:font script="Ethi" typeface="Nyala" />
            <s:font script="Geor" typeface="Sylfaen" />
            <s:font script="Gujr" typeface="Shruti" />
            <s:font script="Guru" typeface="Raavi" />
            <s:font script="Knda" typeface="Tunga" />
            <s:font script="Khmr" typeface="DaunPenh" />
            <s:font script="Laoo" typeface="DokChampa" />
            <s:font script="Mlym" typeface="Kartika" />
            <s:font script="Mymr" typeface="Myanmar Text" />
            <s:font script="Orya" typeface="Kalinga" />
            <s:font script="Sinh" typeface="Iskoola Pota" />
            <s:font script="Syrc" typeface="Estrangelo Edessa" />
            <s:font script="Taml" typeface="Latha" />
            <s:font script="Telu" typeface="Gautami" />
            <s:font script="Thaa" typeface="MV Boli" />
            <s:font script="Tibt" typeface="Cordia New" />
            <s:font script="Yiii" typeface="Microsoft Yi Baiti" />
        </s:fontSlot>
???

SharePoint には、Web フォントに対するサポートが含まれます。 フォント パターンで Web フォントを使用するには、追加情報を提供する必要があります。 詳細については、この記事の「Web フォント」セクションを参照してください。

Web-safe フォント

Web-safe フォントは、既定でほとんどのデバイスで広く使用されているフォントのセットです。 フォント パターンで Web-safe フォントを指定するには、フォント スロットの typeface 属性にフォント名を含めます。 次の例では、フォント パターンで使用される Web-safe フォントを示します。

<s:fontSlot name="title">
  <s:latin typeface="Georgia"/>
???
</s:fontSlot>

Web フォント

Web フォントは、インターネットで使用できるフォントです。 Web フォントを使用しているサイトを表示すると、Web ブラウザーはページの他の部分と一緒に、必要なフォント ファイルをダウンロードします。 Web フォントを指定するには、(さまざまなブラウザーをサポートするための) 4 種類のフォント形式の Web フォント ファイルへの URL と、フォント パターン選択でフォント名のレンダリングに使用される大小のサムネイル イメージを指定する必要があります。

次の例では、s:latin> 要素で Web フォントを使用するために必要な<情報について説明します。

<s:latin typeface="FontName"
  eotsrc="EotFile"
  woffsrc="WoffFile"
  ttfsrc="TtfFile"
  svgsrc="SvgFile"
  largeimgsrc="LargeImgFile"
  smallimgsrc="SmallImgFile" />

Web フォントを使用するこの例では、次のプレースホルダーが置き換えられます。

• FontName は、Web フォントの名前です。

• EotFile は、Embedded Open Type フォント ファイルへの相対 URL です。

• WoffFile は、Web Open Font Format フォント ファイルへの相対 URL です。

• TtfFile は、TrueType フォント ファイルへの相対 URL です。

• SvgFile は、Scalable Vector Graphics フォント ファイルへの相対 URL です。

• LargeImgFile は、フォント パターン選択で使用する大きなサムネール イメージへの相対パスです。

• SmallImgFile は、フォント パターン選択で使用する小さなサムネール イメージへの相対パスです。

注:

ファイルへのパスは、完全な URL を指定する必要があります (例: https://tenant.sharepoint.com/sites/sitename/_catalogs/theme/15/fontfile.wof) 空の値を指定する場合でも、LargeImgFile と SmallImgFile の属性は、ラテン文字のタグの中に存在する必要があります。

フォント スロット

表 1 には、使用可能なフォント スロットと、フォント スロットがページ内のどこで使用されるかを示します。

表 1. フォント スロット

フォント スロット名	説明
title	ページ タイトルに使用されます。
ナビゲーション	ページの水平方向と垂直方向のナビゲーション要素に使用されます。
大見出し	H1 見出しに使用されます。
heading	H2 と H3 見出し、Web パーツ タイトル、ダイアログ ボックス タイトル、およびコールアウト タイトルに使用されます。
小見出し	H4 見出しに使用されます。
大きな本文	大きな本文テキスト (15 ピクセルと 19 ピクセル) に使用されます。
body	ページ内のその他のすべての部分で使用される基本フォントです。

関連項目

• SharePoint のテーマの概要

• SharePoint でカスタム テーマを展開する方法

• カスタム テーマと CSS を SharePoint にアップグレードする

• SharePoint でのマスター ページ プレビュー ファイルを作成する方法

• SharePoint チームのブログ: SharePoint テーマでスタイルを際立たせる

• SharePoint デザイン マネージャーのブランドおよびデザイン機能