[Firefox]userChrome.cssを使ってコンテキストメニューの項目を非表示にする手順

userChrome.cssを使って、コンテキストメニューの項目を非表示にする手順を解説します。この方法はFirefoxに標準搭載されている機能のみで行えるので、拡張が使えなくなってしまったときのために覚えておいて損はありません。応用すればUIの編集も可能です。

手順１：ブラウザーツールボックスを有効にする

１. CTRL+SHIFT+Iキーを押して開発者ツールを開きます。

２. 右側にある歯車アイコンを押します。

３. 詳細設定の項にある「ブラウザーとアドオンのデバッガーを有効化」と「リモートデバッガーを有効化」にチェックを入れます。

手順２：ブラウザーツールボックスを開く

１. 編集したいコンテキストメニューを表示できるページを開きます。

２. 開いたページでCTRL+SHIFT+ALT+Iキーを押します。

３. ダイアログボックスが表示されるのでOKを押します。この表示を出さないようにするには、about:configからdevtools.debugger.prompt-connectionをfalseに設定します。

手順３：メニュー項目のIDを特定する

１. ブラウザーツールボックスの右側にある「正方形が4つのボタン」を押します。

２. 開いておいたページに戻り、編集したいコンテキストメニューを開きます。

３. ブラウザーツールボックスの左端にある「マウスポインタと長方形を組み合わせたボタン」を押します。

４. 再びページに戻り、非表示にしたい項目をクリックし選択状態にします。

５. ブラウザーツールボックスの左欄でハイライトされているコード内にある、id=""のダブルコーテーションの中身をコピーします。（ハイライト上で右クリック ＞ コピー ＞ CSSセレクターでも可）

手順４：userChrome.cssを作成する

１. アドレスバーにabout:supportと入力しエンターキーを押します。

２. アプリケーション基本情報の項のプロファイルフォルダーという項目にある「フォルダーを開く」ボタンを押します。

３. 開いたフォルダ内にchromeという名前のフォルダを作成します。

４. chromeフォルダ内にuserChrome.cssというファイルを作成します。作り方がわからない場合は、空のテキストファイルを作成し、拡張子を含む名前をuserChrome.cssに変更します。

５. userChrome.cssをエディタ（メモ帳でも可）で開きます。

６. #コピーしたID{display:none!important;}というコードを書いて保存します。

７. Firefoxを再起動すると反映されます。