【小技】Firefox Quantumで不要な右クリックメニューを非表示にする

* 2018/1/18 アドオンにより追加される項目を非表示する方法など、大幅に加筆修正。

私がFirefoxで愛用しているアドオン(拡張機能)の1つに「Menu Wizard」があります。
コンテキストメニュー(右クリックメニュー)から不要な項目を非表示にすることができるアドオンで、作業の効率化に非常に役立つのですが、Firefox Quantum(Firefox 57)からは非対応となってしまいました。
アドオンに関する仕様変更の影響で、開発の継続は難しく、代替となるアドオンも見当たりません。

Menu Wizardは、私がChromeではなくFirefoxを選ぶ理由の1つともなっていたため、本当に残念ですが、収集した情報を元に試行錯誤した結果、同等の効果を実現することができましたので、その方法をご紹介したいと思います。
ちなみに、下記の2つの画像は、この記事で紹介する方法の適用前(左画像)と適用後(右画像)で、リンク化された画像を右クリックした際に開くメニューの比較です。

userChrome.css適用前 userChrome.css適用後



[PR]
コツコツと確実に貯めたい方、広告利用でガッツリ稼ぎたい方、どちらにもオススメ!コチラからご登録いただけると、特典として1,000ポイント獲得できます
暮らしをおトクにかえていく|ポイントインカム
ポイントインカム

[PR]



Firefox Quantumでコンテキストメニューを非表示にするには、「userChrome.css」を使用します。
平たく言えば、設定ファイルを作成して、そこに直に書き込むという方法になります。

ブログを運営されている方やウェブ知識をある程度お持ちの方ならば、cssについてはご存じのことと思います。
ウェブサイトにおいて、文字の大きさや罫線の太さ、背景色、画像の表示位置など、デザインのあらゆる部分に関わる設定ファイルです。
Firefox本体に適用されるcssファイルを作成することで、そのデザインをカスタマイズできるようにする、というわけですね。

何らかの理由でウェブサイト上に見せたくない部分がある場合、cssには次のように記述します。
要素A, 要素B {display:none;}
userChrome.cssもルールはほぼ同じです。

では、非表示にしたいコンテキストメニューの要素名をどのように調べればよいのか。
この記事では、その方法を2つご紹介します。

1つは、Menu Wizardの設定ファイルからデータを転用する方法で、多数の要素名を一括して取得できるため、非表示にしたい項目がたくさんある方は、まずはこの方法をお試し下さい。
ただし、Menu Wizardの設定ファイルからは、他のアドオンにより追加される項目など、要素名を取得できないものがあります。

そこで2つ目、「ブラウザーツールボックス」を使用する方法です。
ブラウザーツールボックスは、Firefoxの開発者向けオプション機能で、これを使うことによって、Menu Wizardでは取得できない要素名を調べることができます。
1つ目の方法とは異なり、要素名を個別に取得する必要があるため、この方法は、非表示にしたい項目が少ない方や、Menu Wizardで要素名の取得できない項目を非表示にしたい方にオススメします。

なお、いずれの方法を用いても非表示にできない項目がありますが、そのうちの少なくとも一部については、取得した要素名に少し手を加えることで解決します。
詳細は記事末尾に対処法をまとめましたので、ご確認下さい。



■Menu Wizardの設定ファイルからデータを転用する方法

手順1. Menu Wizardのインストール

Menu WizardはQuantumでは動作しませんから、まずは、Menu Wizardが動作するブラウザをQuantumとは別に用意する必要があります。
ここでは、Firefoxの派生ブラウザ「Waterfox」を推奨します。
Pale Moon」や「Cyberfox」でもOKですが、Waterfoxと比較して、非表示にできない項目が多くあります。

コチラからダウンロードいただけます。
Waterfox

Waterfoxの言語設定は、既定で英語となっていますが、Options > General > Locale Selectで「Japanese - 日本語」を選択し、再起動すると日本語化されます。

続いて、Menu WizardをWaterfoxへインストールします。

コチラからダウンロードいただけます。
Menu Wizard



手順2. 要素名を取得する

Menu Wizardの設定で、非表示にしたい項目を選択します。
チェックの外れている項目が非表示になります。

MenuWiard 設定を保存

選択し終わったら、右上にある歯車のアイコンをクリックします。
すると、上記画像のように設定項目が表示されますので、「設定を保存」をクリック、設定ファイルをご自分のわかりやすい場所へ保存して下さい。
ここまで終われば、Waterfoxは終了してもOKです。



手順3. userChrome.cssを作成する

