Help us understand the problem. What is going on with this article?

クラシック UI のリボンのグループやボタンを非表示にする

More than 3 years have passed since last update.

※この記事書いてから気が付きましたが、もっと参考になるご本家の記事がありましたねw
https://blogs.technet.microsoft.com/sharepoint_support/2014/08/14/sharepoint-css/

SharePoint の画面についているリボンの任意のグループ、ボタンを非表示にする方法です。
スタイルシートだけで対応できるので手軽です。
なお、この方法は下図のようなクラシック UI のリボンにのみ対応しています。
ribbon.png

ボタン非表示

例えば、[ライブラリ]>[接続とエクスポート]>[エクスプローラーで開く] を非表示にすると、下図のようになります。
ribbon3.png

グループ非表示

グループそのものを消すこともできます。
[ライブラリ]>[接続とエクスポート] のグループを非表示にしてみました。
分かりづらいので、一番上の画像と比べてください。
ribbon4.png

対応方法

では、対応方法です。
リボンのグループやボタンは一つずつに HTML の ID 属性が指定されています。
例えば、ドキュメントライブラリのリボンにある、[ライブラリ]>[接続とエクスポート]>[エクスプローラーで開く]を消したい場合、以下のスタイルを定義することで、非表示にできます。

hide.css
#Ribbon\.Library\.Actions\.OpenWithExplorer-Medium {
  display: none;
}

上記の CSS ファイルを任意のドキュメントライブラリに保存し、リボンを非表示にしたいページで CSS を読み込みます。
なお、任意の CSS をサイト全体に渡って読み込ませる場合は、代替 CSS を使うのが手軽です。
代替 CSS は、[サイトの設定]>[マスターページ]にて指定可能です。

ribbon2.png

リボンのグループ、ボタンの ID の調べ方

リボンのグループやボタンを非表示にする場合、前述の通り非表示対象の ID を指定する必要があります。
ID は HTML の中に書かれているので、ブラウザの開発者ツール (F12 ツール) を使って確認します。
F12 ツールにて、非表示にしたいリボンのグループ、ボタンをクリックしてソースを表示すると、下図のようなソースが表示されます。
下図は、[接続とエクスポート] をクリックした際のソースです。
黄色のマーカーで線を引いた部分が、リボングループ、ボタンの ID 属性になりますので、これをコピーして、CSS のセレクタとし、「.」の前に「\」を付けて、display:none にするだけです。
ポイントは ID に「.」が含まれているので、これをエスケープするために「.」の前に「\」を付けるところです。

ribbon5.png

HiroakiOikawa
SharePoint を使ったシステム開発、ポータル構築を生業としています。 一応 Microsoft MVP Office Developer の端くれです。
https://sharepoint.orivers.jp
advanced-solution
マイクロソフトテクノロジー、サービスを主軸にした、企業向けのシステム開発を生業とする技術者集団です。
http://www.advanced-solution.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away