重要な仕事ツールのchatworkの「フォント」を変えたい
2015年末からちょこっとずつWebライティングの仕事をしています。現在メインでお付き合いのあるクライアントさんとは中継業者をはさまず直接やりとりをしていて、その主要な報告・連絡・相談ツールがchatworkです。
このchatworkなんですが、ちょっと困ったことがあるんです。デフォルトのCSSだとチャット画面で使われているのは「メイリオ」。メイリオの文字が今ひとつ好きになれなくて、システムフォントをいじるフリーソフトまで入れてメイリオを避けている私としてはちょっとツラいんですよね。
メイリオが気に入らない理由
フォント幅が横長
私は（ケチなので、それとあと）一覧性の高い表示を見るのが好きなんですよね。全体を把握しないと安心しない傾向が発達障害者というかADHDerにはあるのでしょうか？ プリントアウトするに際してもできるだけA4用紙1枚の中に文字が詰め込まれているほうが見やすい印象です。ただ、行間はちょっと空いていてほしいかな。
で、メイリオだとフォント自体の幅が広くて、1行が間延びして見えるんですよ。基本的に速読というかスキミング≒斜め読みしながら文章を読むタイプなので、数行にわたって横に目を滑らせるのにメイリオの文章は不向きなんです。
チャットタイトルが長い場合に肝心な部分が切れる
chatworkでは、タイトルもメイリオなんですよね。私のクライアントさんだけかもしれませんが、複数の案件を一つのプロジェクトで請け負っている場合、プロジェクト名の後に個々の作業の名前が入るんですが、メイリオの幅広さのせいでプロジェクト名だけでチャットタイトルが埋まってしまうことがあるんですよ。
チャットタイトルは雇われの身ではできないし、これでいいと思っている人もいるかもしれないからと「チャットタイトル短くしてください！」とはちょっと言い出しにくいんですよね……。
というわけでCSSをカスタマイズ
毎日見る仕事画面なのにそれはないよということで、変更してみることにしました。（探せばあるものですねぇ！）
GoogleChromeの拡張機能を使う
こちらのサイトを参考に、リンク先の先にある拡張機能を使用します。あ！ ちょっと待ってくださいね、上のサイトから辿るとGitHubのサイトから下のリンクに飛ぶだけなんで。
まず、このMyStyleって拡張機能を入れます。その後が大事。
どのCSSをいじるか、Chromeのdeveloperツールで事前に確認する
chatwork画面のフォントを決めているCSSの該当部分を探す
“デベロッパーツールを利用すれば、どの要素にどのスタイルが効いてるのか画面をクリックしながら見つけられます。”
ということで、事前にchatworkのタイトルとタイムラインの文章で使われているフォントを決めている部分を取り出します。
ついでに、タイムラインの細すぎるスクロールバーのCSSも探す
chatworkのスクロールバーってすっごく細くないですか？ さっき調べたら13pxとかそんなもんでした。なのでこれも太めに変えたい。（ペンタブレットをマウスとして使っていると、このスクロールバーをクリックするのが大変なんですよ、細い部分にペン先を当てて滑らすのが難しくて。）
変える部分が見つかったら、好みに応じて変更する
該当するCSS部分が見つかったら、フォントの種類やpaddingなどをいじります。行間とかもかな。
変更した部分をテキストエディタ等にコピペしておく
変更箇所が確定したら、都度テキストエディタ等に＜変更後の内容＞をコピペしておきましょう。さきほどご紹介した拡張機能を使用する際に使います。
私用のchatworkのカスタマイズCSS
変更のポイント
先ほどから気になっていたフォント等のほかも変えてます。
- フォントをJapanSans70に変更（太めの時で裸眼でも見やすい、1行の文字数が多い）
- タイトルのスクロールバーを広めにする（22pxにしてみました）
- 全体の表示サイズがデフォルトだと92％とかになってるのを変更（100％にしました）
以上の3点を変えてます。
MyStyleの操作方法
GoogleChrome拡張機能のMyStyleが動いていることを確認（アイコンが追加されて色が薄くなってないかチェック）したら、chatworkのタイムライン画面を呼び出します。Ctrl + Mキーを押すと、右側にCSSを入力する部分が出てきますので、テキストエディタにコピペしておいた内容をこちらにコピペします。
CSSの例
こちら、ご参考まで。フォントは私好みになってますが、他のフォントで使いたいのがあれば適当に変更してみてください。（PC内に保存してあるフォントが使えるはずです。）
ちなみにCSSは（CSSも）素人なので、専門でやっている方で「こりゃいかん」とかいう部分がありましたら、コメント欄で教えていただけますと、大変幸いです。
/*全体の表示サイズを変更
*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background: transparent;
}
/*タイトルのスクロールバーの幅を広めにする
*/
::-webkit-scrollbar {
background: transparent;
overflow: visible;
width: 22px;
}
/*フォントを変更
*/
body, pre, input, select, textarea, button {
font-family: ‘JapanSans70’, sans-serif;
font-size: 12px;
line-height: 1.09em;
}
たくさんチャットが稼働している場合、その一つ一つで同じ作業が必要か？
MyStyleはサイトのドメインで判断して効いてくれるらしく、chatworkのチャット一覧から１つのチャットを選んで適用するだけで、以降はどのチャットを開いても好みのCSSの下で表示してくれます。
デュアルモニターの縦画面のほうで表示したら、チャットに入ってる全員向けの指示書などもかなり閲覧しやすくなりました。ほんと、みなさま超おすすめですよ！
コメント