SharePoint で CSS を使用してスニペットをブランド化する
重要
この拡張オプションは、従来の SharePoint エクスペリエンスにのみ使用できます。 コミュニケーション サイトのような、SharePoint Online の最新エクスペリエンスではこのオプションを使用できません。 従来の環境やこれらのブランディング手法を使用することはお勧めしません。
スニペットのスタイルを設定するには、既定のスタイルをカスタム CSS でオーバーライドします。 CSS ID と要素セレクターを使用して、要素に適用されるすべての既定のスタイルをオーバーライドしたり、HTML エディターや Internet Explorer の F12 開発者ツールなどのツールを使用して、特定の既定のスタイルを特定してオーバーライドしたりできます。
CSS を使用したスニペットのスタイル設定の概要
HTML マスター ページを変換したり、HTML ページ レイアウトを作成したら、デザイン マネージャーのサーバー側のプレビューでそのページをプレビューすることができます。 プレビュー ページからスニペット ギャラリーに移動し、スニペットを自分の HTML ファイルにコピーできます。 スニペットとは、トップ ナビゲーション コントロールや検索ボックスなど、SharePoint コントロールを HTML で表現したものです。
マップされたドライブ内の HTML ファイルにスニペットをコピーし、変更を保存した後、HTML ファイルのサーバー側プレビューを更新して、コントロールのレンダリング方法を確認できます。 スニペットには、選択した HTML エディターでデザイン時プレビューを提供するマークアップが含まれていますが、このマークアップは読み取り専用であり、サーバーでのコントロールのレンダリング方法には影響しないため、編集しないでください。 一方、サーバー側プレビューでは、ライブ データを含む完全に忠実なプレビューが表示されます。たとえば、ナビゲーション コントロールには、管理ナビゲーション用の SharePoint 用語ストアなど、データ ソースからのライブ データを含むサイトの現在のナビゲーション構造が表示されます。
注:
ネットワーク ドライブのマッピングの詳細については、「 方法: ネットワーク ドライブを SharePoint マスター ページ ギャラリーにマップする」を参照してください。
既定では、スニペットは corev15.css などの SharePoint スタイル シートからスタイルを継承します。 スニペットのスタイルを設定するには、既定のスタイルをカスタム CSS で上書きする必要があります。 そのために、次の操作を実行します。
CSS ID と要素セレクターを使用して、選択した要素に適用する既定のスタイルを完全に上書きします。
Internet Explorer の F12 開発者キットなど、ブラウザ ベースのツールを使用して、デザイン マネージャーのサーバー側のプレビューに表示されている既定のスタイルを調べ、上書きする特定のスタイルを識別します。
HTML エディターの機能を使用してスニペットの読み取り専用プレビューで既定のスタイルを調べ、上書きする特定のスタイルを識別します。
Internet Explorer の開発者ツールを使用して既定のスタイルを識別するには、デザイン マネージャーのサーバー側プレビューを使用して HTML マスター ページまたはページ レイアウトを表示し、 F12 キーを押して開発者ツールを起動し、[ 検索 ] メニューを選択し、[要素の選択] を クリックします。 これにより、ページ上の要素をクリックし、HTML マスター ページまたはページ レイアウトのリンク先のカスタム スタイル シートに CSS を追加することで、オーバーライドするスタイルを正確に確認できます。
既定の SharePoint スタイル シートには多くのスタイルが含まれているため、特定のスタイルを識別することが難しくなることがあります。 ブラウザベースのツールの代りに、スニペット ギャラリーから HTML ファイルにスニペットをコピーすることで、HTML エディターを使用してスタイルを識別することもできます。HTML エディターによっては、この方法のほうが識別が簡単になります。 スニペット ギャラリーで [更新]、[クリップボードにコピー] の順に選択すると、スニペットにそのスニペットの HTML プレビューが含まれます。 スニペットを HTML ファイルにコピーすると、スニペットに含まれている、読み取り専用のプレビューで使用されているスタイルを確認できます。 このようにして、既定のスタイルのより小さなサブセットを調べます。
スニペットとカスタマイズの規模によっては、上書きする特定の既定スタイルを選択する代わりに、CSS ID と要素セレクターを使って、既定のスタイルをすべて選択し、完全に上書きすることをお勧めします。 次の例では、この方法を使って、トップ ナビゲーション スニペットにカスタム スタイルを適用する方法を説明します。
例: トップ ナビゲーション スニペットのスタイル設定
トップ ナビゲーション スニペットは、最も一般的に使用されているスニペットの 1 つで、最も一般的にブランド化されるスニペットの 1 つです。 SharePoint サイトでは、管理ナビゲーションを使用するオプションを選択して、用語ストアがトップ ナビゲーション スニペットのデータ ソースになるようにます。 このようにすると、[サイトの設定] の用語ストア管理ツールを使用して、ナビゲーション用語の追加や削除を実行できます。また、トップ ナビゲーション スニペットで表示されるナビゲーションの分類を管理することもできます。
この例では、トップ ナビゲーション コントロールによって、用語ストアからエントリを取得できるように、サイトで管理ナビゲーションが使用されています。 コンピューターなど、トップ ナビゲーション用語にカーソルを合わせると、1 つのレベルのフライアウトが表示されます。 このセクションでは、これらのカスタム スタイルがどのように既定の SharePoint スタイルを上書きするかを説明します。
サンプル 1: HTML モックアップ ファイルからのナビゲーション <div>
マスター ページ用に HTML モックアップをデザインするときには、デザイン マネージャーを使用する前に、HTML と CSS を使用して機能的なトップ ナビゲーション要素をデザインすることになります。 この HTML サンプルでは、トップ ナビゲーション用の基本構造 (ID とクラス名を持つ <div> 要素、トップレベルのナビゲーション エントリのリスト、入れ子にされた各フライアウト サブメニューのリストなど) を使用しています。
<div id="navigation" class="msax-Navigation">
<ul>
<li><a href="#">Cameras</a>
<ul>
<li><a href="#">Camcorders</a></li>
<li><a href="#">Digital cameras</a></li>
<li><a href="#">Disposable cameras</a></li>
<li><a href="#">Film cameras</a></li>
</ul>
</li>
<li><a href="#">Computers</a>
<ul>
<li><a href="#">Desktops</a></li>
<li><a href="#">Laptops</a></li>
<li><a href="#">Netbooks</a></li>
<li><a href="#">Tablets</a></li>
</ul>
</li>
<li><a href="#">Media</a>
<ul>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">TV shows </a></li>
<li><a href="#">Video games </a></li>
</ul>
</li>
<li></li>
</ul>
</div>
サンプル 2: カスタム CSS を使用してスタイル設定されたナビゲーション <div>
既定の SharePoint スタイルをオーバーライドするには、モックアップ HTML ファイルに、/head> タグを閉じる<直前に CSS ファイル(<link rel="stylesheet" type="text/css" href="URLtoYourCustomCSSFile"/>
への標準リンクを含めます。
この HTML および CSS のサンプルでは、次の点に注目してください。
ナビゲーション エントリのスタイルは、クラスを ul> タグまたは li タグに直接適用するのではなく、 形式を<使用して行います。><
.msax-Navigation ul li
スニペット マークアップには、選択した要素間に介在する <div> タグが含まれている可能性があるため、スタイルの代わりに
.msax-Navigation ul>li
構文.msax-Navigation ul li
が使用されます。HTML モックアップには、トップレベルの <ul> の最後のエントリとして空の <li></li> 要素が含まれています。 これは、管理ナビゲーションをオンにしていると、SharePoint は最後のエントリとして [リンクの編集] コマンドをトップ ナビゲーションに追加しますが、通常、最終的なサイトには、このオプションの表示が不要になるためです。 この CSS サンプルでは
.msax-Navigation ul li:last-child
を使用してこのエントリを選択して、表示値をnone
に設定しています。 HTML ファイル内の空の <li></li> 要素は、一時的に既定の [リンクの編集] のエントリに置き換えられます。 サイトで管理ナビゲーションを使用していて、CSS でli:last-child
セレクターを使用している場合は、この最後の <li> 要素に注意してください。
.msax-Navigation {
margin: 10px 0px; top: 0px; position: relative;
z-index:200;
}
.msax-Navigation a {
margin: 0px; padding: 0px; border: 0px currentColor;
}
.msax-Navigation ul {
list-style: none; margin: 0px; padding: 0px; font-size: 16px; z-index:200;
}
.msax-Navigation ul li {
padding: 10px; display: inline-block; position: relative; z-index:200;
}
.msax-Navigation ul li:first-child {
margin: 0px;
}
.msax-Navigation ul li:last-child {
margin: 0px; padding: 0px; display: none;
}
.msax-Navigation ul li a.selected, .msax-Navigation ul li.selected {
background-color: rgb(58,60,62) !important;
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a {
width: 100%; color: rgb(58,60,62); font-size: 16px;
}
.msax-Navigation ul li:hover {
background-color: rgb(58,60,62);
color:rgb(255,255,255) !important;
}
.msax-Navigation ul li a:hover {
text-decoration: none;
color:rgb(255,255,255) !important;
}
.msax-Navigation li ul {
left: 0px; top: 35px; display: none; position: absolute; min-width: 100px; box-shadow: 5px 5px 10px 0px rgb(0,0,0); background-color: rgb(58,60,62);
}
.msax-Navigation li:hover ul {
display: block; z-index: 150;
}
.msax-Navigation li li {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li:last-child {
margin: 0px; padding: 5px 10px 5px 0px; border-top-width: 0px; display: block; min-width: 100px;
}
.msax-Navigation li li a {
width: 100%; padding-left: 10px; display: block; color:rgb(255,255,255) !important;
}
.msax-Navigation li li:hover {
background-color: rgb(120, 120, 120);
}
サンプル 3: トップ ナビゲーション スニペットの読み取り専用プレビュー
カスタム スタイルを HTML モックアップに実装し、機能上のトップ HTML を設定したら、次の一般的な手順を実行してください。
ネットワーク ドライブをマッピングします。
デザイン ファイルをアップロードします。
HTML ファイルをマスター ページに変換します。
プレビューし、問題があれば修正します。
スニペット ギャラリーを使用して、トップ ナビゲーション スニペットを HTML マスター ページに追加します。
スニペット ギャラリーでトップ ナビゲーション スニペットのプロパティを設定するときには、次の点に注意してください。
上部の Important セクションでは、CssClass プロパティに一切の変更を加えないでください。
これらのプロパティは、HTML スニペットを対応する ASP.NET スニペットに変換するために SharePoint が使用する MDS プロパティに関連するため、 AjaxDelta 見出しの下のプロパティに変更を加えないでください。 これは、上部のナビゲーション スニペットだけでなく、任意のスニペットに適用されます。
既定の SharePoint スタイルを上書きする場合は、スニペット ギャラリーの AspMenu の下の Behavior セクション (スニペットに委任コントロールなど複数のコントロールが含まれている場合は、複数の Behavior セクションが存在していることがあります) で、ClientIDMode を Static に設定してください。 ClientIDMode 設定を既定の Inherit のままにすると、スニペットの適用済み CSS クラスは、ページ上のスニペットの順番に基づいて変更されます。 ClientIDMode の詳細については、「Control.ClientIDMode プロパティ」を参照してください。
たとえば既定では、トップ ナビゲーション コントロールは、既定の SharePoint ID 属性 (zz5_TopNavigationMenu、zz6_RootAspMenu など) を使用します。 ClientIDMode を Static に変更することで、これらの既定の ID を独自の CSS のセレクターとして使用し、既定の SharePoint スタイルを上書きすることができます。
一部のプロパティは、既定の動的 CSS と JavaScript の動作を無効にすることで、トップ ナビゲーション スニペットのブランド化が簡単になるように構成されています。たとえば、既定では UseSimpleRendering は True に、MaximumDynamicDisplayLevels は 0 に設定されます。 上部のナビゲーション スニペットの特定のプロパティの詳細については、 AspMenu プロパティ と Menu プロパティに関するページを参照してください。
スニペット ギャラリーでトップ ナビゲーション スニペットを構成したら、[更新]、[クリップボードにコピー] の順に選択します。 HTML マスター ページで、モックアップ コントロールを含むナビゲーション<div id="navigation" class="msax-Navigation">
の内容を削除し (div> タグ自体ではなく<div> タグの<内容だけを削除します)、スニペットをナビゲーション <div> にコピーします。 必要に応じて、ナビゲーション <div の位置を変更します>。通常はタグの<div id="s4-bodyContainer">
開始直後に、 を含む div> の<前にPlaceHolderMain
移動します。
前述のナビゲーション <div> の HTML と簡単に比較できるように、次のサンプルにはトップ ナビゲーション スニペットのナビゲーション <div> 部分が含まれています。 これはスニペット全体ではない点に注意してください。
<div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox">
<ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static">
<li class="static">
<a accesskey="1" class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Cameras</span></span></a><ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/camcorders" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Camcorders</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/digital-cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Digital cameras</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/disposable-cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Disposable cameras</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/cameras/film-cameras" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Film cameras</span></span></a></li>
</ul>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Computers</span></span></a><ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/desktops" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Desktops</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/laptops" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Laptops</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/netbooks" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Netbooks</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/computers/tablets" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Tablets</span></span></a></li>
</ul>
</li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Media</span></span></a><ul class="static">
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/movies" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Movies</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/music" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Music</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/tv-shows" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">TV shows</span></span></a></li>
<li class="static">
<a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/sites/PubSite/media/video-games" tabindex="0">
<span class="additional-background ms-navedit-flyoutArrow">
<span class="menu-item-text">Video games</span></span></a></li>
</ul>
</li>
<li class="static ms-verticalAlignTop ms-listMenu-editLink ms-navedit-editArea">
<span id="zz7_TopNavigationMenu_NavMenu_Edit" class="ms-navedit-editSpan">
<a id="zz7_TopNavigationMenu_NavMenu_EditLinks" class="ms-navedit-editLinksText" href="#" onclick="g_QuickLaunchMenu = null; EnsureScriptParams('quicklaunch.js', 'QuickLaunchInitEditMode', 'zz7_TopNavigationMenu', 2, 0, 0, ''); cancelDefault(event); return false;">
<span class="ms-displayInlineBlock">
<span class="ms-navedit-editLinksIconWrapper ms-verticalAlignMiddle">
<img class="ms-navedit-editLinksIcon" src="/_layouts/15/images/spcommon.png?rev=23" /></span><span class="ms-metadata ms-verticalAlignMiddle">Edit Links</span></span></a><span id="zz7_TopNavigationMenu_NavMenu_Loading" class="ms-navedit-menuLoading ms-hide"><a id="zz7_TopNavigationMenu_NavMenu_GearsLink" href="#" onclick="HideGears(); return false;" title="This animation indicates the operation is in progress. Click to remove this animated image."><img id="zz7_TopNavigationMenu_NavMenu_GearsImage" src="/_layouts/15/images/loadingcirclests16.gif?rev=23" /></a></span><div id="zz7_TopNavigationMenu_NavMenu_ErrorMsg" class="ms-navedit-errorMsg">
</div>
</span></li>
</ul>
</div>
カスタム スタイルのみを使用する代わりに、特定のスタイルのみを上書きするシナリオも考えられます。 たとえば、[リンクの編集] ノードを非表示にするには、既定の ID zz7_TopNavigationMenu_NavMenu_Edit を使用するカスタム スタイルを作成し、表示設定を none
に設定することができます。