ヒーロー Web パーツを使用する

ヒーロー Web パーツを使用して、ページにフォーカスや視覚的な趣向を追加します。 ヒーロー Web パーツには最大 5 つのアイテムを表示し、説得力のある画像、文字列、およびリンクを使用して、それぞれに注意を引きつけることができます。 コミュニケーション サイトには既定でヒーロー Web パーツが含まれていますが、ヒーロー Web パーツを他のページに追加することもできます。

注: 

  • 一部の機能は、対象指定リリース プログラム に参加している組織に段階的に導入されます。 つまり、このような機能は、まだ表示されなかったり、ヘルプ記事に記載されている内容と異なったりする場合があります。

  • ユーザーはページを作成するための編集権限が必要です。 所有者がページを追加できない場合は、管理者がこの機能を無効にしている可能性があります。

目次

ヒント: Check out these YouTube videos from Microsoft Creators to learn more about modern pages!

コミュニケーション サイトのヒーロー Web パーツ:トピックとショーケース

コミュニケーション サイトを作成する場合、ページには規定でヒーロー Web パーツが含まれます。 既定の画像があらかじめ設定されています。この画像には、独自の画像、テキスト、ページ、リンク、またはドキュメントを表示するために変更したテキストとリンクが含まれています。

目的のコミュニケーション サイトの種類の [トピック] を選択すると、既定のヒーローは 5 つのタイルでレイアウトされています (タイルを 1 つから 5 つに変更できます)。

コミュニケーション サイトのヒーロー Web パーツ

目的のコミュニケーション サイトの種類の [ショーケース] を選択すると、既定のヒーローは縦方向に 3 つのレイヤーでレイアウトされています (レイヤーを 1 つから 5 つに変更できます)。

ヒーローの展示

[Web パーツの編集] ボタンを使用すると、ヒーロー Web パーツのレイアウトを、グリッドから縦方向のレイヤーに変更できます。 [Web パーツの編集] ボタン そして、各タイルおよびレイヤーの [詳細の編集] ボタンを使用すると、各タイルおよびレイヤーのリンク、画像、およびテキストを変更できます。 詳細の編集

ヒーローの編集ボタン

1. [Web パーツ] ボタンの編集

2. [詳細] ボタンの編集

ヒーロー Web パーツのレイアウトを変更する

このビデオを見て、その方法を確認するか、ビデオの下にある手順に従ってください。

Surface Book のデバイスの写真
  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 左側にある [Web パーツの編集] ボタンをクリックして、 [Web パーツの編集] ボタン 目的のレイアウトの種類を選択します。ユーザーは (このようなトピック サイトで) タイルを 5 つまで、または (ショーケース サイトなどで) レイヤーを 5 つまで選択できます。

    ヒーロー レイアウト オプション ヒーロー レイアウト オプション

各タイルまたはレイヤーの画像、テキスト、およびリンクを変更する

このビデオを見て、その方法を確認するか、ビデオの下にある手順に従ってください。

