Firefoxで「コンテンツへスキップ」ボタンを非表示にする

Firefox(正確にはFirefox Developer Edition)にてページを再読み込みすると、ある日突然以下のように「コンテンツへスキップ」と表示されるようになりました。

最初に「サイトが動作しない？ページを再度読み込んで一時的にトラッキング帽子を弱めます。」と表示される

「今後は表示しない」をクリックしたことがあると2度と表示されませんが、サイト単位なのかブラウザ単位なのかは不明です。

　↓
「ｘ」で閉じる
　↓
ページ左上に「コンテンツへスキップ」とデカデカと表示される

　↓
(後述の対策、コメントアウトしたコードの一部で)この文字だけ消そうとすると、サイトタイトルの箇所に青い枠が表示される

最初はWordPressあるいはテーマ「Cocoon」を疑ったのですが、調べたところ、この現象は

Firefoxのトラッキング保護（ETP）とページリロードの際、一時的なスタイル崩れが重なったときに発生する現象

らしいです。

「コンテンツへスキップ」ボタンを非表示にする解決策

userContent.cssにて、以下のコードを記述します。

userChrome.cssではありません、userContent.cssです。

/* ●「コンテンツへスキップ」ボタンを非表示● */
/*■これを有効にするとアクセシビリティ的に少し問題あり■#skip-to-content, #skip-link, .skip-link, .skip-to-content{
 display: none !important;
}■*/

/* skip-link のフォーカスリングも完全に消す */
/*■これを有効にするとアクセシビリティ的に少し問題あり■.skip-link:focus,
a.skip-link:focus,
a[href="#main"]:focus,
header .site-title a:focus,
header h1 a:focus {
 outline: none !important;
}■*/

/* ヘッダー内のフォーカスリングも消す */
/*■これを有効にするとアクセシビリティ的に少し問題あり■header a:focus {
 outline: none !important;
}■*/

/*■代替策■*/
.skip-link, #skip-link, #skip-to-content, .skip-to-content {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

色々ググって最初はコメントアウトしたコードにしたのですが、それだとアクセシビリティ的に少し問題があるみたいでしたので、代替策で対応することにしました。

■注意■
FirefoxでuserContent.cssに記述するやり方の場合は、先にuserContent.cssを使えるようにする必要があります。
※多段タブを導入済みでuserChrome.cssが使えている状態であれば、単にuserContent.cssを作成するだけでOKです。

たぶんStylusでもOKなはずです。

■userContent.cssを使えるようにする手順■
about:config にて、toolkit.legacyUserProfileCustomizations.stylesheets　をtrueにします。
　↓
Firefoxのプロファイルフォルダー内※1に『chrome』フォルダーを作成し『chrome』フォルダー内にuserContent.cssを作成します。
※userContent.cssは、文字コード：UTF-8／改行コード：CR+LF／BOMなしです。

※1のプロファイルフォルダーは、
Firefoxのメニューバーにて、『ヘルプ』　→　トラブルシューティング情報　→　プロファイルの右にある『about:profiles』 →　『これは使用中のプロファイルです。削除できません。』のルートディレクトリの右にある『フォルダを開く』

あるいは

Winキー + Rで

%appdata%\Mozilla\Firefox\Profiles\

と入力してエンターでプロファイルフォルダが開けます。

ちなみに私の場合は

FirefoxでGoogleの検索バーで灰色の四角(半角スペース)が表示され、その後の文字が入力しづらい・入力できない件

FirefoxでGoogleの検索バーで日本語入力すると灰色の四角(半角スペース)が表示され、その後の文字が入力しづらい・入力できない現象に長い間悩まされていました。※上記の謎の灰色の半角スペースの箇所は現象説明用に作成したものなので、実...

で

/* Google検索の日本語入力時の表示崩れ（灰色の四角）対策 */
@-moz-document domain("google.com"), domain("google.co.jp") {

  /* 基本対策：入力欄の親要素の溢れ制限を解除 */
  form[role="search"] * {
    overflow-x: visible !important;
  }

  /* Reddit案：特定要素の干渉を防ぐための非表示設定 */
  #fbarcnt {
    display: none !important;
  }

  /* --- 以下、解決しない場合のみ有効化（/* と */ を削除） --- */
  /*
  .RNNXbe, .SDk9S {
    overflow: visible !important;
  }
  */
}

さらに

YouTubeの右サイドバーの横幅が狭くなる原因と対策

YouTubeの右サイドバーが極端に狭くなる問題を検証し、原因となるA/Bテストの仕組みと、uBlock・userContent.cssで本来の幅に戻す安全な解決策をまとめました。

で

/* YouTube内の右のサイドバーの幅が狭くなる対策(暫定対策) */
@-moz-document domain("www.youtube.com") {
    /* サイドバー（プレイリスト・関連動画）の横幅を本来の420pxに広げる */
    #secondary.ytd-watch-flexy {
        width: 420px !important; 
        min-width: 420px !important;
        flex-basis: 420px !important;
    }

    /* 動画プレイヤー本体がサイドバーに被らないよう調整 */
    ytd-watch-flexy[flexy] #primary.ytd-watch-flexy {
        margin-right: 20px !important;
    }

    /* サムネイルの本来の横幅に戻す */ 
    #related a.yt-lockup-view-model__content-image, #related ytd-thumbnail {
        width: 170px !important;
    }
}

が追加してあります。

全部まとめると

/* Google検索の日本語入力時の表示崩れ（灰色の四角）対策 */
@-moz-document domain("google.com"), domain("google.co.jp") {

  /* 基本対策：入力欄の親要素の溢れ制限を解除 */
  form[role="search"] * {
    overflow-x: visible !important;
  }

  /* Reddit案：特定要素の干渉を防ぐための非表示設定 */
  #fbarcnt {
    display: none !important;
  }

  /*
  .RNNXbe, .SDk9S {
    overflow: visible !important;
  }
  */
}



/* YouTube内の右のサイドバーの幅が狭くなる対策(暫定対策) */
@-moz-document domain("www.youtube.com") {
    /* サイドバー（プレイリスト・関連動画）の横幅を本来の420pxに広げる */
    #secondary.ytd-watch-flexy {
        width: 420px !important; 
        min-width: 420px !important;
        flex-basis: 420px !important;
    }

    /* 動画プレイヤー本体がサイドバーに被らないよう調整 */
    ytd-watch-flexy[flexy] #primary.ytd-watch-flexy {
        margin-right: 20px !important;
    }

    /* サムネイルの本来の横幅に戻す */ 
    #related a.yt-lockup-view-model__content-image, #related ytd-thumbnail {
        width: 170px !important;
    }
}



/* ●「コンテンツへスキップ」ボタンを非表示● */
/*■これを有効にするとアクセシビリティ的に少し問題あり■#skip-to-content, #skip-link, .skip-link, .skip-to-content{
 display: none !important;
}■*/

/* skip-link のフォーカスリングも完全に消す */
/*■これを有効にするとアクセシビリティ的に少し問題あり■.skip-link:focus,
a.skip-link:focus,
a[href="#main"]:focus,
header .site-title a:focus,
header h1 a:focus {
 outline: none !important;
}■*/

/* ヘッダー内のフォーカスリングも消す */
/*■これを有効にするとアクセシビリティ的に少し問題あり■header a:focus {
 outline: none !important;
}■*/

/*■代替策■*/
.skip-link, #skip-link, #skip-to-content, .skip-to-content {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

となります。

userChrome.cssではありません、userContent.cssですのでご注意ください。