便利ツール

[M]一瞬でチャットワークの見た目が変えられる!?GoogleChromeでチャットワークのデザインカスタマイズ方法

Chatwork skin sumこんにちは!みう(@miu0512)です。チャットワークの見た目をカスタマイズできるという噂を聞いたので実践。GoogleChromeの拡張機能を使って、ほんの一瞬でデザインを変えることができました。しかも自分でCSSを使って色味を変更できるなど、自由に設定が出来るようです。

チャットワークのデザイン変更の方法

STEP1 GoogleChrome拡張機能を利用

Chatwork skin 1
ChatWork Blue&Black Skin Extensionから拡張機能を表示し、「Chromeに追加」をポチ。

STEP2 拡張機能を追加

Chatwork skin 2
こんな画面が出てくるので「拡張機能を追加」をポチ。

STEP3 正常に追加されたらオプションへ

Chatwork skin 3
こんな感じで「追加されました」のアラートが出てきます。

Chatwork skin 4
GoogleChromeに表示される拡張機能アイコンから、オプションを選んでみましょう

STEP4 いろんな設定を確認

Chatwork skin 5
ソートの仕方やコードのシンタックスハイライトなどの設定が可能に。

Chatwork skin 6
そのほか、スタイルシートの設定もできます。つまりこのデザインからさらにカスタマイズできるということですね!便利!自分の好みのデザインにすることが可能です。

基本的には何もいじらなくてもOK。

STEP5 仕上げ

Chatwork skin 7
設定が完了し、正常にデザインが反映されるようになります。デザイン変わらないよーという場合は一度ログアウトすると良いそうです。

拡張機能追加状態のまま表示していますが、全体的にブルーでシックな仕上がりになっています。どことなくWordPressに似たものを感じますが、それはそれで使いやすい。気になるのは、ユーザー一覧のフォントがちょっと小さいことと、メッセージが来ていることが一覧でわかりづらいことかなと。

よく使うタグや絵文字などはメッセージ入力欄の上にショートカットアイコンとして設置されているので、結構便利かもしれません。

さいごに・・・

通常のデザインからカスタマイズしたいという人向けです。デフォルトのデザインでも十分可愛いですが、カスタマイズしてみたくなるのがWeb屋の性。ということで、チャットワークのデザインカスタマイズ方法でした。

※GoogleChromeのみで試していますので、他ブラウザについては未実証です。ごめんなさい。

最後までお付き合いいだだきありがとうございます!

これからも、みう(@miu0512)を応援していただけたら嬉しいです!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でみうをフォローしよう!

About

みう

みう (@miu0512)

フリーランス4年を経て起業。ホームページ制作やLP制作を企画からマーケティングまですべて請けているため、「Webコーディネーター」として活動中。

Category

Popular

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事

PAGETOP