SharePoint で編集モード パネル スニペットを追加する

重要

この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。 従来の環境やこれらのブランディング手法を使用することはお勧めしません。

編集モード パネルは、ページを編集するときにのみそのパネルの内容を表示する、コンテンツ作成者に指示やその他のコンテンツを表示するために使用できるスニペットです。 逆に、このスニペットは、編集モードではなく通常の (ビュー) モードでのみコンテンツを表示するように構成することもできます。

編集モード パネルの概要

発行サイトでは、必要な権限を持っているコンテンツ作成者は、ページ ライブラリに存在するページを作成または編集できます。 通常、作成者は、ページを作成または編集した後、さまざまなページ フィールドにコンテンツを追加します。

デザイナーは、編集モード パネルをマスター ページまたはページ レイアウトに追加できます。そのスニペットの内容は、そのページ レイアウトまたはマスター ページに関連付けられているページに基づいてページを編集する場合にのみコンテンツ作成者に表示されます。 たとえば、編集モード パネルを使用すると、ページが編集モードのときにコンテンツ作成者にのみ次のコンテンツを表示できます。

  • コンテンツ作成者にとっては重要であっても、実際のサイトでページを表示する閲覧者には重要ではない、 Schedule Publishing Date のようなページ フィールド。

  • ページ フィールドに入力する必要のあるコンテンツの種類に関する説明。

  • 異なるデバイス チャネルでのページの表示方法を考慮する必要があることについてのコンテンツ作成者に対する注意。

また、編集モード パネルに異なるスタイル シートへのリンクを配置し、編集モードと表示モードで異なるスタイルを提供することもできます。

コンテンツ作成者のノートがそのページ レイアウトの基になるコンテンツ タイプに固有である場合は、編集モード パネルをページ レイアウトに追加する必要があります。 また、マスター ページに関連付けられているすべてのページに作成者のメモが適用される場合 (たとえば、パネルに、そのマスター ページを使用する特定のデバイス チャネルのコンテンツを提供するための手順が含まれている場合) に、このスニペットをマスター ページに追加することもできます。

また、(コンテンツ作成者ではなく) サイト閲覧者がページを編集するときにだけコンテンツを表示するのがよい場合は、編集モードではなく、通常モードの場合にのみコンテンツを表示するように編集モード パネルを設定することもできます。

編集モード パネルの挿入

どのようなスニペットでも同じですが、このスニペットもスニペット ギャラリーから追加します。 スニペット ギャラリーに移動するには、最初に編集するマスター ページまたはページ レイアウトを選択する必要があります。

編集モード パネルを挿入するには

  1. 発行サイトに移動します。

  2. ページの右上隅で、歯車の形の [設定] アイコンをクリックし、[ デザイン マネージャー] をクリックします。

  3. デザイン マネージャーの左のナビゲーション ウィンドウで、編集しているファイルの種類によって、[ マスター ページの編集] または [ ページ レイアウトの編集] をクリックします。

  4. スニペットを追加するマスター ページまたはページ レイアウトの名前を選択します。

  5. スニペット ギャラリーを開くには、サーバー側プレビューの右上隅で、[ スニペット] をクリックします。

  6. リボンの [ デザイン] タブで [ 編集モード パネル] を選択し、スニペットを表示するモードを選択します。

  7. スニペット ギャラリーの右側の [ このコンポーネントについて] の下で、セクション ヘッダーをクリックまたは選択して、プロパティのグループを展開するか、折りたたむかして、必要なカスタム設定を構成します。

    [重要] という名前のセクションには、この特定のスニペットの動作にとって最も重要であるプロパティが含まれます。 編集モード パネルの場合、 PageDisplayMode プロパティは、リボンで選択したモードに応じて、 Edit または Display に設定されます。

  8. プロパティを構成した後、[ 更新] をクリックします。 これによって、ページの左側の HTML スニペットが更新され、マークアップにカスタム設定が反映されます。 いつでも [リセット] をクリックして、すべてのプロパティを既定の設定に戻すことができます。

  9. スニペット ギャラリーの左側で、[ HTML スニペット] の下の [ クリップボードにコピー] をクリックします。

  10. HTML エディターで、コンピューター上のマップされたネットワーク ドライブを開き、スニペットを追加するマスター ページまたはページ レイアウトの HTML ファイルを開きます。 詳細については、「 方法: ネットワーク ドライブを SharePoint マスター ページ ギャラリーにマップする」を参照してください。

  11. HTML ファイルの中の、マークアップを表示する場所にスニペットを貼り付けます。

    ページ レイアウトに編集モード パネルを追加する場合は、編集モードでコンテンツ作成者に対してパネルが表示されるように、 PlaceHolderMain の内部にスニペットを貼り付けます。 特定のページ フィールドの直前にスニペットを貼り付けることも、1 つ以上のページ フィールドを編集モード パネルの内部に配置することもできます。

  12. を置き換えます。

    コンテンツ class="DefaultContentBlock" 作成者へのメモや指示、作成者には役立つがサイト訪問者には役立たない特定のページ フィールドなど、独自のコンテンツがある場合。

  13. ページを保存し、デザイン マネージャーでサーバー側プレビューを更新して、編集モード パネルが意図したとおりに表示されることを確認します。

スニペット マークアップの理解

編集モード パネル スニペットの最も重要な 2 つの部分は、 PageDisplayMode プロパティと

where class="DefaultContentBlock". PageDisplayMode プロパティは、パネルのコンテンツが編集モードのみで表示されるか、または通常表示モードでも (つまり、ページが編集モードではないときでも常に) 表示されるかを決定します。

注:

このプロパティは、値を Display に変更した場合にのみ、マークアップに表示されます。 プロパティがマークアップに表示されないときは、スニペットの既定のモードが編集モードになります。

は、次の

class="DefaultContentBlock" 、他のスニペットやコントロールを含めることができる独自のコンテンツに置き換えるものです。


<div data-name="EditModePanelShowInEdit">
    <!--CS: Start Edit Mode Panel Snippet-->
    <!--SPM:<%@Register Tagprefix="Publishing" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
    <!--MS:<Publishing:EditModePanel runat="server" PageDisplayMode="Display" CssClass="edit-mode-panel">-->
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
        <div class="DefaultContentBlock" style="border:medium black solid; background:yellow; color:black; margin:20px; padding:10px;">
        You should replace this div with content that renders based on your Edit Mode Panel Properties.
        </div>
        <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
    <!--ME:</Publishing:EditModePanel>-->
    <!--CE: End Edit Mode Panel Snippet-->
</div>

関連項目