Chrome TweetDeck のデザイン変更


本家がデザイン変更(2種類ですけど)に対応したので御役目終了。
現バージョンでもやろうと思えばできなくはないので参考に過去記事残しておきます。

Twitter クライアント TweetDeck の Chrome 版をちょこっとカスタマイズする方法を紹介します。
「そのうちオプション設定で対応するとは思いますが、現状不便なので」と1年以上前に書いてましたが、全く対応されないので、現時点での(2012-07-26)最新版に対応。

更新履歴

2012-09-15 最新版(1.6.0)に対応しました
2012-09-10 最新版(1.5.11_0)に対応しました
2012-09-05 最新版(1.5.9)に対応しました
2012-08-24 最新版(1.5.8)に対応しました
2012-08-17 最新版(1.5.7)に対応しました
2012-07-24 最新版(1.5.3)に対応しました
2012-04-29 最新版(1.4)に対応しました


インストール

いちおう、インストールしてない人のために。ここからインストールできます。当然、Chrome必須
https://chrome.google.com/webstore/detail/hbdpomandigafcibbmofojjchbcdagbl

カスタマイズするファイルの置き場所

単純に app.css ファイルをいじくるだけですが、OSによって場所が違います。
赤字はバージョンで変化すると思います。

Ubuntu

$HOME/.config/google-chrome/Default/Extensions/hbdpomandigafcibbmofojjchbcdagbl/1.6.0/web/css/app.css

Windows XP

C:\Documents and Settings\アカウント名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.6.0_0\web\css\app.css

Windows 7

C:\Users\アカウント名\AppData\Local\Google\Chrome\User Data\Default\Extensions\hbdpomandigafcibbmofojjchbcdagbl\1.6.0_0\web\css\app.css

Mac OS

home/ライブラリ/ApplicationSupport/Google/Chrome/Default/Extensions/hbdpomandigafcibbmofojjchbcdagbl/1.6.0_0/web/css/app.css

※ ぐぐってこの辺だろう、と推測。違ったらごめんなさい。MBA欲しいお(´・ω・`)

カスタマイズ色々

OS毎のファイル置き場を見るとCSSファイルがいくつかあるので、指定ファイルを変更してください。不安な人は、バックアップとってから変更しましょう。(最悪、インストールしなおせば戻ります)
※ 変更後は、ブラウザの「更新」でデザインが反映されます。

フォントサイズ変更
ブラウザの拡大、縮小で変更できますが、全要素が伸縮するのでデザイン的にいけてません。

検索して最初にでてくる font-size:100% を 好きなサイズに変更
例:14px

カラムの横幅変更
デフォルトは 330px で固定されてます。

330px で検索してヒットした部分を変更します。合計2箇所
例:380px

画面全体の背景色変更

background:#333 で検索してヒットした2つめの色を変更
例: #fff

Tweetの背景色変更

background-color:#292929 で検索して最初にヒットした色を変更
例: #f4f4f4

Tweetの下枠線

「1px solid #363636」で検索して最初にヒットした部分の色を変更
例: #ccc

Tweetの上枠線

「Tweetの下枠線」と同じ箇所に以下追記
例: border-top:1px solid #fff;

Tweetの文字色変更

先頭から color:#ddd で検索して最初にヒットした部分の色を変更
例: #333

リンクの色を変更(URLなど)
メッセージ中のURLの文字色です。

先頭から color:#87c2ed で検索してヒットした2つめの色を変更
例: color:#0086cc

リンクの色を変更(アカウント名など)
アカウント名(Twitterユーザ)のリンクです。

先頭から「.username{color:#ddd」で検索してヒットした部分の色を変更
例:color:#000

カラムのヘッダ部分

先頭から column-header で検索してヒットした箇所の { のあとに背景色を追記
例:.column-header{background-color:#ccc;

カラムのヘッダ下枠線

先頭から .column-options で検索してヒットした箇所の {} 内にある、background-color:#363636 を変更
例: background-color:#ccc

カラムの外枠

先頭から #242424 で検索してヒットした最初の部分を変更
例:#ccc

なんということでしょう

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

BEFORE (デフォルトの状態)

AFTER (設定例)

サンプルCSS

カスタマイズ例いろいろ

上のサンプルだと白っぽくしただけつまらないのでカスタマイズ例を。
2012-07-26 追記: 以下のカスタマイズ例は、version 1.4 でしか動かないので最新版では動作しないです。こんな風にもできますよ、ってことで残しときます。

Pinterest風


サンプルcss

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


サンプルcss

Twitter 公式風


サンプルcss

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

  1. くまくま より:

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

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

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

  2. ても より:

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

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

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

  3. くまくま より:

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

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

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

コメントを残す

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

Top