SharePoint サイトの外観を変更する

適用先
SharePoint Server 2019 SharePoint Server 2016 Office 365 Small Business 21Vianet が運営する Office 365 - Small Business Admin

この記事では、SharePoint サイトの 全体的な外観 をサイト所有者またはデザインアクセス許可を持つユーザーとして変更する方法について説明します。 SharePoint サイトの外観をすばやく簡単にカスタマイズして、プロのスタイルとブランドを反映できます。 使用できるオプションは、使用している SharePoint のバージョンによって異なります。

SharePoint サイトの右上にある [SPO 移行ツールの設定] を選択し、[外観の変更] を選択します。

注

  • [ 外観の変更] が表示されない場合は、このオプションを管理するためのアクセス許可がない場合や、クラシック エクスペリエンスを利用している可能性があります。
  • アクセス許可の詳細については、「 SharePoint のアクセス許可レベルについて 」を参照するか、管理者に問い合わせてください。
  • クラシック エクスペリエンスを使用して SharePoint サイトの検索を変更するには、 こちらを参照してください。

テーマを使用して SharePoint サイトの色を変更する

[外観の変更>Theme] を選択します。

SharePoint サイトのテーマを変更する 目的の外観を選択します。

選択したテーマが適用されたサイトのプレビューが表示されます。

会社のブランドが承認された会社のテーマを選択するか、クラシック エクスペリエンス デザインのいずれかを使用します。

既定の SharePoint テーマのいずれかを選択し、必要に応じてカスタマイズできます。

メインの色とアクセントの色の一覧は、カスタマイズする既定の SharePoint テーマによって異なります。

既定の SharePoint テーマの色をカスタマイズするには:

  1. テーマを選択し、[ カスタマイズ] を選択します。
  2. 目的のメインの色とアクセントの色を選択し、[ 保存 ] を選択してサイトに適用します。
または、表示される内容が気に入らず、最初の内容に戻す場合は、代わりに [キャンセル ] を選択します。

注

  • 管理者は、会社が承認したテーマの一覧のみを表示するようにサイトのテーマを設定している可能性があります。 その場合、既定の SharePoint テーマは表示されません。
  • サブサイトでテーマを更新している場合、または管理者がサイトをクラシック エクスペリエンスに設定している場合は、「 クラシック エクスペリエンスデザイン」セクションの手順に従ってください。
  • 現時点では、この設定を使用してサイトの背景色を変更することはできません。 SharePoint 管理者は、「 SharePoint テーマ」の説明に従って、会社が承認したテーマに変更を加えることができます。
  • ボタンの色はサイト テーマのアクセントカラーに基づいており、サイト テーマとは別に変更することはできません。
  • ページ タイトル領域をカスタマイズする方法については、 こちらを参照してください。
  • 会社のテーマを作成してアップロードするには、「 SharePoint サイトのテーマ」を参照してください。
  • サイトをカスタマイズするその他の方法については、「 SharePoint サイトをカスタマイズする」を参照してください。

