お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

テーマ設定を編集する

更新日時 2020年 7月 15日

対象製品

CMS Hub  Professional, Enterprise

テーマとは、CMS Hub でウェブサイトのページとブログに適用できるスタイルとテンプレートのセットのことです。ウェブサイトの外観に一貫性を持たせるには、すべてのページに同じテーマを使用し、ページのスタイル設定をテーマ設定で管理します。テーマの設定をカスタマイズするには、ページエディターの左側のパネルにある [デザイン] タブをクリックします。トグル、スイッチ、カラーピッカーなどの直観的なコントロールを使用して簡単にテーマ設定を調整できます。

始める前に

グローバルテーマ設定は、テーマテンプレートを使用しているページの主な色、フォント、ボタンスタイルを制御します。ウェブサイトのコンテンツによっては、アカウント設定の別の部分で管理します。このようなコンテンツには以下が含まれます。

テーマ設定を編集する

テーマ設定を編集するには、まず、テーマテンプレートを使用してページを作成する必要があります。ページエディター内でテーマ設定にアクセスするには、左側にある [デザイン] タブをクリックします。次に、[テーマ設定を編集] をクリックします。

edit-global-themes-from-editor

注:各テーマは、ウェブサイト開発者がオプションを固有に組み合わせてデザインしたものです。したがって、テーマに含まれるコンポ―ネントによって、表示されるスタイルオプションはわずかに異なります。 

色、フォント、間隔をカスタマイズすると、ページ上のすべての要素に適用される既定のスタイルが設定されます。リンクの色、ボタンの色、既定のフォームの色といった特定の詳細を編集するには、[詳細設定] の横にある [編集] をクリックして、テンプレートに使用できる追加のテーマ設定を表示します。

テーマの色の設定により、プライマリ色、セカンダリ色、背景色がテーマテンプレートに含まれるすべての要素に適用されます。これらのスタイルは、ウェブサイトのすべての要素に適用されます。見出し、フォント、リンクのより具体的な設定をカスタマイズするには、[編集] をクリックします。

edit-global-theme-colors

フォント

ウェブサイトの見出し、フォーム、ボタン、本文テキストに適用するプライマリフォントとセカンダリフォントを選択します。すべての Google フォントがサポートされています。プライマリフォントまたはセカンダリフォントの色をカスタマイズするには、カラーバブルをクリックします。単純な色の値を選択することも、[詳細] タブをクリックして、カラーピッカーで特定の 16 進値を選択することもできます。 

 

edit-global-theme-fonts

間隔 

間隔のテーマ設定では、ページコンテンツの最大幅と、ページ上の異なる要素間の垂直方向の間隔を制御します。

edit-global-theme-spacing

その他の設定

テーマ設定には、ページのより具体的なスタイルに応じたその他の詳細設定が含まれていることがあります。テーマに含まれるスタイルオプションは、テーマのコード化されたテンプレートに含まれるテーマフィールドに基づきます。探している設定が見つからない場合は、テンプレートデザイナーに連絡して、テンプレートにどのようなオプションが含まれているのかを確認してください。

以下の例は、テーマに含めることができる他のオプションの種類に関する一般的なガイドです。テンプレートで含めることができるテーマフィールドの完全なリファレンスについては、デザイナードキュメントをご覧ください。

注:フォント、色、スタイルは、ページ上のリッチテキストモジュール内でをカスタマイズすることも、ページエディター内で既定のスタイルをオーバーライドしてカスタマイズすることもできます。これらのスタイルの変更は、このテーマを使用しているすべてのページに適用する場合に限って行ってください。

タイポグラフィ

タイポグラフィ設定では、テンプレートに含まれている特定の要素に適用されるフォントを制御できます。すべての Googleフォントがサポートされています。また、テーマに含まれている特定の見出し、フォント、リンクに適用するカスタムの色を選択することもできます。

  • 見出し:テーマに含まれている任意の見出しに適用するフォント、色、スタイルを精密にカスタマイズできます。
  • 本文:ページの本文のみのフォント、色、またはテキストサイズをカスタマイズします。 
  • リンク:ウェブサイト上のリンクの既定の色をカスタマイズします。また、訪問者がリンクの上にカーソルを重ねた時点またはリンクをクリックした時点で適用するリンクの色と動作もカスタマイズできます。

ボタン

