個人用サイト マスター ページをカスタマイズする

重要:  この記事は機械翻訳されています。機械翻訳についての「免責事項」をお読みください。この記事の英語版を参照するには、ここをクリックしてください。

マスター ページにより、サイト内のすべてのページの外観が決定されます。マスター ページのスタイルやコンテンツを変更することにより、サイト全体の外観をすばやく変更できます。

ここでは、既存の個人用サイト マスター ページのコピーを作成して変更を加え、新規または変更した個人用サイト マスター ページにアタッチする個人用サイトのサイト コレクション内のすべてのページに変更内容を適用します。個人用サイト マスター ページを変更すると、すべてのユーザーはそれぞれの [個人用プロファイル] ページで変更内容を確認できます。

マスター ページの詳細については、「SharePoint マスター ページの概要」をご覧ください。

注: このトピックの手順に従うには、適切な権限が必要です。既定では、SharePoint Designer 2010 を使って SharePoint Online サイトを開き、マスター ページをカスタマイズするには、サイト所有者グループ、デザイナー グループまたはサイト コレクション管理者のいずれかのメンバーである必要があります。これらのいずれかのグループのメンバーであってもこのトピックで説明しているオプションが表示されない場合は、SharePoint Online の実装で、SharePoint Designer を使用できるユーザーを制限するようにカスタマイズされている可能性があります。サイト管理者に確認してください。

この記事の内容

概要: マスター ページによるページ レイアウトの定義

個人用サイト マスター ページを表示する

カスタマイズと新規作成

個人用サイト マスター ページをカスタマイズする

個人用サイト マスター ページのコピーを作成する

コンテンツ プレースホルダー コントロールを使用する

コンテンツ プレースホルダー コントロールの特定と変更

スタイルを使用する

CSS の使用を効率化する DIV タグ

マスター ページでのスタイルの編集またはカスタム CSS の作成

概要: マスター ページによるページ レイアウトの定義

マスター ページは、SharePoint ページに共通のレイアウトおよびインターフェイスを定義します。

個人用サイト マスター ページには、サイトのタイトル、ページの上部にあるコントロールなど、個人用サイトでページ間を移動するときに表示される永続的な要素が表示されます。

これらの要素は、すべて個人用サイト マスター ページに保存されます。

SharePoint 内の個人用サイトと [個人用プロファイル] ページは、いずれもサイト上のコンテンツ ページとして扱われます。これらのページを Web ブラウザーで表示すると、個人用サイト マスター ページと組み合わされて 1 つの連続した Web ページが生成されます。

個人用サイト マスター ページによって永続的な要素とレイアウトが表示され、コンテンツ ページによってページ固有の独自コンテンツが表示されます。

