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

注:  最新のヘルプ コンテンツをできるだけ早く、お客様がお使いの言語で提供したいと考えております。 このページは、自動翻訳によって翻訳されているため、文章校正のエラーや不正確な情報が含まれている可能性があります。私たちの目的は、このコンテンツがお客様の役に立つようにすることです。お客様にとって役立つ情報であったかどうかを、このページの下部でお知らせください。 簡単に参照できるように、こちらに 英語の記事 があります。

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

注: 

  • 一部の機能で対象のリリース プログラムに加入している組織に徐々 に導入されています。これは、場合、この機能はまだ表示されずに、ヘルプ記事に記載されている内容と異なることになります。

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

内容

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

コミュニケーション サイトを作成するときに、既定で、ページ上のヒーロー web パーツが含まれます。既定の画像、テキストと、独自の画像、テキスト、ページ、リンク、またはドキュメントのように変更するリンクの事前登録されます。

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

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

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

ヒーローの展示

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

ヒーローの編集ボタン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. ツールボックスの画像] の下の [ユーザー設定の画像や (色のみがある単サイトのテーマの色に対応する、タイル レイアウト]、[色の色だけを選択します。

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

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

  7. [オプション] で、

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

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

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

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

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

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

    ヒーローの移動アイテム

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

ヒーロー Web パーツは、ページの幅に合わせて設計されています。ヒーロー Web パーツがページの幅でない方が良い場合は、ページに列を追加し、その列にヒーロー Web パーツを配置します。

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

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

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

  3. 最新の Web パーツをページに追加するために使用される丸付きプラス記号 をクリックします。

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

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

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

    ヒーローの移動

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  7. ツールボックスの画像] の下の [ユーザー設定の画像色だけを選択します。[自動選択オプション自動的にイメージを選択したページまたはドキュメントにリンクしている場合はします。色のみが並べて表示] レイアウトでのみ使用できると色が、サイトのテーマの色に対応します。

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

  9. [オプション] で、

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

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

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

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

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

  • タイルのレイアウト] で、web パーツの高さの 4:3 の縦横比を 8:3、および web パーツのスケール内の画像の縦横比をフォローする縮尺を変更します。

  • レイヤーのレイアウト] の個々 のレイヤーを 8:3、および各レイヤーのスケール 9時 16分付近にある縦横比を内の画像の縦横比を拡大または縮小します。

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

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

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

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

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

×