Chrome TweetDeck のデザイン変更


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;

なんということでしょう

感動のリフォーム(設定例)公開です。

BEFORE (デフォルトの状態)

AFTER (設定例)

カスタマイズ例いろいろ

上のサンプルだと白っぽくしただけつまらないのでカスタマイズ例を。

Pinterest風


サンプルcss

Google+風 ちょっと無理があるか・・・


サンプルcss

Twitter 公式風


サンプルcss

関連記事

  1. フォーム内容を記録・再利用する Chrome Extension を作ってみた
  2. スクリーンショット を Chrome -> Picnik -> WordPress へ自動Post
  3. 1年遅れの IE6 No More
  4. WordPressからTwitterへ自動でつぶやくためのまとめ
Tagged with:  

4 Responses to Chrome TweetDeck のデザイン変更

  1. くまくま より:

    初めまして。
    とても参考になりました。
    ありがとうございます。

    ちょっとお尋ねしたいのですが、カラムの幅を狭くした場合に、リプライ等の入力窓と、リプライ対象のツイートや会話の履歴が表示される窓が重なってしまうのを回避するにはどの部分をいじればいいのかお分かりになりますでしょうか。

    もしご存知でしたらお教えください。
    よろしくお願いします。

  2. ても より:

    元のTweet枠が入力欄にかぶさってしまう感じですかね?
    だとすれば、layout.css の以下の部分から

    .detailBody{position:absolute;top:110px;

    110px を 大きくしてみてください。

  3. くまくま より:

    ご返信ありがとうございます。
    早速調整してみました。

    1920x1200のディスプレイで、カラム幅を240pxにすると、お教えいただいたパラメータは140pxにするとちょうどいいようです。

    これで狭い隙間から送信ボタンを押さずにすみます^^
    ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>