上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

拡張が増えてくると困ることのひとつが、コンテキストメニュー（右クリックしたときに現れるアレね）の項目が増えすぎるという問題。今回は、そのコンテキストメニューを増やしたり、減らしたり、変更したりする方法を考えてみたいと思います。

（続きはこちら）

---

コンテキストメニューのカスタムは、一番簡単で、融通が利くのが「Opera」です。menu.iniをいじるだけで簡単にできますからね。これは便利です。
逆に、一番融通が利かないのが、IE。これは最悪です。WindowsでIEを使用している場合、IEはOSそのものに組み込まれていますから、ただ単にコンテキストメニューを変更したいだけなのに、OSの心臓部分、レジストリをいじらなければならず、非常に面倒かつ危険です。

その中間にあるのがFirefoxで、Firefox独自の項目を変更すれば、コンテキストメニューを変更することが可能なのですが、ちょっと分かりにくいという難点があります。

まあ、拡張を導入して、これを簡単に変更するという手もあるのですが、この分野で一番有名な「MenuEditor」があんまりよくない。私の環境ではあまり上手く動作しないのです。そのため、長い間そのまま放置してきたのですが、要らない項目がとっても鬱陶しい。つまり、作業の効率化を損ねるわけです。

それで、これはどうにかならないかなと思っていたところ、「userchrome.css」のことを思い出しました。
もしかすると、これで消せるのではないかというわけですね。

それで、案の定、不要な項目を消すことができたので、ここにまとめておきたいと思います。
userchrome.cssについては、以下を参照。
□Firefox Help: 設定ファイルの編集　userchrome.css

設定の仕方は簡単で、以下に並べる項目のうち、自分が消したいと思う項目（赤字の部分）をuserchrome.cssに書き込んで保存するだけでOKです。

１．Web上で普通に右クリックしたときに現れるコンテキストメニュー
　Operaでいうところの[Document Popup Menu]です。

/* 「戻る」 */
#context-back { display: none !important; }
/* 「進む」 */
#context-forward { display: none !important; }
/* 「更新」 */
#context-reload { display: none !important; }
/* 「中止」 */
#context-stop { display: none !important; }
/* 「中止」の下のセパレーター（仕切り） */
#context-sep-stop { display: none !important; }
/* 「このページをブックマーク...」 */
#context-bookmarkpage { display: none !important; }
/* 「名前を付けてページを保存...」 */
#context-savepage { display: none !important; }
/* 「リンクを送信...」 */
#context-sendpage { display: none !important; }

２．リンク上で右クリックをしたときに現れるコンテキストメニュー
　Operaでいうところの[Link Popup Menu]です。

/* 「リンクを新しいウィンドウで開く」 */
#context-openlink { display: none !important; }
/* 「リンクを新しいタブで開く」 */
#context-openlinkintab { display: none !important; }
/* 「リンクを新しいタブで開く」の下のセパレーター（仕切り） */
#context-sep-open { display: none !important; }
/* 「このリンクをブックマーク...」 */
#context-bookmarklink { display: none !important; }
/* 「リンク先を名前を付けて保存...」 */
#context-savelink { display: none !important; }
/* 「リンク URL をメールで送信...」 */
#context-sendlink{ display: none !important; }
/* 「メールアドレスをコピー」 */
#context-copyemail { display: none !important; }
/* 「リンク URL をコピー」 */
#context-copylink { display: none !important; }
/* 「リンク URL をコピー」の下のセパレーター（仕切り） */
#context-sep-copylink { display: none !important; }

３．画像上で右クリックしたときに現れるコンテキストメニュー
　Operaでいうところの[Image Popup Menu]です。

/* 「画像を表示」 */
#context-viewimage { display: none !important; }
/* 「画像をコピー」 */
#context-copyimage-contents { display: none !important; }
/* 「画像のURLをコピー」 */
#context-copyimage { display: none !important; }
/* 「画像のURLをコピー」の下のセパレーター（仕切り） */
#context-sep-copyimage { display: none !important; }
/* 「画像を名前を付けて保存...」 */
#context-saveimage { display: none !important; }
/* 「画像をメールで送信...」 */
#context-sendimage { display: none !important; }
/* 「壁紙として設定」 */
#context-setWallpaper { display: none !important; }
/* 「...の画像を表示しない」 */
#context-blockimage { display: none !important; }
/* 「背景画像を表示」 */
#context-viewbgimage { display: none !important; }
/* 「背景画像を表示」の上のセパレーター（仕切り） */
#context-sep-viewbgimage { display: none !important; }

