SharePointサイトのページデザイン…4

前回まで、新しいコミュニケーションサイトの作成で、テンプレート「トピック」を選択した場合のレイアウトやWebパーツ（コンテンツ）の編集を紹介しました。今回は、もう一つのテンプレート「ショーケース」を紹介します。

ショーケースは画像掲載向け

トピックは記事を投稿するのに向いたコミュニケーションサイトのテンプレートでしたが、ショーケースは多数の画像を掲載するのに向いたテンプレートです。 ショーケースのコミュニケーションサイトを作成した直後には、初期設定で次のようなレイアウトになっています。

(1)「ショーケース」の初期レイアウト。ページ上部にはヒーローが3レイヤーで配置され、下部には「画像ギャラリー」（イメージギャラリー）という画像表示用のWebパーツ（コンテンツ）が配置されます。ヒーローについてはすでに当連載で紹介していますので、今回は画像ギャラリーを中心に紹介します。

＜参照＞
コミュニケーションサイトの作成について → 連載第32回
全体のレイアウト・セクションの編集について → 連載第34回
ヒーローについて → 連載第35回

ショーケースサイトの作成

「新しいサイトの作成」から「新しいコミュニケーションサイト」を選択して作成します。

(2)コミュニケーションサイト作成時に、「デザインの選択」で「ショーケース」を選択し、タイトル等の基本設定を入力して、「完了」をクリックします。

※サイト名を日本語表記にした場合、サイトアドレスの「編集」（ペン）ボタンをクリックして明示的に英数字でアドレスを入力すると、URL表記がシンプルになります。

サイトの編集

作成したサイトを編集するには、サイトのトップページ右上の「編集」をクリックして、編集モードに移行します。

(4)ヒーローのレイアウトを編集するには、ヒーローの左上にある「編集」ボタンをクリックし、右側のレイアウトオプションで、好みのレイアウトに変更します。ここでは、例として初期設定の「3つのレイヤー」から、「1つのレイヤー」に変更しました。

(5)ヒーローのタイトル、文章、画像、リンク先の変更は、ヒーローの右下の「編集」（ペン）ボタンをクリックして、ページ右側の設定で編集します。

Webパーツ「画像ギャラリー」の変更

画像ギャラリーは、登録した複数の写真をサムネイル（縮小画像）でタイル上に一覧表示する「タイル」と、マウスをクリックして左右にスライドして画像を1枚ずつ切り替える「カルーセル」の2つの表示モードがあります。初期設定は「タイル」表示です。また、「タイル」表示の場合も、表示している画像の1つをクリックすると、カルーセル表示のページを開きます。

(6)まず、テンプレートにあらかじめ用意されているサンプル画像をすべて削除します。画像ギャラリー内の各画像の「×」（削除）ボタンをクリックし、画像を削除して下さい。

(7)確認メッセージが表示されるので、「削除」をクリックして下さい。

(8)すべての画像を削除すると、画像ギャラリーにはOneDriveのようなファイルアップロードエリアが表示されます。必要な画像ファイルをマウスでドラッグ＆ドロップして、アップロードして下さい。

※「画像の追加」ボタンをクリックして、ファイルを開くウインドウで画像ファイルを選択してもかまいません。

(9)アップロードした画像はタイル状に並べられて表示されます。「発行」をクリックして、このサイトを更新して下さい。

※各画像の「編集」（ペン）ボタンをクリックして、画像にタイトルやキャプションをつけられます。

タイル表示の画像ギャラリー

発行した画像ギャラリー。

(10)各画像をクリックすると、拡大表示します。

(11)拡大表示した画像はカルーセル表示となりますので、画像左右の「＜」、「＞」をクリックして、次の画像、あるいは前の画像に表示を切り替えることができます。拡大表示（カルーセル）表示を閉じるときは、右上のグレーの「×」（閉じる）ボタンをクリックして下さい。

画像ギャラリーを最初からカルーセル表示にする

サイトの表示で、画像ギャラリーを最初からカルーセル表示することもできます。サイトを編集モードに切り替えてください。

(12)画像ギャラリー左上の「編集」（ペン）ボタンをクリックし、右側の「画像ギャラリー」メニューで、「カルーセル」をクリックして選択します。

※タイル表示にするときは、このメニューでタイル表示するサムネイル画像の縦横比率を変更できます。

(13)画像ギャラリーがカルーセル表示に切り替わったら、サイトを更新するために「発行」をクリックして下さい。

(14)カルーセル表示になった画像ギャラリー。画像にマウスポインタを重ねると、画像の左右に「＜」、「＞」ボタンが表示され、ボタンをクリックして画像をスライドできます。

※カルーセル（carousel）とは回転式のスライド映写機のことで、Webデザインでは、画像を1枚ずつスライドして表示する手法を意味します。

[PR]提供：ネクストセット