個人用サイト マスター ページを表示する

  1. SharePoint Designer で個人用サイトのルート (例: https://YourDomainName-my.sharepoint.com) を開いて、ナビゲーション ウィンドウで [マスター ページ] をクリックします。

  2. "mysite.master" をクリックして、マスター ページ ギャラリー内に概要を表示します。

  3. リボンの [ファイルの編集] をクリックして、マスター ページを開きます。

この操作により、SharePoint Designer 2010 の全画面表示のページ エディターでマスター ページが開きます。

これで、デザイン ビュー、分割ビュー、またはコード ビューでページを編集できるようになります。デザイン時のサポート機能によって、カスタマイズしたマスター ページがどのように表示されるかを確認できます。また、次の図のように、タグ、スタイル、スクリプト、およびコンテンツ領域をカスタマイズするためのツールも用意されています。

[個人用サイト] マスター ページを開くと、ファイルとそのプロパティを編集できます。

A機能の簡単に作成、過去の経過したことによりも、SharePoint Designer 2010 でマスター ページをカスタマイズします。

  • ナビゲーション メニューには [マスター ページ] カテゴリが追加され、サイトのマスター ページ ギャラリーを直接表示できます。

  • マスター ページを編集するとき、ページ編集ツールを使用してレイヤーを挿入および管理したり、DIV タグを配置したりすることができます。重なっているレイヤー間を移動できる [串刺しクリック] オプションを使用することによって、これらのレイヤーやその他の要素をすばやく確認できます。

  • 作成した新しいサイトや Web パーツ ページは自動的にプライマリ マスター ページに関連付けられるようになったため、毎回手動で関連付ける必要がありません。

カスタマイズと新規作成

カスタム個人用サイト マスター ページを SharePoint 2010 サイトで使用するには、

  • 個人用サイト マスター ページ (mysite.master) のコピーをカスタマイズするか、

  • カスタム個人用サイト マスター ページを新規に作成して、これをサイトの個人用サイト マスター ページにします。

ここでは、第 1 のアプローチ、つまり個人用サイト マスター ページのコピーのカスタマイズについて説明します。

両方のアプローチには、それぞれ長所と短所があります。

mysite.master のコピーをカスタマイズする場合は、    既存の SharePoint の外観とその機能、ブランドおよびデザイン要素を使用して、それぞれのユーザーのニーズに応じてカスタマイズします。mysite.master ページのしくみを理解しようとするとたいへんですが、SharePoint ページのヘッダーを変更するなど、最小限のブランド化またはカスタマイズ作業を行う場合はこのアプローチが便利です。

空白のカスタム個人用サイト マスター ページを作成するか、スターター マスター ページを使用する場合、    ページの基盤として、空のページからデザイン全体を作成します。このアプローチでは、SharePoint でのデザインの実装方法を理解している必要があることが大きな課題ですが、作成しようとするデザインが明確であり、既存のプランやプロトタイプを徐々に減らしている場合は非常に柔軟に対応できます。このほとんど空のページはキャンバスのように機能し、最初にデザインを構築した後、必要な SharePoint コンポーネントを追加します。

個人用サイト マスター ページをカスタマイズする

SharePoint Designer 2010 でマスター ページをカスタマイズするには、サイトまたは [スタート] メニューから SharePoint Designer 2010 を開きます。SharePoint Designer 2010 でサイトを開き、ナビゲーション ウィンドウの [マスター ページ] をクリックします。

ほとんどの SharePoint Online for Enterprises サイトでは、次の図のように、マスター ページ ギャラリーに v4.masterminimal.masterdefault.master マスターページが表示され、 さらに、個人用サイトが有効である場合は、mysite.master マスター ページの合計 4 つのマスター ページが表示されます。

SharePoint 2010 マスター ページのリスト。

個人用サイト マスター ページのコピーを作成する

  1. SharePoint Designer でサイトを開いて、ナビゲーション ウィンドウで [マスター ページ] をクリックします。

  2. "mysite.master" を右クリックして、次に Ctrl キーを押しながら P キーを押して、コピーをマスター ページ ギャラリーに貼り付けます。

  3. "mysite_copy(1).master" をクリックして、マスター ページ ギャラリー内に概要を表示します。

  4. リボンの [ファイルの編集] をクリックして、マスター ページを表示します。

これによって、SharePoint Designer 2010 の全画面表示のページ エディターでマスター ページが開かれ、デザイン ビュー、分割ビュー、またはコード ビューでページを編集できるようになります。デザイン時のサポート機能によって、カスタマイズしたマスター ページがどのように表示されるかを確認できます。また、次の図のように、タグ、スタイル、スクリプト、およびコンテンツ領域を参照およびカスタマイズするためのツールも用意されています。

コンテンツ プレースホルダー コントロールを使用する

マスター ページとコンテンツ ページは、コンテンツ プレースホルダー コントロールと呼ばれる置き換え可能な領域のセットを使用して連係します。 各コンテンツ プレースホルダー (ページ コードでは ContentPlaceHolder と表示される) は、マスター ページでオーバーライドできるコンテンツを表します。 サイトのどのページでも、対応するコンテンツ コントロールを指定することによって、コンテンツ プレースホルダーに格納されている内容を置き換えることができます。 空のコンテンツ コントロールを指定することもでき、この場合、表示されるページではその要素は完全に削除されます。

重要: マスター ページをカスタマイズするときには、コンテンツ プレースホルダーを削除しないようにしてください。 コンテンツ プレースホルダーを削除すると、マスター ページに関連付けられた一部のページやサイトが壊れる可能性があります。 このようなコントロールは、削除する代わりに、単に非表示にすることをお勧めします。

[コンテンツ領域の管理] 機能を使用して、ページの各コンテンツ プレースホルダー コントロールを確認できます。コード ビューと WYSIWYG エディターの両方でコントロールを表示できます。

もう 1 つ、特に重要なコンテンツ プレースホルダーとして、PlaceHolderMain があります。このプレースホルダーは、Web ブラウザーで各ページを表示するときに、各コンテンツ ページで置き換えられるからです。

個人用サイトのマスター ページがブラウザーで表示されると、PlaceHolderMain コントロールは、各コンテンツ ページで置き換えられます。

SharePoint サイトのコンテンツのレイアウトを変更するには、コンテンツ プレースホルダー コントロールの位置を変更します。

コンテンツ プレースホルダーの使用法の詳細については、「コンテンツ プレースホルダー コントロールを使用する」をご覧ください。

コンテンツ プレースホルダーは、コンテンツ ページ上のコンテンツ コントロールと連携するマスター ページ上の短いコードです。コンテンツ プレースホルダー コントロールにより、ページ上の対応する領域であらかじめ設定されているコンテンツ (コントロールが空白の場合はコンテンツが存在しないこともあります) が表示されます。あらかじめ設定されているコンテンツは、コンテンツ ページのコンテンツ コントロールを使用して独自のコンテンツで上書きできます。

コンテンツ プレースホルダー コントロールの特定と変更

次の手順に従って、SharePoint 2010 個人用サイト マスター ページの PlaceHolderSiteName コンテンツ プレースホルダーを特定します。

  1. SharePoint Designer 2010 でサイトを開いて、ナビゲーション ウィンドウで [マスター ページ] をクリックします。

    注:  ナビゲーション ウィンドウに [マスター ページ] が表示されない場合は、SharePoint で無効にされている可能性があります。サイト管理者に詳細を確認してください。詳細については、「SharePoint Designer 2010 を管理する」をご覧ください。

  2. マスター ページ ギャラリーで、"mysite.master" をクリックします.

  3. マスター ページの概要ページで [ファイルの編集] をクリックします。

  4. ファイルをチェックアウトするように求められたら、[はい] をクリックします。

  5. デザイン ビューでページを表示している場合は、ページ上の領域をクリックするのみで、そのコンテンツを提供しているコンテンツ プレース ホルダーを確認できます。

  6. コンテンツ領域の一覧で "PlaceHolderSiteName" を選択して、次に [ジャンプ] をクリックします。次に、[閉じる] をクリックします。コンテンツ プレースホルダーは、ページ上で次のように選択されます。

注:  このプレースホルダーのタグのプロパティは、あらかじめ Visible=False に設定されています。SharePoint Designer 2010 の分割ビューでは、タグを右クリックして選択して、表示されるコンテキスト メニューから [タグのプロパティ] を選択すると値を確認できます。


これは、PlaceHolderSiteName コントロールのタグ プロパティを示しています。

  1. ここから、コントロールの設定変更、場所の変更、異なるスタイルの適用などを実行できます。完了したら、マスター ページを保存します。

  2. 変更によりサイト定義からページがカスタマイズされるという警告が表示されたら、[はい] を選択します。

注:  SharePoint ページは、最初は定義ファイルと関連付けられています。SharePoint Designer 2010 でマスター ページをカスタマイズすると、サイト定義とは関連付けられなくなります。その結果、将来 SharePoint に対する更新やアップグレードを行う場合に追加の管理作業が発生します。このため、このメッセージが表示されます。マスター ページは必要に応じていつでもサイト定義にリセットすることができます。


変更した内容は、このマスター ページにアタッチするすべてのページに適用されます。ただし、ページが直接カスタマイズされた場合は除きます。

スタイルを使用する

マスター ページのスタイルを簡単、迅速に変更するには、事前にデザインされているテーマをページに適用します。使用可能なテーマは、SharePoint Designer の [サイトの設定] タブの [カスタマイズ] の下にある [サイトのテーマの変更] をクリックすると表示されます。

ただし、独自のコーポレート カラー、グラフィック、テキストの書式設定、またはその他のスタイル属性を適用する場合は、カスタム スタイルを作成してマスター ページに直接追加するか、これらのスタイルを外部のカスケード スタイル シート (CSS) に配置してマスター ページに適用することをお勧めします。

CSS の使用を効率化する DIV タグ

SharePoint 2010 の個人用サイト マスター ページでは、DIV タグを使用してページのブロック行要素とセクションを定義します。DIV タグには、以前のバージョンで使用されていたテーブル タグに比べて多くの利点があります。DIV タグを使うと、次のことを実現できます。

  • CSS を使用したスタイルの適用における柔軟性の向上

  • マークアップの削減

  • 高速なダウンロード

  • 検索エンジン最適化の改善

  • アクセシビリティのサポートの改善

  • ブラウザー サポートの改善

ページの作成者やユーザーがページに Web パーツや他の SharePoint コンテンツを挿入するような場合は、HTML テーブルも使用されます。ただし、マスター ページのカスタマイズでは、主に DIV タグを使用してコンテンツを構造化することができます。

[マイ サイト] マスター ページをカスタマイズする場合は、Div タグを使用する

マスター ページでのスタイルの編集またはカスタム CSS の作成

スタイルを編集するには、[スタイル] メニューをクリックし、次に、CSS に対する作業に必要なオプションをリボンから選択します。

新しいスタイルを作成して適用するか、リボン上のコマンドを使ってスタイル シートを適用できます。[スタイルの管理] コマンドを使って、要素、順序または種類でスタイルを分類できます。また、ページまたは要素で使用されているスタイルのみを表示したり、プレビューを表示したりできます。

個人用サイトのマスター ページの [新しいスタイル] ダイアログ ボックス。

注: 機械翻訳についての免責事項: この記事の翻訳はコンピューター システムによって行われており、人間の手は加えられていません。マイクロソフトでは、英語を話さないユーザーがマイクロソフトの製品、サービス、テクノロジに関するコンテンツを理解するのに役立てるため、こうした機械翻訳を提供しています。記事は機械翻訳されているため、用語、構文、文法などに誤りがある場合があります。

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

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

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

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

×