SharePoint2013でカスタムページレイアウトを作成する-NavantisNavantisブログ

前回の記事では、SharePoint2013でマスターページを作成する方法を説明しました。 マスターページは、webサイトのグローバルchrome要素を定義します。 この記事では、SharePoint2013でカスタムページレイアウトを作成する方法について説明します。 SharePoint2013ページモデルの詳細については、このマイクロソフトの記事を参照してください。

ページレイアウトの計画

この例では、webサイト上のページのチャンクを再作成します(www.navantis.com）:

前回の記事では、このページのヘッダー、フッター、およびグローバルスタイルシートを定義するマスターページを作成しました。 次に、この基本的な形式に従ったページレイアウトを作成します。 このレイアウトに基づいて好きなだけ多くのページを作成できるように、コンテンツは動的になります。

ページレイアウトでは、次の領域を”フィールドコントロール”として定義します。 それらをすべて単一のコンテンツコンテナに作成し、デザインを反映するために明示的にレイアウトします:

左上のブレッドクラムSharePointのブレッドクラムの証跡を使用することができ、これをレイアウトに明示的に定義したくないため、ニュースレターの購読をページレイアウトに埋め込みます。

コンテンツタイプの定義

だから、HTML作業を行う前に、ページのこれらの各フィールドを定義するコンテンツタイプ（コンテンツフィールドの定義）を作成し 上記の計画に基づいて、次のフィールドが必要です:

• LargeHeadline
• RightHandBlurb
• LeftLinkList
• LeftColumnTitle
• LeftColumnText
• RightColumnText
• RightColumnText

それぞれの場合、これらは次のようになりますhtmlコントロールになります。 SharePoint2013では、画像など、これらのフィールドに他の種類のコンテンツを定義できます。 SharePoint2013の画像は特定の寸法でレンダリングでき、SharePoint2013は定義されたレイアウトに適切に収まるように指定された画像を動的にレンダリングします。

コンテンツタイプを作成するには、サイト設定–>サイトコンテンツタイプ(Web Designerギャラリーの下)に移動します。 ページレイアウトのコンテンツタイプを見ると、記事、カタログ、ウェルカムページなどの既存のものが表示されます。 レイアウト用のコンテンツタイプを作成します。 [作成]をクリックして、新しいコンテンツタイプの名前を入力します。

[親コンテンツタイプ]で、コンテンツタイプを継承する親を選択できます。 既存のページ-レイアウト-コンテンツ-タイプを見ると、それらはコンテンツ-タイプ-ページから継承されます。 ページは、コンテンツタイプの公開グループにあります。 既存のページレイアウトのコンテンツタイプグループに追加したり、独自のカスタムグループを作成したりすることもできます。

新しいコンテンツタイプを作成すると、SharePoint2013には、ページコンテンツタイプから自動的に継承された列が表示されます。 私たちのカスタムフィールドを表すためにいくつかの新しいものを追加することができます。 [新しいサイトから追加]列をクリックして、各フィールドを追加しましょう:

列ごとに、タイプを指定できます。 明示的にスタイルを設定したいフィールドでは、Single Line of Textオプションを使用して、コンテンツ作成者にテンプレートによって書式設定されるプレーンテキ コンテンツ作成者により詳細な制御を提供したいフィールドについては、フィールドを完全なHTMLコンテンツとして指定すると、コンテンツ作成者はリッチテキストエディターを使用して任意のHTMLを入力できるようになります。 私たちの分野では、このアプローチを使用してみましょう:

• LargeHeadline-テキストの単一行
• RightHandBlurb-テキストの複数行
• LeftLinkList-完全なHTML
• LeftColumnTitle–テキストの単一行
• Leftcolumntext–完全なHTML
• RightColumnText–完全なHTML
• Rightcolumntext-完全なHTML
• Rightcolumntext-完全なHTML
• Rightcolumntext-完全なHTML

各フィールドに対して、サイト列を作成します。

今、私たちは、コンテンツを格納するためのフィールドを持っている、のは今、ページレイアウトを作成してみましょう。

ページレイアウトの作成

ページレイアウトを作成するには、デザインマネージャーに移動し、6をクリックします。 ページレイアウトを編集します。 ページレイアウトの作成をクリックします。 ページレイアウトに名前を付け、マスターページと作成したコンテンツタイプを選択します。

レイアウトを適切に書式設定するには、フィールドコントロールの周りのHTMLを更新する必要があります。

ページレイアウトの公開

ページレイアウトを使用する前に、ページレイアウトを公開する必要があります。 ページレイアウトを公開するには、サイト設定–>マスターページとページレイアウトに移動します。 2つのファイルが表示されます–1つはHTMLと1つはASPXです。 SharePoint2013では、HTMLがマスターになり、HTMLエディターを使用して編集できます。 その後、SharePoint2013はASPXファイルを自動的に生成します。 レイアウトを公開するには、HTMLファイルをクリックしてから公開します:

これにより、HTMLファイルとASPXファイルの両方が公開され、レイアウトに基づいてページを作成できるようになりました。

ページの作成

新しいレイアウトに基づいてページを作成するには、新しいページに移動します。

ページ–>ページレイアウトに移動すると、使用可能なページレイアウトのリストに新しいページレイアウトが表示されます。 ページレイアウトを切り替えると、以前に作成したすべてのフィールドがコンテンツタイプに表示されます。

既存のwebサイトまたはWordなどのofficeドキュメントからコンテンツを入力するか、コピーして貼り付けることができます。 コピー＆ペーストは、以前のバージョンよりも劇的に改善されました！

ここに私のコンテンツが今記入されています:

今私たちは私たちのページを公開することができます…

私たちのコンテンツはそこにありますが、レイアウトは私たちが何を反映していませんwant…so 今、私たちのレイアウトを更新するためにHTMLを編集します。

ページレイアウトのカスタマイズ

SharePoint2013のページレイアウトは、コントロールを挿入する場所を指定するための追加のマークアップがたくさんあるHTMLファ デザインマネージャーを使用してHTMLファイルをカスタマイズできるようになりました。 HTMLファイルのコピーを取得し、変更を加えてファイルを再アップロードするだけで、SharePoint2013が残りを行います。 ファイルを取得するには2つの方法があります:

• デザインマネージャー–>3に移動します。 デザインファイルをアップロードし、ネットワークドライブをマスターページディレクトリにマップします。
• サイト設定–>マスターページとページレイアウトに移動すると、ファイルをダウンロードできます。

ページレイアウトを数回繰り返し、SharePoint2013で提供されているスニペットを適切な場所に移動した後、適切な書式設定されたページが作成されました:

メインページエリア内のすべてのコンテンツは、SharePointによって完全に管理され、コンテンツ作成者が簡単に変更できます。