ページとブログ上のボタンにカスタムの色、フォント、スタイルを設定できます。ウェブサイト開発者がテーマをどのように作成したかによっては、ページエディター内で特定のページのボタンのサイズやタイプを交換できる場合もあります。

  • サイズ:ページ上のボタンのサイズを小、通常、大で指定します。 
  • プライマリ:プライマリボタンは、訪問者がページ上で行う最も重要なアクションに使用されます。このボタンには目立った色を使用して、訪問者の注意を引くようにします。
  • セカンダリ:ページ上にすでに 1 つのプライマリボタンがある場合、比較的重要性が低いアクションにはセカンダリボタンを使用します。セカンダリボタンは通常、ページに対して優先度の低いアクションに適用されます。 
  • シンプル:ページ内のシンプルなボタンモジュールに適用される、既定のフォントとスタイルです。

フォーム

フォームの既定の色、フォント、テキストスタイル、ボタンスタイルをカスタマイズします。

  • タイトル:フォームの上に表示されるテキストフィールドに適用されるスタイルです。ここには通常、挨拶やフォームを入力する際の手順が含まれます。フォームに設定されるこれらのスタイルは、テーマの設定のこの部分でのみ管理できます。
  • ラベル:フォームフィールドの上に表示されるラベルに適用されるスタイルです。
  • フィールド:フォームフィールド自体の名前に適用されるスタイルです。
  • ヘルプテキスト:各フォームフィールド内に表示される、訪問者に送信する情報のタイプを伝えるためのサンプルコンテンツです。
  • 送信:フォームに適用するボタンのスタイルとサイズを選択します。
  • 背景色:フォームに適用される背景色です。
  • 境界線:フォームフィールドを囲む境界線の色です。
  • パディング:ページ上のフォーム周囲に設ける間隔の料です。

テーブル

ページに追加されているテーブルの既定の色、フォント、間隔、境界線を設定します。

  • テーブルヘッダー:テーブルヘッダーのフォントに適用される色と、テーブルの最初の行の全幅に適用される既定の背景色です。テーブルヘッダーの下側に沿って、アクセントカラーとして境界線を設定することもできます。
  • 文字色:テーブル内のフォントに使用する既定の色です。
  • 背景色:テーブルのセルの背景に使用する既定の背景色です。
  • 境界線:テーブルの既定の境界線の色、幅、スタイルです。
  • パディング:ページ上のテーブルの上下に設ける間隔の料です。 

ページ上のリッチテキストモジュールにテーブルを挿入する方法の詳細を確認してください。

ウェブサイトヘッダー

これらの設定は、ナビゲーションメニューを含むページヘッダーに表示される色とフォントを制御します。アカウント設定でナビゲーションメニューをセットアップする方法を確認してください。テーマテンプレートに会社ロゴを設定するには、[ブランディング] セクションでアカウントの規定値にロゴ画像を追加します。

  • メニュー:訪問者が表示したとき、カーソルを重ねたとき、メニュー項目をクリックしたときにナビゲーションメニューに適用するフォントの色とスタイルを選択します。これらのスタイルは、テーマの設定のこの部分でのみ管理できます。
  • 背景色:ウェブサイトヘッダーの背景に使用する既定の色を選択します。
  • 下境界線:必要に応じて、ウェブサイトヘッダーの下に境界線として水平線を追加できます。スタイルを選択して下境界線を有効にしてから、境界線の色と幅を選択します。

フッター

これらの設定は、ナビゲーションメニューを含むページフッターに表示される色とフォントを制御します。アカウント設定でナビゲーションメニューをセットアップする方法を確認してください。

  • メニュー:テーマのフッター内のナビゲーションメニューに適用するフォントの色とスタイルを選択します。訪問者が表示したとき、カーソルを重ねたとき、メニュー項目をクリックしたときに適用する色をカスタマイズできます。これらのスタイルは、テーマの設定のこの部分でのみ管理できます。
  • 背景色:ウェブサイトフッターの背景に使用する既定の色を選択します。
  • 下境界線:必要に応じて、ウェブサイトフッターの下に境界線として水平線を追加できます。スタイルを選択して下境界線を有効にしてから、境界線の色と幅を選択します。

ブログ

これらの設定は、リストページテンプレートとブログ記事テンプレートのスタイルを制御します。

バナー画像:ブログテンプレートのヘッダーの背景で使用する画像をアップロードします。ブログのホームページに使用する画像と、すべてのブログ記事に適用する画像をそれぞれ 1 つ選択できます。 

タグ:ブログ記事の上部に表示されるブログタグに使用する既定の色、フォント、スタイルを設定します。

/jp/website-pages/edit-your-global-theme-settings