Visual Studio Code (VSCode) では、右クリックメニューやコンテキストメニューのフォントサイズがシステム設定に依存するため、大きすぎてモニター幅を超えることがあります。この記事では、右クリックメニューの文字サイズや行間を調整する方法と、必要に応じたカスタマイズ手法を紹介します。
VSCodeのUIフォントサイズ設定
VSCodeでは、エディタ内のフォントサイズや行間は “settings.json” から変更できますが、右クリックメニューなどのコンテキストメニューはシステムフォントを使用しています。
そのため、通常の “editor.fontSize” や “editor.lineHeight” では変更できません。UI全体のスケーリング設定を用いる必要があります。
ウィンドウズ／Macでのスケーリング調整
Windowsの場合、[設定] > [システム] > [ディスプレイ] からスケーリングを変更できます。例えば100％や125％に調整することで、右クリックメニューの文字サイズが適切になります。
Macでは、システム環境設定 > ディスプレイ > 解像度スケーリングで同様に調整可能です。ディスプレイ解像度や拡大率を変更すると、VSCodeのUI全体に反映されます。
VSCodeのズーム機能を使う
VSCodeには、ウィンドウ全体を拡大縮小する “window.zoomLevel” という設定があります。settings.json に以下のように追加します:
"window.zoomLevel": 0値をプラスにするとUI全体が拡大され、マイナスにすると縮小されます。右クリックメニューの文字サイズもこの設定で間接的に調整できます。
エクステンションでのカスタマイズ
残念ながら、右クリックメニュー専用のフォントサイズ調整エクステンションは公式には存在しません。しかし、テーマやカスタムCSSを利用する “Custom CSS and JS Loader” などのエクステンションを使うことで、メニューのフォントサイズをCSSで上書きできます。
例として、以下のCSSを適用するとコンテキストメニューの文字サイズを調整できます:.monaco-menu { font-size: 12px !important; line-height: 1.2 !important; }
注意点と実践例
Custom CSSを使用する場合、VSCodeアップデート後に再適用が必要になることがあります。また、テーマとの兼ね合いで見た目が崩れることもあるため、まずはバックアップを取ってから設定すると安心です。
例えば、4Kモニターで右クリックメニューが巨大になる場合、window.zoomLevel を -1 に設定し、Custom CSSでメニューの font-size を 12px に固定することで快適に操作できます。
まとめ
VSCodeの右クリックメニューのフォントサイズはシステム設定に依存します。settings.json の window.zoomLevel やシステムのスケーリングを調整することで改善可能です。より細かく調整したい場合は “Custom CSS and JS Loader” などのエクステンションを使い、CSSでフォントサイズや行間を指定すると自由度が高くなります。アップデート時の再適用に注意しながら、自分の環境に最適な設定を見つけましょう。
コメント