サイト ヘッダーをカスタマイズする

  1. [外観の変更>Header] を選択します。

    注

    最小および拡張ヘッダー レイアウトは、GCC、GCC High、DoD、Gallatin、およびソブリン クラウドのお客様のルック パネルの変更から一時的に削除されます。 最小ヘッダーを使用するサイトは自動的にコンパクト ヘッダーに切り替わります。拡張ヘッダー レイアウトを使用するサイトは、標準ヘッダーに自動的に切り替わります。

    header-layout

  2. レイアウトを選択します([コンパクト レイアウト] は、すべてのモダン サイトの既定値です)。

    1. 最小レイアウト: 小さなサイト ロゴ、サイト タイトル、サイト ナビゲーション、サイトの操作とラベルなど、すべてのコンテンツを 1 行で高さを減らしました。
      最小ヘッダー

    2. コンパクト レイアウト: コンテンツを 1 行に保持しながら、フルサイズのサイト ロゴを使用する大きな高さのレイアウト。
      コンパクト ヘッダー

    3. Standardレイアウト: フルサイズのサイト ロゴとコンテンツを 2 行に分割したレイアウト。
      Standard ヘッダー

    4. 拡張レイアウト: コンテンツを含む最大のレイアウトは、サイト ロゴ、サイト タイトル、および以下の他のコンテンツとは別のオプションの背景画像を含む 2 つのコンテンツ領域に分割されています。
      拡張レイアウト

      注

      [ホーム] として指定されたハブ サイトで拡張ヘッダーを使用している場合、サイト ナビゲーションはハブ ナビゲーション バーに置き換えられます。

  3. [デザイン] タブの [背景] セクションで、テーマの色を選択してサイト ヘッダーの背景色を変更します。 または、背景として画像をアップロードし、背景画像のオーバーレイ、不透明度、焦点を調整します。
    header-background

  4. [ 文字体裁 ] セクションで、使用可能なフォント パッケージの一覧からを選択して、サイト タイトルのフォントを変更します。
    header-typography

  5. [表示] セクションで、次の操作を行います。

    1. [トグル] を選択して、サイト タイトルの可視性を設定します。
    2. [ 変更] を選択してサイト ロゴのサムネイルを追加します (四角形の縦横比を必要とするエクスペリエンスで既定で使用するには正方形のロゴにする必要があります)。
    3. [ 変更] を選択 してサイト ロゴを追加します。 拡張レイアウトを使用している場合は、[ サイト ロゴ の配置] を選択します。

    注

    アイコンが正しくレンダリングされるようにするには、64 x 64 ピクセルから 192 x 64 ピクセル (幅 x 高さ) の範囲内に収まるアイコンを選択してください。

    site-header-logo

  6. 完了したら [保存] を選択します。

ナビゲーション スタイルを変更する

  1. [ 外観の変更>Navigation] を選択します。

  2. [ 向き] で、[ 水平 ] または [ 垂直] を選択します。 [水平] を選択した場合は、次のいずれかのオプションを選択できます。
    Megamenu
    SharePoint メガ メニュー
    カスケード
    SharePoint カスケード メニューの例

    注

    • Megamenu は、クラシック発行機能が有効になっているサイトではサポートされていません。
    • ナビゲーション リンクを変更するには、「 SharePoint サイトのナビゲーションをカスタマイズする」を参照してください。
    • megamenu スタイルの表示を 1 つの垂直リストとしてのみ使用する場合に、3 番目のレベルに追加されたリンク。

  3. [デザイン] タブの [文字体裁] セクションで、使用可能なフォント パッケージの一覧から選択してナビゲーション リンクのフォントを変更します。
    site-navigation-font

  4. [ 保存] を 選択して変更を適用します。

  1. サイトで、[設定] Office 365 [設定] ボタンをクリックし、[外観の変更>Footer] をクリックします。

    注

    • [設定] メニューに [外観の変更] が表示されない場合は、このオプションを管理するためのアクセス許可がない可能性があります。 詳細については、「SharePoint のアクセス許可レベルについて」を参照するか、管理者にお問い合わせください。
    • サイト フッター機能は、コミュニケーション サイト ページでのみ使用できます。 これらは、サイト上のリスト ページ、ライブラリ ページ、またはその他のページでは使用できません。

    footer-alignment

  2. [フッターの表示設定] を [オン] に切り替えて、サイトにフッターを追加します。

  3. レイアウトを選択します。

    1. 単純なレイアウト: 1 レベルのリンクとラベルを、最大 8 列の幅で表示します。

      シンプルなフッター レイアウト

    2. 拡張レイアウト: 最大 8 列の 2 つのレベルのリンクとラベルを表示します。
      拡張フッター

4. フッターリンクの配置を変更 します。

5. [ アップロード] を選択して、ロゴイメージをフッターに追加します。 イメージのサイズは自動的に変更されます。

6. フッターの名前を追加するには、[ 表示名] を入力します。

7. [デザイン] タブに移動し、背景色を選択するか、イメージを追加します。
footer-background

8. [ 文字体裁 ] セクションで、使用可能なフォント パッケージの一覧からを選択して、フッターの名前とリンクのフォントを変更します。

footer-fonts

9. [保存] を選び、変更内容を保存します。

サイトにフッターを追加したら、フッターにリンクまたはラベルを追加できます。 メニュー ラベルとリンクの左側にあるフッターで [ 編集] を 選択します。

拡張フッターの編集オプション

リンクとラベルの追加または編集の詳細については、「 SharePoint サイトのナビゲーションをカスタマイズする」を参照してください。 最大 8 つのリンクまたはラベルの 1 つのレベルを追加できます。