[Safari]Webページの表示したくない要素を消す

目的

• safari上で表示される一部要素を非表示にしたい
• safariの機能拡張を使わずCSSで非表示にする

環境

• macOS: 12.4
• safari:15.5

独自のスタイルシートを適用する

Webページのスタイルシートではなく独自のCSSを使用します。ポップアップメニューをクリックし、「その他」を選択します。

独自のCSSを適用できる機能が標準であるのでそれを利用する。

環境設定(command + ,) > 詳細 > スタイルシート
から適用できる。

例)ニコニコ動画のプレミアム入会のポップアップを非表示にする

赤枠が消したい要素。

プレミアム会員入会の圧がすごい。
以下の手順で非表示にする。

1. デベロッパツールを開く (開発 > Webインスペクタを表示)

2. 非表示にしたい要素のidもしくはclassを探す

3. ピックアップしたid,classを非表示にするようにcssに記述する

4. cssをsafariに適用して再起動する

以下のようなCSSファイルを適用した。

.common-header-m5ds7e {
    display: none !important;
}
.SeekBarStoryboardPremiumLink {
    display: none !important;
}
.PreVideoStartPremiumLinkOnEconomyTimeContainer {
    display: none !important;
}
.PlayerOverlayBottomMessage {
    display: none !important;
}