SharePoint のページ上で CSS を使用し、特定のページ領域を非表示にする基本テクニック

こんにちは、SharePoint サポートの森　健吾 (kenmori) です。今回の投稿では、SharePoint のページ上で CSS (スタイル シート) を使用し、特定のページ領域を非表示にするテクニックについてご紹介します。

 2019.2.15 追記 

本ブログ記事に、SharePoint Online における現在の非推奨事項を利用したカスタマイズが記載されていたため、大幅に編集しております。

 

導入 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) 代替 CSS について

スタイルをサイト全体に適用したい場合は、代替 CSS を使用してサイトに追加 CSS を読み込ませることで広範囲にスタイルを適用できます。

 当初は SharePoint Designer でマスタ ページを編集 (ゴースト解除) し、スタイルをカスタマイズする方法をお伝えしておりました。
この方法は現在推奨されておりませんので削除しました。

タイトル : SharePoint Online ポータル ブランド化ガイダンス
アドレス : https://docs.microsoft.com/ja-jp/sharepoint/dev/solution-guidance/portal-branding

 

1. テキストエディタを開きます。

2. スタイルを指定します。

 #ctl00_ctl46_ShellSites
{
   display:none;
}

 

3. ファイルを *.css という拡張子で保存します。

4. 誰もがアクセスできるライブラリに配置します。

5. CSOM や PnP PowerShell などを使用し、Web.AlternateCssUrl プロパティにアップロードした CSS のパスを書き込みます。

 Set-PnPWeb -Web /  -AlternateCssUrl "/SiteAssets/alternate.css"

6. 更新後に、動作を確認します。

補足 : ライブラリに配置した CSS ファイルについては CDN を介して展開するようご注意ください。

タイトル : SharePoint Online ページ カスタマイズの注意点
アドレス : https://social.msdn.microsoft.com/Forums/ja-JP/dfcccf1a-f63f-418b-b817-fbe7f5399651/sharepoint-online-125061254012472?forum=sharepointsupportteamja

 

本題 : 押さえておきたい基本テクニック

今回の投稿はここからが本題です。今回は、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;
}

2. 属性セレクター ( = , |= )

属性セレクターは、属性の値を指定して要素を取得します。

<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

}

 

3. 連結子 ( > , [Space] )

連結子は、複数のセレクターを親子で組み合わせて使用する際に効果的です。

親要素に 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

アドレス : https://msdn.microsoft.com/ja-jp/library/cc351024(v=vs.85).aspx

 

今回の投稿は以上になります。