Twitter クライアント TweetDeck の Chrome 版をちょこっとカスタマイズする方法を紹介します。
「そのうちオプション設定で対応するとは思いますが、現状不便なので」と1年以上前に書いてましたが、全く対応されないので、現時点での(2012-04-28)最新版に対応。
更新履歴
2012-04-29 最新版(1.4)に対応しました
インストール
いちおう、インストールしてない人のために。ここからインストールできます。当然、Chrome必須
https://chrome.google.com/webstore/detail/hbdpomandigafcibbmofojjchbcdagbl
カスタマイズするファイルの置き場所
単純に webkit.css ファイルをいじくるだけですが、OSによって場所が違います。
赤字はバージョンで変化すると思います。
Ubuntu
$HOME/.config/google-chrome/Default/Extensions/hbdpomandigafcibbmofojjchbcdagbl/1.4_0/web/css/webkit.css
Windows XP
C:\Documents and Settings\アカウント名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.4_0\web\css\webkit.css
Windows 7
C:\Users\アカウント名\AppData\Local\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.4_0\web\css\webkit.css
Mac OS
home/ライブラリ/ApplicationSupport/Google/Chrome/Default/Extensions/hbdpomandigafcibbmofojjchbcdagbl/1.4_0/web/css/webkit.css
※ ぐぐってこの辺だろう、と推測。違ったらごめんなさい。MBA欲しいお(´・ω・`)
カスタマイズ色々
OS毎のファイル置き場を見るとCSSファイルがいくつかあるので、指定ファイルを変更してください。不安な人は、バックアップとってから変更しましょう。(最悪、インストールしなおせば戻ります)
※ 変更後は、ブラウザの「更新」でデザインが反映されます。
フォントサイズ変更
ブラウザの拡大、縮小で変更できますが、全要素が伸縮するのでデザイン的にいけてません。
検索して最初にでてくる font-size:100% を 好きなサイズに変更 例:14px
カラムの横幅変更
デフォルトは 328px で固定されてます。
width:328px で検索してヒットした部分を変更します。合計5箇所 例:380px
画面全体の背景色変更
background:#333 で検索してヒットした部分の色を変更 例: #fff
メッセージの背景色変更
background-color:#2b2b2b で検索してヒットした部分の色を変更 例: #f4f4f4
メッセージ色変更
先頭から color:#dedede で検索してヒットした部分の色を変更 例: #333
リンクの色を変更(URLなど)
メッセージ中のURLの文字色です。
先頭から color:#87c2ed で検索してヒットした部分の色を変更 例: color:#066442
リンクの色を変更(アカウント名など)
アカウント名(Twitterユーザ)のリンクです。
先頭から color:#dedede で検索してヒットした部分の色を変更 例:color:#0071bc
各カラムのヘッダ部分
先頭から column-header で検索してヒットした箇所の { のあとに背景色を追記
例:.column-header{background-color:#ccc;
なんということでしょう
感動のリフォーム(設定例)公開です。
カスタマイズ例いろいろ
上のサンプルだと白っぽくしただけつまらないのでカスタマイズ例を。
Pinterest風
Google+風 ちょっと無理があるか・・・
Twitter 公式風
関連記事








初めまして。
とても参考になりました。
ありがとうございます。
ちょっとお尋ねしたいのですが、カラムの幅を狭くした場合に、リプライ等の入力窓と、リプライ対象のツイートや会話の履歴が表示される窓が重なってしまうのを回避するにはどの部分をいじればいいのかお分かりになりますでしょうか。
もしご存知でしたらお教えください。
よろしくお願いします。
元のTweet枠が入力欄にかぶさってしまう感じですかね?
だとすれば、layout.css の以下の部分から
.detailBody{position:absolute;top:110px;
110px を 大きくしてみてください。
ご返信ありがとうございます。
早速調整してみました。
1920x1200のディスプレイで、カラム幅を240pxにすると、お教えいただいたパラメータは140pxにするとちょうどいいようです。
これで狭い隙間から送信ボタンを押さずにすみます^^
ありがとうございました。
[...] てもぐ [...]