Visual Studio Code のデバッグコンソールとかに背景画像を設定したい

 

　メリークリスマスを通り越して、気が付けば大晦日も大晦日。みなさん如何お過ごしでしょうか。僕はAqoursの紅白出場が見れたので満足しているところです。

 

　で、ふと、そうおいえば12月はまだブログ更新してなかったことを思い出して、今あわてて書いているところです。別にノルマとか無いんですけども。というわけでタイトルの通りです。

　本題。エディタとかに背景画像を設定するのは、ぐぐればすぐ出てくるので簡単に出来てるんですよ。主に幻想ツバメさんとこの記事を参考にさせてもらいまして。要はCSSいじってあれこれ弄っちゃうってわけですね。これによって、こんな感じにするところまではあっさり出来ました。

 

 

　そこまでは良かったんですが、エディタやターミナルは画像設定できてもデバッグコンソールとかのタブが出来なかったんですよね。（ターミナルと共通だと思ってた）

 

 

 

　これがググってもどう書けばいいのか出てこなかったので、自分で適当に調べて、設定してみました。のでそれ晒しときます。ただ、ぶっちゃけCSSとか全然詳しくないので、なんか変な書き方してたらゴメンナサイね、適宜修正して使ってください。（もちろん自己責任でお願いします）

 

　ヘルプの開発者ツールから適当に要素を調べた感じ、デバッグコンソールの要素名はpanelみたいなので、「 workbench.main.css 」に以下を書き加えてみました。

.monaco-workbench .part.panel {
    background: url("///C:/MyData/vscode_custom/panel.jpg") no-repeat;
    background-position: right top; 
    background-size: contain;
}

 

　したらばこんな感じで、デバッグコンソールにも画像を設定できました。

 

　細かい調整とかは必要ですが、ひとまず画像設定するだけならこれで……。誰かの役に立てば幸いです。

 

 

　それではみなさん、よいお年を。