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

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

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

注: 

  • 一部の機能は、対象となるリリースプログラムにオプトインした組織に段階的に導入されています。これは、この機能がまだ表示されていない場合、または、サポート記事で説明した内容と異なる場合があることを意味します。

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

内容

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

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

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

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

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

ヒーローの展示

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

ヒーローの編集ボタン

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

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

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

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

お使いのブラウザーではビデオがサポートされていません。 Microsoft Silverlight、Adobe Flash Player、Internet Explorer 9 のいずれかをインストールしてください。
  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

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

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

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

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

お使いのブラウザーではビデオがサポートされていません。 Microsoft Silverlight、Adobe Flash Player、Internet Explorer 9 のいずれかをインストールしてください。
  1. ページがまだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

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

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

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

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

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

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

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

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

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

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

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

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

  7. [オプション] で、

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

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

画像のフォーカスポイントを変更する

ヒーロー web パーツ内で選択した画像のフォーカスポイントを変更して、フレーム内で画像の最も重要な部分を取得できます。

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

  2. 変更するヒーローイメージの下部にあるツールバーの [フォーカスポイント [フォーカスポイントの設定] ボタン の設定] をクリックします。

  3. 画像内の目的の位置までドラッグします。
    フォーカスポイント

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

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

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

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

    ヒーローの移動アイテム

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

ヒーロー web パーツは、ページの幅を最大限に活用するように設計されています。ヒーロー web パーツが全角を占有していない場合は、幅が完全でない列に移動することができます。

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

お使いのブラウザーではビデオがサポートされていません。 Microsoft Silverlight、Adobe Flash Player、Internet Explorer 9 のいずれかをインストールしてください。
  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 パーツの高さは、8:3 の縦横比に従って拡大縮小され、web パーツ内の画像はアスペクト比が4:3 になります。

  • レイヤーレイアウトでは、個々のレイヤーは8:3 の縦横比に拡大され、各レイヤー内の画像は、9:16 付近の縦横比になります。

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

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

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

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

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

×