保存した設定ファイルをメモ帳で開きます。
「menu_prefs:menu_item_list_disable={」の後に続く「"○○○":true,"×××":true」といった○○○や×××が要素名となります。
その他の部分は不要ですので、まず、それらの部分を取り除きます。

Ctrl+F、もしくは、編集 > 検索で、検索メニューを開いて下さい。
「検索する文字列」に「menu_prefs:menu_item_list_disable」と入力して「次を検索」をクリック、「menu_prefs:menu_item_list_disable」の部分が範囲選択されますので、それよりも前の部分を全て削除(menu_prefs:menu_item_list_disableを含む)します。
続いて、同じく「menu_prefs:menu_item_list_label」を検索、それよりも後ろの部分を全て削除(menu_prefs:menu_item_list_labelを含む)します。
残った文字列が「={"○○○":true,"×××":true"~中略~△△△":true}」となっていればOKです。

上記の通り、○○○や×××が要素名で、「":true,"」の部分は不要となりますので、これを取り除きます。
Ctrl+H、もしくは、編集 > 置換で、置換メニューを開いて下さい。
「検索する文字列」に「":true,"」と入力、「置換後の文字列」に「{display:none !important;}#」と入力して、「すべて置換」をクリックします。
残った文字列が「={"○○○{display:none !important;}#×××{display:none !important;}#~中略~△△△":true}」となっていればOKです。
本来、要素名ごとに{display:none !important;}と指定しなくても、#○○○,#×××と要素をカンマで区切ってまとめて指定すればよいはずなのですが、何故か一部のメニューが非表示にならないため、野暮ったいやり方ではあるものの、1つ1つ個別に指定しています。

最後に、先頭の「={"」を削除して代わりに半角の「#」を入力、同じく末尾の「":true}」を削除して代わりに「{display:none !important;}」と入力して下さい。
残った文字列が「#○○○{display:none !important;}#×××{display:none !important;}~中略~#△△△{display:none !important;}」となっていればOKです。

userChrome.css」という名前でファイルを保存します。
「txt」ではなく「css」で保存する点にご注意下さい。



手順4. userChrome.cssをプロファイルフォルダへ移動する

userChrome.cssは、そのままでは機能しません。
Quantumのプロファイルフォルダへ移動させる必要があります。

C:\Users\ユーザー名\AppData\Roaming\Mozilla\Firefox\Profilesにある「○○○.default-×××」という名前のフォルダが、プロファイルフォルダです。
プロファイルフォルダの探し方については、公式サイトにとてもわかりやすいヘルプページがありますので、そちらを参照して下さい。

このプロファイルフォルダ内に「Chrome」という名前のフォルダを作成します。
そして、作成したuserChrome.cssをChromeフォルダへ移動させます。
その後、Quantumを再起動させれば、不要なメニューが非表示になっているはずです。



■ブラウザーツールボックスを使用する方法

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

Ctrl+Shift+Iで「開発ツール」を開き、右上にある歯車のアイコンをクリックします。
詳細設定の項目にある「ブラウザーとアドオンのデバッガーを有効化」と「リモートデバッガーを有効化」にチェックを入れて下さい。

Firefox 開発ツールのオプション

非表示にしたい項目が開けるページを表示させます。
例えば、画像関連の項目を非表示にしたい場合は画像のあるページを、同じくリンク関連の場合はリンクのあるページを、といった具合です。

その後、Ctrl+Shift+Alt+Iを押して下さい。
下記画像のような通知が表示されますので、OKをクリックすると、ブラウザーツールボックスが開きます。

Firefox リモートデバッグ接続要求



手順2. 要素名を取得する

要素名を取得するには、ブラウザーツールボックスとFirefox本体を交互に操作する必要がありますが、コンテキストメニューを開いても、他の部分をクリックすると閉じてしまいますよね。
それを防ぐために、ブラウザーツールボックスの右上にある、4つの四角が集まったアイコンをクリックしておきます。

Firefox ブラウザーツールボックス ポップアップが自動的に隠れないようにします

Firefox本体に戻り、非表示にしたい項目が含まれるようにコンテキストメニューを表示させます。
続いて、ブラウザーツールボックスの左上端にある、四角と矢印のアイコンをクリックして下さい。

Firefox ブラウザーツールボックス ページから要素を選択します

再びFirefox本体に戻り、コンテキストメニューにマウスポインタを合わせると、項目ごとに赤い点線で縁取りされるようになります。
非表示にしたい項目が縁取られている状態で、その項目をクリックして下さい。

Firefox ブラウザーツールボックス インスペクタ コンテキストメニュー

クリックされた項目のコードがブラウザーツールボックスで反転表示されますので、「id=」の後ろにある「"」で挟まれた部分をダブルクリックしてコピー、メモ帳に貼り付けて控えておきます。
これが要素名になります。
非表示にしたい項目が複数ある場合は、同様にして要素名を取得して下さい。

Firefox ブラウザーツールボックス id ダブルクリック

全ての要素名を取得し終えたら、ブラウザーツールボックスを閉じます。



手順3. userChrome.cssを作成する

要素名を控えておいたテキストファイルを開き、下記のように、1つ1つの要素名の前に半角の「#」、同じく後ろに「{display:none !important;}」という形に整えます。

#○○○{display:none !important;}
#×××{display:none !important;}

本来、要素名ごとに{display:none !important;}と指定しなくても、#○○○,#×××と要素をカンマで区切ってまとめて指定すればよいはずなのですが、何故か一部のメニューが非表示にならないため、野暮ったいやり方ではあるものの、1つ1つ個別に指定しています。

整え終えたら、「userChrome.css」という名前でファイルを保存します。
「txt」ではなく「css」で保存する点にご注意下さい。



手順4. userChrome.cssをプロファイルフォルダへ移動する

Menu Wizardの設定ファイルからデータを転用する方法の手順4.と全く同じです。



■非表示にできない項目がある場合の対処法

要素名(id)に「:」が含まれる場合、そのままでは、スタイルを指定しても適用されません。
注:「:hover」や「:before」といった擬似クラスや疑似要素のことではなく、飽くまで、要素名自体の話で、例えば、ブックマークを新しいウィンドウで「開く(placesContext_open:newwindow)」や同じく「新しいプライベートウィンドウで開く(placesContext_open:newprivatewindow)」などが該当します。
このようなケースでは、placesContext_open\:newwindowという具合に、「:」の前に半角の「\」、もしくは、同じくバックスラッシュを挿入することで、スタイルが適用されるようになります。

非表示にできない区切りがある場合は、「menuseparator:not([id]){display:none !important;}」を加えてみて下さい。
ただし、非表示にする必要のない区切りにまで適用される可能性がありますので、ご注意を。
このエントリーをはてなブックマークに追加
関連記事

関連キーワード

この記事にトラックバックする(FC2ブログユーザー)
http://bee-dash.com/tb.php/14889-b86b2b3c

トラックバック

コメント

[C113] 九州男児

そのMenu Wizardの設定ファイルから作ったuserChrome.cssを配布できませんか?
  • 2018-02-24 14:27
  • 匿名

[C114] 匿名さん

コメントありがとうございます。
Menu Wizardの設定ファイルを元に、私が個人的に作成したuserChrome.cssについては、公開する考えはありません。
理由は、UI上のメニュー項目と、設定ファイル内の項目、その紐付けがされていないからです。
ある人にとっては必要なメニュー項目も、私個人が不必要と判断した場合はuserChrome.cssに含めていますし、その逆のパターンも同様ですが、どれがどれなのか特定されていません。
これでは公開しても意味がないでしょう。
わざわざ回りくどい手順を紹介しているのは、それなりの理由があってのことです。
  • 2018-02-24 18:26
  • ハタラキバチ

コメントの投稿 *「コメント」以外は空欄のままでもご投稿いただけます

管理者にだけ表示を許可する

すぐたま 期間限定 ここから登録で600mile(300円相当)GET!

各種クイズの答えを検索できます

最新記事

プロフィール

ハタラキバチ


ブログ管理者:ハタラキバチ

支出や個人情報が必要な案件は、極力ノータッチというスタンスでおこづかい稼ぎに臨んでいるため、広告利用は控えめ。
得意分野は、ブラウザの拡張機能やソフトウェアを活用した裏技 / 小技です。

  • 通算獲得額 (2014/1~)
    :2,683,689円
  • 2018年4月度 獲得額
    :41,205円



獲得額ランキング

2018年4月度 獲得額:41,205 円
順位サイト名獲得額
1クラウドワークス8,325円
2A8.net6,197円
3忍者AdMax4,153円
4ランサーズ3,712円
5ECナビ2,181円
6リア食1,930円
7キューモニター1,732円
8げん玉1,406円
9ハピタス1,067円
10infoQ999円

通算獲得額(2014/1~):2,683,689円
順位サイト名獲得額
1クラウドワークス628,397円
2ランサーズ419,459円
3infoQ154,679円
4げん玉112,347円
5A8.net110,144円
6キューモニター89,376円
7ポイントタウン78,203円
8ECナビ66,575円
9マクロミル54,955円
10ちょびリッチ47,428円

ブログランキング参加中

くる天 人気ブログランキング

メールフォーム

名前:
メール:
件名:
本文:

免責事項

当ブログに掲載されている情報は、当該記事の執筆当時におけるものであり、最新の情報とは異なる可能性がございます。
特に、友達紹介特典については、キャンペーン開催や制度改定により、特典内容が変更されることがございますので、ご注意下さい。

また、掲載する情報の確認には十分に配慮しておりますが、その正確性を保証するものではございません。
当ブログの利用により生じた、いかなる損害についても、その責任は負いかねますので、情報の取り扱いは自己責任にてお願い致します。