2012/04/23

Google Chrome版、TweetDeckのカラースタイルを変更する方法


私はPCでのTwitterクライアントにChrome上で動作するアプリ”TweetDeck”を利用しています。





TweetDeckはTwitter社に買収されたTwitterクライアントです。



PCではそこまで高性能なクライアントは必要なくて、複数のTLが同時に表示されれば充分だったので、概ね満足しています。

ですが、私が少し不満なのが、カラーが選べない(黒背景に白文字、リンクは青文字)点です。個人的には白地に黒文字の方が見やすいので・・・



ということで、カラースタイルを弄ってやってやりました。

※CSSを弄れない素人が弄っています。玄人の方は、自力で解析して弄ってください。
以下、本エントリは超初心者向けです。


まず、準備したソフトは以下の2つ。
  • TeraPad - テキストエディタ(好みのものを使ってください)
  • FE - Color Palette - カラーピッカー(こちらも好みのものを使ってください)

また、弄るべきファイルの場所はこちら(Windows7)
  • C:\Users\(ユーザー名)\AppData\Local\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.3_0(アプリのバージョン)\web\css\webkit.css


1.まずは、初期状態のwebkit.cssのバックアップを別の場所に保存しておきましょう。


2.カラーピッカーを用いて、変更したい箇所の色を抽出する。

紹介したカラーピッカーなら”画面の色”をクリックして、カーソルを合わせるだけ 


3.CSSをテキストエディターで開いて、ピックアップした色を検索して、好きな色に置き換えます。置き換えたら保存してタブをリロードしましょう。

TLの背景”2b2b2b”を”fbfbfb”に変更したところ


4.あとは2.3.を繰り返すだけです

注意点としては、
  1. 置き換える色が、他の箇所で使われていないか確認すること
    →これを怠ると、他の色と重なって何も見えなくなってしまいます。また、関係ないところまで変更してしまった場合、元に戻すのも面倒になります
  2. 変更した場合は、どこかにメモをとりながら進めていきましょう(例:TL背景:2b2b2b→fbfbfb)
    →アップデートされたあと、もう一度試行錯誤しながら進めなくても、自分オリジナルの変更手順書を作ることが出来ます
  3. ”検索して置換”機能を利用して変更すると思いますが、基本的に”全て置換”→”保存”→”確認”とすればOKです。予期しない場所まで変わった場合は、一度元に戻してから、1箇所ずつ変更してみましょう

少しずつ変えて、色々クリックして確認しながら作業していけば大きな失敗はしないと思います。


ちなみに、私が変更した箇所・内容は以下の通りです。
  • TL背景            #2b2b2b→#fbfbfb
  • 最背面           #333333→#ededed(1番最初のだけ)
  • TL最上部太線       #363636→#c0c0c0
  • TL左右枠線         #212121→#A1A1A1
  • TLスクロールバー左枠 #272727→#DFDFDF
  • TLスクロールバー    #404040→#B1B1B1
  • TLスクロールバー下部 #262626→#D1D1D1
  • Tweet仕切り        #383838→#C4C4C4
  • TL最上部細線      #303030→#bababa
  • TL標題           #b2b2b2→#404040
  • tweet文字          #dedede→#4f4f4f
  • TLクリック時背景         #323232→#F0F0F0
  • @名/時間         #999999→#505050
  • TLクリック字標題     #8dc7f1→#ff8800
  • リンク/#タグ        #87c2ed→#ff7000
  • その他の調整1      #eeeeee→#464646
  • その他の調整2      #2f2f2f→#e0e0e0(2つ目だけ)

こんな感じです

全体的に白を基調に、文字は黒、リンクやカラーの部分はオレンジにしています。



本当はCSSが読めればいいんですけどね(; ̄ー ̄A 面倒ですが、こういう手順でやってみました。
CSSはスタイルシートなので、その気になれば、フォントサイズやカラムのサイズも変更できます。

私と同じように読めない方の参考になれば幸いです♪


 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates
Related Posts Plugin for WordPress, Blogger...