2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-07-15

※この記事書いてから気が付きましたが、もっと参考になるご本家の記事がありましたね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

2
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?