Skip to content

Latest commit

 

History

History
229 lines (155 loc) · 9.84 KB

README.ja-JP.md

File metadata and controls

229 lines (155 loc) · 9.84 KB
Raw

logo

vscode-background

Visual Studio Code にも背景画像を。

エディターごとの画像表示、全画面の画像表示、画像の切り替わり、画像・CSSのカスタマイズ...

GitHub | Visual Studio Marketplace

Version Installs Ratings Stars Build Status License

エディターごとの画像

背景画像の全画面表示

インストール

サイドバーの拡張機能タブからbackgroundを検索！

ext install background

カスタマイズ

settings.jsonからユーザー設定をカスタマイズすることができます。

settings.json とは | 設定方法

コンフィグ

基本設定

設定 タイプ デフォルト 説明
background.enabled Boolean true 拡張機能を有効化するかどうかを制御します。

デフォルト設定

設定 タイプ デフォルト 説明
background.useFront Boolean true 画像を最前面に表示するかどうかを制御します。
background.style Object {} 全ての画像に適応される CSS を制御します。
background.styles Array<Object> [{},{},{}] 個別の画像に適応される CSS を制御します。
background.customImages Array<String> [] 画像のパスを指定してください。
background.interval Number 0 次の画像を表示するまでの秒数を制御します。0の場合、画像は変更されません。

CSSについて知る css style

フルスクリーン設定

デフォルト設定を上書きする可能性があります。

設定 タイプ デフォルト 説明
background.fullscreen Object null 全画面画像を設定する

example:

{
  "background.fullscreen": {
    "images": ["https://pathtoimage.png"], // URLもしくはファイルパス(file:///~/~.png)
    "opacity": 0.91, // 0.85 ~ 0.95 がおすすめです
    "size": "cover", // CSSのbackground-sizeに相当します。`cover` ,`contain`,`200px 200px` のように設定します
    "position": "center", // 同` background-position `，デフォルト` center `
    "interval": 0 // 次の画像を表示するまでの秒数を制御します。`0`の場合、画像は変更されません。
  }
}

使用例

  1. 拡張機能を無効化する
{
  "background.enabled": false
}
  1. カスタムイメージを使用する

https 通信を採用しているリンクを使用する必要があります， http 通信は VSCode により制限されています。

{
  "background.customImages": ["https://a.com/b.png", "file:///Users/somepath/a.jpg"]
}
  1. カスタム CSS - 透明度
{
  "background.style": {
    "opacity": 0.6
  }
}
  1. カスタム CSS - 画像サイズ
{
  "background.style": {
    "background-size": "300px 460px" //"横幅 縦幅"
  }
}
  1. 全画面表示
{
  "background.fullscreen": {
    "images": ["https://pathtoimage.png"], // URLもしくはファイルパス(file:///~/~.png)
    "opacity": 0.91, // 0.85 ~ 0.95 がおすすめです
    "size": "cover", // CSSのbackground-sizeに相当します。`cover` ,`contain`,`200px 200px` のように設定します
    "position": "center", // 同` background-position `，デフォルト` center `
    "interval": 0 // 次の画像を表示するまでの秒数を制御します。`0`の場合、画像は変更されません。
  }
}

警告

この拡張機能は、VSCode 本体の CSS ファイルを編集することで機能します。

そのため、初回インストール時または vscode 更新時に警告が表示されます，[二度と表示しない] をクリックして非表示にできます。

原因:

アンインストール

３つの方法

1. (おすすめ)

F1キーを押し、コマンドパネルを開ます。
「Background - Uninstall (remove extension)」と入力して、
自動アンインストールします。

2.

setting.jsonで{"background.enabled": false}  と変更してから　　
手動でアンインストールします。

3. 非友好的な方法：

もしあなたがこのプラグインを直接アンインストールしたら、心配しないでください
次にvscodeを完全に終了し、開いてもう一度再起動すると、画像がなくなり、、、
（変なのは私も知っていますが、とにかくvscodeの制限＝。＝）

貢献者 🙏

shalldie suiyun39 frg2089 AzureeDev tumit asurinsaka u3u kuresaru Unthrottled rogeraabbccdd rogeraabbccdd

チェンジログ

チェンジログで全ての変更を確認できます。

よくある質問

Q: [Code インストールが壊れている可能性があります。]を消すには?
A: 確認してください: https://github.com/lehni/vscode-fix-checksums

Q: MACに拡張機能をインストールしましたが、機能しません。
A: `Visual Studio Code` を`Download`フォルダー から`Applications`フォルダーに移動してください。

Q: プラグインは、vscode css ファイルの変更に基づいて実行され、権限がない場合は権限の昇格を試みます。
   ユーザーが何らかの理由で機能せず、自分でアクセス許可を変更する必要がある場合はどうなりますか?


A: Windows では、vscode のアイコンを右クリックし、[管理者として実行] を選択します。
A: Mac/Linux では、https://github.com/shalldie/vscode-background/issues/6 を試してください。

ライセンス

MIT