４．テキストエリアで右クリックしたときに現れるコンテキストメニュー
　Operaでいうと[Hotclick Popup Menu]が一番近いかな。

/* 「元に戻す」 */
#context-undo { display: none !important; }
/* 「元に戻す」の下のセパレーター（仕切り） */
#context-sep-undo { display: none !important; }
/* 「切り取り」 */
#context-cut { display: none !important; }
/* 「コピー」 */
#context-copy { display: none !important; }
/* 「貼り付け」 */
#context-paste { display: none !important; }
/* 「削除」 */
#context-delete { display: none !important; }
/* 「削除」の下のセパレーター（仕切り） */
#context-sep-paste { display: none !important; }
/* 「すべて選択」 */
#context-selectall { display: none !important; }
/* 「すべて選択」の下のセパレーター（仕切り） */
#context-sep-selectall { display: none !important; }
/* 「Web検索:〜」 */
#context-searchselect { display: none !important; }
/* 「プロパティ」の上にあるセパレーター（仕切り） */
#context-sep-properties { display: none !important; }
/* 「選択した部分のソースを表示」 */
#context-viewpartialsource-selection { display: none !important; }
/* 「Add a Keyword for this Search...」 */
#context-keywordfield { display: none !important; }
/* 「印刷...」 */
#context-printpage { display: none !important; }
/* 「このフレーム」 */
#frame { display: none !important; }
/* 「このフレーム」 の上のセパレーター（仕切り） */
#frame-sep { display: none !important; }
/* View MathML Source */
#context-viewpartialsource-mathml { display: none !important; }
/* ページのソースを表示 */
#context-viewsource { display: none !important; }
/* ページの情報を表示 */
#context-viewinfo { display: none !important; }
/* プロパティ */
#context-metadata { display: none !important; }

□参考サイト
・How can I remove items from right-click context menu? - MozillaZine Forums
・Chrome element names and IDs - MozillaZine Knowledge Base
・Menu customization - MozillaZine Knowledge Base

最初からこうすればよかったんですね（笑）。今回は、デフォルトの項目を中心に書いてみましたが、拡張などを導入することによって追加される独自の項目も変更が可能です。ただ、その場合は、その拡張によって定義されている、その項目の名前を調べる必要があります（拡張によっては、オプションでコンテキストメニューへの表示、非表示を選択できるものも多い）。

ちなみに、userchrome.cssを使わずとも、Stylishを使ってグローバルスタイルのCSSとして使用することも可能です。
また、今回は分かりやすいように、ひとつひとつ丁寧に書いてみましたが、もちろんCSSですので、

#context-back, #context-forward
{ display: none !important; }

みたいにまとめて書くことも可能です。

さらにいえば、CSSですので、例えば、

#context-back, #context-forward
{ color: 色の値 !important; }

とすると、文字の色を変えることができたりします。

これはいいですね。

最後に、「userchrome.css」を使用すれば、他の部分の項目も変えることができますが、今回の趣旨とははずれてしまうので、省略します。

次に、新たな項目を追加する方法ですが、これはPiroさんの「コンテキストメニュー拡張」できまりですね。
□XUL Apps > ContextMenu Extensions - outsider reflex

そういえば、Piroさん、「Mozilla24」で輝いていたよね。
司会者に「ブログを書かずに真面目にやって下さい」とかいわれて（笑）。
□ ［企画］Mozilla24　ドキッ! 丸ごとウェブ!! ブラウザだらけの討論大会 IRCログ

今回は以上です。

おまけ

宣伝です（笑）。
CSSがでてきたので、ついでに。すみません（笑）。
以前、私が書いたCSSで割と評判がよかったもの。よかったらどうぞ。
Browser.js [CSS 3] Livedoor Reader CSS Tweet

各種ソーシャルブックマーク： |