グラブルのチャット使いづらいので調整したよ

2015年12月17日2017年9月14日グラブル,技術

この記事は2015年12月17日に書かれたものです。ご注意ください。

面倒なので用件だけ書きます

縮小してると凄く見づらい。
だから高さを調整しました。

完成形

高さ800px で下記CSSを使うと右のように見やすくなります。満足。

必要なもの

・グラブルをブラウザ上で見られる環境（公式アプリは未確認）
・CSSを書き換えられる環境（Chromeなら「Stylist」や「Stylebot」。使い方は各自調べること）

やること

Chromeに先ほどの拡張を入れます。
そこへ以下のCSSを記入。

/* 縮小時の調整 */
/* 表示 高さ */
#general-chat #chat-body {
height: 30%!important;
}
/* 文字 高さ */
#general-chat #chat-body:not(.half):not(.full) #chat-content {
height: 90%!important;
}
#general-chat #chat-body.half #chat-content {
height: 90%!important;
}
/* 入力欄 位置 */
body.ios #chat-body.input:not(.full) {
padding-bottom:400px!important;
}

/* フルサイズ */
/* 表示 高さ */
#general-chat #chat-body.full {
height: 100%!important;
}
/* 入力欄 位置 */
body.ios #chat-body.input.full #chat-content {
height: 85%!important;
}

あとはChrome上でグラブルを開くとうまく行きます。

PC専用ですが、グラブルのチャットをすこし広げてみた。不具合ありそうだけど…ｗ pic.twitter.com/isgHcm8qGk
— みせる (@micelle9) 2015, 12月 17

ただ急ぎなので不具合あるかも。
特に共闘やマルチみてないので。
そこは個々人で弄って下さい。

しかし「!important」で無理変えてるので何が起きるか分からないですね。こわいこわい。

追記

12月17日(木)
18:35 予想通り公式アプリ動かないですね。~~考えます。~~面倒くさくなったので辞めました。
18:50 チャット入力できませんね。修正します。
19:22 チャット欄を作るために90%から75%に修正。対策があるはずだけど時間が無いので。ただしFULLサイズにすると崩れるので注意。
19:41 縮小時のチャット欄を調整。そのため90%へ戻しました。まだFULLサイズは崩れます。
19:57 縮小時のCSS、パーセントに設定。これで設定の調整しやすくなるかも。
20:00 縮小・拡大のチャット欄、調整完了。高さによっては使いづらいかも知れないので、各自調整して下さい。
20:09 縮小時、パーセント指定だと横幅で酷いことになったのでpx指定。
20:12 マルチ等で見やすい30%に指定(縦800px時)。個々人で調整お願いします。

12月27日(日)
00:14 縮小時の表示がおかしくなっていたので修正。「#general-chat #chat-body:not(.half):not(.full) #chat-content」が変わっていたのが原因でした。

4月10日(日)
「#general-chat #chat-body:not(.half):not(.full) #chat-content」「#general-chat #chat-body.half #chat-content」どちらでも対応するように修正。