パブリックサイトのデザインの変更

パブリックサイトのデザイン修正

Office 365のパブリックサイトは、多くのCMSと同様に、サイト全体の統一されたデザインと、各ページのコンテンツを独立して管理します。

たとえば、ヘッダやフッタなどはWebサイト全体を通じてほとんどのページに共通で使用するのが一般的です。こうした、Webサイトに共通の部分と、ページ毎に異なる部分を分離して管理することで、Webサイトの制作と運用管理を効率化します。 今回は、このWebサイト全体に共通する部分の設定を紹介します。

基本デザインの変更

パブリックサイトの基本デザインは、次の手順で修正します。

(1)Office 365にサインインし、上部メニューバーから「サイト」をクリックして、「パブリックサイト」をクリックします。

(2)パブリックサイトが表示されたら、上部の管理メニューから「サイト」タブをクリックし、「見た目の変更」をクリックします。CSSなどを変更し、コンテンツ(文章などのデータ)には手を加えず、表示だけを変更します。

※「ページ」タブをクリックすると、Webサイト全体のデザインではなく、個々のページの独自部分を編集できますが、個々のページの編集については次回紹介します。

(3)あらかじめ用意されているデザインテンプレートを表示しますので、その中から、好みのスタイルをクリックして選択します。

(4)選択したテンプレートの詳細設定ページで、背景画像(壁紙)、文字色の組み合わせ、Webサイトのレイアウト、フォントなどを、好みに応じて変更します。

背景画像を変更するときは、「変更」をクリックして、背景に使用する画像ファイルをアップロードします。

(5)好みのデザインになったら、「プレビュー」をクリックして、最終的にどのようなデザインになるのかを確認します。

(6)プレビュー画面を確認したら、「はい、確定します」をクリックして、設定を確認します。もし、再修正するときは「いいえ、まだ完成ではありません」をクリックして、手順(4)の画面に戻ります。

タイトルの編集

Webサイトのタイトルやその説明文を修正します。ページに表示するタイトルを修正するだけでなく、WebページのHTMLコードにタグとして埋め込まれますので、Googleなどの検索サイトからの検索にも影響します。一般の閲覧者が検索しやすいように設定してください。

(7)「サイト」タブの「タイトルの編集」をクリックします。

(8)「タイトル」と「説明」を入力し、「OK」をクリックします。

検索サイトの検索エンジンの検索対象になりますので、「タイトル」だけでなく「説明」も重要です。

ロゴの修正

ロゴマークの画像ファイルを用意し、アップロードしてロゴマークを変更できます。

(9)「サイト」タブの「ロゴの変更」をクリックします。

(10)ロゴの画像ファイルをローカルコンピュータからアップロードするときは「コンピュータから」、SharePoint Onlineにアップロード済みの画像ファイルを指定するときは「SHAREPOINTから」をクリックして、画像ファイルを指定します。

(11)「説明の入力」に、ロゴに対する説明文を入力します。画像ファイルを表示できない環境で代替テキストとして表示されると同時に、視覚障害者が使用する音声読み上げソフトの読み上げ対象となりますので、簡潔でわかりやすい説明文を入力してください。入力したら「OK」をクリックします。

メニューの修正

表示されているメニューの表示/非表示の切り替え、他のWebページやWebサイトへのリンクの設定などは「編集メニュー」を使用します。

(12)「サイト」タブの「編集メニュー」をクリックします。各メニューに記号が表示されますので、設定を変更して「保存」をクリックしてください。

記号と意味

×	メニューを削除します。
目マーク	そのメニューが表示状態にあることを示しています。目マークをクリックすると、メニューを非表示に切り替えます。
－	そのメニューが日表示状態にあることを示しています。－をクリックすると、そのメニューを表示に切り替えます。
＋リンク	クリックすると、他のWebページやWebサイトへのリンクをメニューとして追加できます。

ヘッダとフッタの修正

ヘッダやフッタを修正するには、サイト要素の編集メニューを使用します。

(13)「サイト」タブの「サイト要素の編集」をクリックします。

(14)ヘッダ、あるいはフッタの要素を編集し、編集が終わったら「保存」をクリックして修正内容を保存します。

「サイト要素の編集」画面では、ページ上部の「テキストの書式設定」タブで、Microsoft Wordの様な書式設定リボンを表示します。Wordと同じ感覚で、文章を編集し、あるいは飾り付けできます。また「挿入」タブをクリックすると、リンクやWebアプリなどを挿入して貼り付けることができます。

検索ボックスの表示/非表示

ヘッダに表示する検索ボックスの表示、非表示を変更するには、専用のメニューを使用します。

(15)「サイト」タブの「検索ボックス」をクリックします。検索ボックス設定のダイアログが表示されたら、チェックボックスのオン、オフを切り替えて、「保存」をクリックします。チェックボックスがオンのときに非表示、チェックボックスがオフのときに表示ですので、注意してください。

(16)Webサイトのデザインを変更したパブリックサイトの例。

次回は、ページの修正手順を紹介します。