【CSS】user.cssでメニューを自分好みに調整する【Stable Diffusion web UI(AUTOMATIC1111版)】

user.cssを使って、利用しない機能のメニューを非表示にしたり、レイアウトを多少調整することができる。

user.cssの作り方

1. WebUIのフォルダー内に、「user.css」という名前でテキストファイルを自分で作成する。
   • (webui.batがある場所と同じ階層)
2. user.cssに好きなcssを記述する。
   • ID名(#〇〇)は、WebUIの画面の調整したい場所で右クリック > 検証ツールを開いて調べる。
3. WebUIを再起動する。

自分用ソースコード

ノートパソコンのような小さい画面にて、ブラウザのウィンドウを画面半分にすると、メニューの占有率が気になったので、これを修正。

ヘッダーメニューの縦幅が広がりすぎないようにしたり、nai2localconvertアドオンや不要なメニューの占有率を減らした。

/* 使っていない不要な機能のメニューを除去する */
#roll_col,
#txt2img_style_index,
#txt2img_style2_index{
    display: none !important;
}
footer{
  opacity: 0;

}
/* ヘッダーのスタートアップメニューの領域を小さくする */
/* (画面半分にすると、レスポンシブ調整で結構な画面範囲を専有してしまうため) */
#quicksettings > div,
#quicksettings > div > div,
#quicksettings > div > div select,
#quicksettings > div > div label{
  width: 350px !important;
  max-width: 350px !important;
  min-width: 350px !important;
}

/* nai2localconvertアドオンのメニューを小さくする */
#nai2localconvert,
#nai2localUndo,
#nai2local,
hoge{
  width: 30px;
  min-width: 30px !important;
  overflow: hidden !important;
  min-height: 30px;

}