こんにちは、SharePoint サポートの森 健吾 (kenmori) です。今回の投稿では、SharePoint のページ上で CSS (スタイルシート) を使用し、特定のページ領域を非表示にするテクニックについてご紹介します。
導入 1: スタイルシートを使用する背景
SharePoint でユーザーに操作させたくないコンテンツを非表示にする方法は様々なものがあります。Web ページなので、CSS を組み込むことは最も簡単な方法として思いつくことでしょう。
実際にスタイル シートを選択する判断としては下記があります。
1) 要望を実現したいが Visual Studio を使用してまで実施したくない場合
2) SharePoint Designer などのツールを使ってもコンポーネントレベルの制御しかできないため、その部品として描画されるコンテンツを非表示にするといった場合
SharePoint で CSS を使用して一部のページ領域を非表示にすることは、製品として想定している形式ではないため完全に動作保障しているカスタマイズ形式ではありません。カスタマイズを実施した際には、他への影響がないかを十分にテストしていただく必要があります。
ただし、画面上の一部のコンテンツを非表示にするカスタマイズは他への影響も極めて低いため、広く一般的に実施されている手法となります。
導入 2: ページ領域を非表示にするスタイルシートの適用方法
今回は、下記の赤枠部分を非表示にする方法を例にします。
1. 非表示にするスタイルの作成方法
1. 最初に IE11 で [F12] を押して開発者ツールを起動し、下図のような手順で非表示にしたい領域を選びます。
2. 上記 ctl00_ctl146_ShellSites を非表示にする場合、下記のようなスタイル指定となります。
<style type="text/css">
#ctl00_ctl46_ShellSites
{
display:none;
}
</style>
今回は ID 属性が指定されていた要素でしたので、最初に # を付けてスタイルをつけて指定することができました。
しかし、HTML 要素を特定する場合、このように簡単であるとは限りません。ここで指定する黄色でハイライトした部分を指定するテクニックが、今回の投稿のメイントピックです。下記の「抑えておきたい基本テクニック」にて紹介します。
2. スタイルの組み込み方法 (1) コンテンツエディタ Web パーツについて
1. [*] – [ページの編集] をクリックした後、コンテンツエディタ Web パーツを貼り付けます。
2. コンテンツエディタ Web パーツにて [Web パーツの編集…] をクリックします。
3. コンテンツエディタ Web パーツの表示領域にカーソルを当て、リボンメニューより[ソースの編集] をクリックします。
4. 下記のスタイルを指定し、[OK] をクリックします。
<style type="text/css">
#ctl00_ctl46_ShellSites
{
display:none;
}
</style>
5. リボンメニューから [保存] や [編集の終了] をクリックして確定します。
6. [サイト] メニューが非表示になりました。
2. スタイルの組み込み方法 (2) マスタページについて
スタイルをサイト全体に適用したい場合は、サイトが使用している既定のマスターページを編集することで、広範囲にスタイルを適用できます。
1. SharePoint Designer を起動し、サイトを開きます。
2. [サイトのページ] を開きます。
3. Home.aspx などをポイントし、右クリックメニューより [詳細モードでファイルを編集] をクリックします。
4. リボンメニューより [スタイル] - [開く] をクリックして、適用されているマスタページを開きます。
5. 手順 3. で開いていた Home.aspx は保存せずにタブを右クリックしてすぐに閉じます。
6. 手順 4. で開いたマスタページのどこか (</head> タグのすぐ上など) にスタイルを指定します。
<style type="text/css">
#ctl00_ctl46_ShellSites
{
display:none;
}
</style>
</head>
7. 上書き保存して、動作を確認します。
本題 : 押さえておきたい基本テクニック
今回の投稿はここからが本題です。今回は、CSS を使用して描画された後にSharePoint UI のカスタマイズを実施するにあたり、特によく使用する方法として抑えておきたい 3 つのテクニックを紹介します。
先ほどの例では、下記のスタイルを使用しました。display: none を指定する対象の領域をセレクター (黄色の部分) で指定します。
<style type="text/css">
#ctl00_ctl46_ShellSites
{
display:none;
}
</style>
この部分には意外とたくさんの指定方法があります。下記は頻繁に使うと思われる内容です。
目次
1. 要素セレクター (ID、クラス、Type)
2. 属性セレクター (=, |=)
3. 連結子 (+, [Space])
1. 要素セレクター (ID、クラス、Type)
1-(1) ID セレクター (#)
ID セレクターは、頭に # シャープを指定して要素を取得します。特定の ID 属性を指定して要素を取得する方法です。冒頭の例でもこの方法で要素を抽出しています。
<DIV ID=”TEST”>
aaa
</DIV>
例.
#TEST
{
display:none;
}
1-(2) クラス (.) セレクター
クラスセレクターは、頭に. (ドット)を指定して要素を取得します。特定の class 属性を指定して要素を取得する方法です。
<DIV class=”TEST”>
aaa
</DIV>
例.
.TEST
{
display:none;
}
1-(3) タイプセレクター
クラスセレクターは、要素の型名を指定して要素を取得します。
<DIV>
aaa
</DIV>
例.
DIV
{
display:none;
}
属性セレクターは、属性の値を指定して要素を取得します。
<DIV attr=”Value”>
aaa
</DIV>
例.
[attr=”Value”]
{
display:none;
}
下記の様に異なる演算子を使用することで、例えばSharePoint のリボンメニューを非表示にすることもできます。
下記の例では id 属性を使用していて一見 # でもできそうですが、属性セレクタだと前方一致ができる例を記載しています。リボンメニューのアイコン ID には、末尾にLarge, Medium, Small などのサイズ指定が追記されます。それらの ID の変化を吸収するよう演算子 (|=) を使用し、前方一致させてスタイルを一元指定することができます。
例.
A[id|='Ribbon.List.ViewFormat.Datasheet'] {
DISPLAY: none
}
A[id|='Ribbon.List.Actions.ExportToSpreadsheet'] {
DISPLAY: none
}
連結子は、複数のセレクターを親子で組み合わせて使用する際に効果的です。
親要素に ID 属性は指定されているが、子要素には指定されていない場合、親要素をID で絞ってさらに子要素を別の属性で絞ることは多くの場合有効です。
連結子のうち> は直属の子要素、[Space] は子孫全般を意味します。
<DIV ID=”TEST”>
<SPAN>これは連結子に>, [Space] を指定した際にいずれも非表示になります</SPAN>
<DIV><SPAN>これは連結子に[Space] を指定した時非表示になります</SPAN></DIV>
</DIV >
<SPAN>これは表示されます</SPAN>
ID がTEST の要素を絞り、その子要素の SPAN 要素をすべて非表示にします。
例.
#TEST SPAN
{
display:none;
}
#TEST>SPAN
{
display:none;
}
冒頭でお伝えした通り、ここに記載した方法は頻繁に使用されると考えられる方法だけです。他にもCSS ではたくさんの指定方法があります。詳細は下記のページをご参考にしていただけますと幸いです。
タイトル : CSS に関する互換性と Internet Explorer
アドレス : http://msdn.microsoft.com/ja-jp/library/cc351024(v=vs.85).aspx
今回の投稿は以上になります。