Surface Book のデバイスの写真
  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 変更するタイルやレイヤーの右下にある [詳細の編集] 詳細の編集 をクリックします。

  3. ツールボックスの [変更] をクリックしてから、リンクを取得する場所を選択します。

    ファイル ピッカー オプションの図。
    • [最近使用したファイル]: 最近開いた画像、ページ、またはドキュメントがある場合は、この一覧に表示されます。

    • ストック画像 ストック画像は Microsoft によって提供されています。 高品質で、お客様のために適切なサイズにすることができます。 SharePoint 管理者の場合は、コンテンツ配信ネットワーク (CDN)を有効にして、画像の取得のパフォーマンスを向上させることをお勧めします。

    • [Web 検索]: Bing からクリエイティブ コモンズ ライセンスを利用する画像を検索できます。 ページに画像を挿入する前に、ライセンスを確認する責任があります。 Microsoft 365 でのみSharePoint ます。

    • 組織: 組織で承認済みアセットのセットを指定している場合は、ここでその設定から選ぶことができます。  SharePoint 管理者が [組織] のアセット ライブラリを作成する方法については、「組織のアセット ライブラリを作成する」を参照してください。

    • [OneDrive]: OneDrive に保存したドキュメントまたは画像のリンクを取得できます。 Microsoft 365 でのみSharePoint ます。

    • [サイト]: 指定したサイトから、ドキュメント、画像、またはページのリンクを取得できます。

    • [アップロード]: 個人のデバイスからドキュメントや画像をアップロードできます。

    • [リンクから]: Microsoft 365 の OneDrive または SharePoint からページ、ドキュメント、または画像へのリンクを入力します。

      注: サイトに外部のリンクを使用しても、米国政府機関向けの GCC および DoD、および21Vianet が運営する Office 365 は表示されません。

  4. 画像、ページ、またはドキュメントを選択し、[開く] をクリックします。

  5. ツールボックスの [画像] で、[カスタムイメージ] または [色のみ] を選択します (色のみは、タイルのレイアウトでのみ使用でき、色はサイトのテーマの色に対応します)。

    [自動選択済み] オプションを使用すると、リンク先のページまたはドキュメントから画像が自動的に選択されます (画像が使用可能な場合)。

  6. 画像の [代替テキスト] を入力します。

  7. [オプション] で、

    • トグルを [はい] に切り替えると、[アクション リンクの呼び出し] を表示できます。 そして、[アクションのテキストの呼び出し] を追加します (たとえば、「詳細」)。 [アクション リンクの呼び出し] は、階層のレイアウトでは各レイヤーに使用できますが、タイルのレイアウトでは最大のタイルにのみ使用可能です。

    • 階層のレイアウトでは、[トピックの見出し] のトグルを [はい] に切り替えると、各レイヤーのトピックの見出しも表示できます。 そして、[トピックの見出しのテキスト] を追加します。

画像の中心点を変更する

Microsoft 365 の SharePoint では、ヒーロー web パーツ内で選択した画像の焦点を変更して、フレーム内の画像の最も重要な部分を取得できます。

  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 変更するヒーローの画像の下にあるツールバーで、[焦点 [焦点ポイントの設定] ボタン ポイントの設定] をクリックします。

  3. 画像内の目的の場所に焦点ポイントをドラッグします。

    中心点

タイルやレイヤーを並べ替える

タイルやレイヤーを好きな場所に移動して、並べ替えることができます。

  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. [項目の移動] ボタンをクリックしたまま、目的のタイルまたはレイヤーを好きな場所にドラッグします。

    ヒーローの移動アイテム

1 つの列にヒーロー Web パーツを配置する

ヒーロー Web パーツは、ページの幅に合わせて設計されています。 ヒーロー web パーツの幅がいっぱいにならない場合は、フル幅でない列に追加することができます。

このビデオを見て、その方法を確認するか、ビデオの下にある手順に従ってください。

Surface Book のデバイスの写真
  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. ヒーロー web パーツの上にマウスを置き、web パーツの左側にある丸で囲まれた+をクリックします。

  3. [セクション レイアウト] で、1 つの列を選択します。

    1 つの列
  4. Web パーツの左側にある [Web パーツの移動] ボタンを使用して、追加した列にヒーロー Web パーツをドラッグします。

    [Web パーツの移動] ボタン

    ヒーローの移動

ページに空のヒーロー Web パーツを追加する

