Alternative-Fire!

ヘッダーのリザーブ

2018年2月7日水曜日

KC3改でパネルの背景画像を消して透過するCSS

Kancolle Command Center 改(通称: KC3改)のNatusiroテーマパネルの背景画像を消して透過するCSS
これを使うと後ろの背景に好きな画像を使ったときに見栄えがよくなる

wrapper.png

KC3改のNatusiroテーマではwrapper.pngという画像が背景に使われていて、パネルの背景にカスタム画像を指定してもそれはそのままなので見た目があまりよくない

wrapperが背景画像の邪魔になっている

こうすると…

クリア!

ほら!良いでしょー

.wrapper_bg{
 background: none !important;
 background-color: rgb(0, 32, 64) !important;
}

つかいかた
  1. このCSSをコピーする
  2. KC3改の設定 > パネル > CSSカスタマイズ に貼り付ける

background-colorで背景の色を指定しています
rgb(0, 32, 64)はもともとの背景画像の雰囲気に合わせた こんな感じの色 ですが気に入らなければ変えられます
透明度は KC3改の設定 > パネル > 不透明度 から設定してください 私は55%にしてますが、もうちょっと下げて45%にしてもナイスだと思います
"不"透明度なので下げるほど透明になります

---

おまけ1: ローカルにある画像を背景画像として使う設定

これで背景画像を使うためにインターネットのどこかに画像をアップロードする必要がなくなる

file:/// で始まるローカルアドレス

やりかた
  1. Chromeの拡張機能ページを開く
  2. KC3改を見つける
  3. "ファイルの URL へのアクセスを許可する"にチェックする
  4. KC3改の設定 > パネル > 背景画像 に使いたい背景画像のアドレスを入れる

使いたいローカルの画像をドラッグ・アンド・ドロップでChromeに放り込むとChromeで画像が開かれるのでそのアドレスを見ればファイルのアドレスがわかります
それをそのままコピーして KC3改の設定 > パネル > 背景画像 に入力すればOK


おまけ2: 自分のコメントのフォントをMeiryo UIにするCSS

これで12文字まで入力してもパネル上ではみ出なくて済む 上の背景のCSSと同時に使える
Plainテーマでも使えるのかどうかはわかんない

.admiral_comm {
 font-family:"Meiryo UI" !important;
}

つかいかた
  1. このCSSをコピーする
  2. KC3改の設定 > パネル > CSSカスタマイズ に貼り付ける
Before <-> After

これで しょーかくねーおなかすいたー とか ムラクモチャンノミミノアーレ とか書いても大丈夫 まあ後者については書いたとおり半角カナって手もあるんだけど