Stylusを使ってChatWorkのデザインを変更した

はじめに

会社のチャットツールで ChatWork を利用していますが、使いづらい点が数点あるので、 ブラウザの拡張機能である Stylus を使って見た目をいじる記事です。

Stylus と Stylish

同じ用途の拡張機能として、Stylishがありますが、こちらは 2018 年頃に一度ユーザーのデータ収集を秘密裏に行っていました。 現在は Chrome ストアに再登場していますが、過去の事例を考えるとあまり使用したくはないです。

• Firefox の人気アドオン「Stylish」はユーザーのインターネット履歴をこっそり収集していた - GIGAZINE
• Firefox と Chrome の Stylish がストアから公開停止になった件。対処など。 – らくログ

Stylus の方はGitHubにてソースコードが GPL-3.0 ライセンスで公開されているため、こちらを利用しております。

Stylus でデザインをいじる

今回いじるのは、

1. ユーザー/グループ表示を小さくする
2. 概要欄を大きくする
3. ユーザー/グループをホバーしているときの色をわかりやすくする

の 3 つです。 以下の gist 内のコメントにそれぞれ何をイジっているのかを記載しています。

さいごに

css が使えるなら、手軽にデザインを編集できるのは便利です。 今回は ChatWork のデザイン変更に使いましたが、Web アプリケーションに対してなら何にも利用できます。

この拡張機能を使って、痒いところに手が届かない状態を脱しましょう。

参考

• Stylus