ヒーロー Web パーツは、チーム サイトまたはコミュニケーション サイトのページに追加できます。 これを行うには、次の手順を実行します。

  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. ページ上で、既存の Web パーツの上または下にポインターを置くと、次のような丸で囲まれた + と線が表示されます。

    ページに Web パーツを追加するためのプラス記号

    [+] をクリックしてから、[ヒーロー] Web パーツを選択します。

    空の状態のヒーロー Web パーツ
  3. Web パーツの [編集] ボタンをクリックし [Web パーツの編集] ボタン 、使用するレイアウトの種類を選択します。1 つから 5 つのタイルのグリッド、または 1 つから 5 つの縦方向のレイヤーを使用できます。

  4. 変更する各タイルの [リンクの選択] をクリックします。

  5. ツールボックスで、各タイルの [選択] をクリックしてから、リンクを取得する場所を選択します。

    ツールボックスの [変更] をクリックしてから、リンクを取得する場所を選択します。

    ファイル ピッカー オプションの図。
    • [最近使用したファイル]: 最近開いた画像、ページ、またはドキュメントがある場合は、この一覧に表示されます。

    • [Web 検索]: Bing からクリエイティブ コモンズ ライセンスを利用する画像を検索できます。 ページに画像を挿入する前に、ライセンスを確認する責任があります。 Microsoft 365 でのみSharePoint ます。

    • 組織: 組織で承認済みアセットのセットを指定している場合は、ここでその設定から選ぶことができます。  SharePoint 管理者が [組織] のアセット ライブラリを作成する方法については、「組織のアセット ライブラリを作成する」を参照してください。

    • [OneDrive]: OneDrive に保存したドキュメントまたは画像のリンクを取得できます。 Microsoft 365 でのみSharePoint ます。

    • [サイト]: 指定したサイトから、ドキュメント、画像、またはページのリンクを取得できます。

    • [アップロード]: 個人のデバイスからドキュメントや画像をアップロードできます。

    • [リンクから]: Microsoft 365 の OneDrive for SharePoint から、ページ、ドキュメント、または画像へのリンクを入力します。

  6. 画像、ページ、またはドキュメントを選択し、[開く] をクリックします。

  7. ツールボックスの [イメージ] で、[カスタムイメージ] または [色のみ] を選択します。 [自動選択済み] オプションを使用すると、リンク先のページまたはドキュメントから画像が自動的に選択されます (画像が使用可能な場合)。 色専用は、タイルレイアウトでのみ使用でき、色はサイトのテーマの色に対応しています。

  8. 画像の [代替テキスト] を入力します。

  9. [オプション] (Microsoft 365 のSharePoint ) で、次の操作を行います。

    • トグルを [はい] に切り替えると、[アクション リンクの呼び出し] を表示できます。 そして、[アクションのテキストの呼び出し] を追加します (たとえば、「詳細」)。 [アクション リンクの呼び出し] は、階層のレイアウトでは各レイヤーに使用できますが、タイルのレイアウトでは最大のタイルにのみ使用可能です。

    • 階層のレイアウトでは、[トピックの見出し] のトグルを [はい] に切り替えると、各レイヤーのトピックの見出しも表示できます。 そして、[トピックの見出しのテキスト] を追加します。

ヒーロー web パーツの画像の拡大縮小

ヒーロー web パーツに最適なサイズの画像を選択するには、次の点を考慮してください。

  • Web パーツは、画面の幅をフル裁ち落としレイアウトで表示するように設計されています。

  • [タイル] レイアウトでは、web パーツの高さは8:3 の縦横比に合わせて調整され、web パーツ内の画像は4:3 の縦横比に合わせてスケーリングされます。

  • [レイヤー ] レイアウトでは、個々のレイヤーは8:3 の縦横比に合わせて拡大縮小され、各レイヤー内の画像は9:16 付近の縦横比に拡大されます。

注: ビデオへのリンクを追加したり、ヒーロー web パーツにビデオをアップロードしたりすることができます。 ただし、web パーツ内でビデオを再生することはできません。 ビデオを表示するには、ユーザーがビデオのリンクをクリックして、ビデオプレーヤーまたはリンクソースに移動します。

注:  このページは、自動翻訳によって翻訳されているため、文章校正のエラーや不正確な情報が含まれている可能性があります。 私たちの目的は、このコンテンツがお客様の役に立つようにすることです。 情報が役に立ったかどうか、ご意見をお寄せください。 参考までに、こちらから英語の記事をお読みいただけます。

ヘルプを表示

Office のスキルを磨く
トレーニングの探索
新機能を最初に入手
Office Insider に参加する

この情報は役に立ちましたか?

ご意見をいただきありがとうございます。

フィードバックをお寄せいただき、ありがとうございます。Office サポートの担当者におつなぎいたします。

×