【ColorDeck for Tweetdeck】背景色を自由に変更する拡張機能

Chrome拡張機能,FireFoxアドオン

ColorDeck for Tweetdeckのアイコン

この記事では、TweetDeck(ツイートデック)の背景色、カラム、文字色などを自由にカスタマイズできるChrome拡張機能「ColorDeck for Tweetdeck」について書きます。

【ColorDeck for Tweetdeck】背景色を自由に変更する拡張機能

TweetDeck(ツイートデック)のレイアウトを自由に変更できるChrome拡張機能です。

背景色、文字色、サイドバーの色などを細かく指定できます。色変更だけでなく、カラムを複数行に分けて表示するグリッド機能、角丸具合の設定、スクロールバーの横幅サイズなどのオプションも用意されています。

本拡張機能をインストールして、設定ページで色変更することで反映されます。一時的に元のスタイルに戻す機能も用意されています。色は、カラーコードで指定できます。

ツイートデックの色を変更したい方、ぜひ試してみてください。

本記事は、Chrome拡張機能の紹介ですが、Firefoxアドオンもありました。

提供元:ColorDeck
記事執筆時のバージョン:1.3.10(2021年9月6日)

ダウンロード方法

Chromeウェブストアからインストールできます。

Firefoxの場合

Firefoxをご利用の方は、以下のリンクからインストールできます。ただし、最終更新日がChrome拡張機能は2021年9月に対して、Firefox版は2017年8月でした。かなり古いので、現在でも正常に動作するかは不明です。僕は試していません。

「Chromeに追加」をクリックします。

ColorDeck for Tweetdeckのインストール - Chrome ウェブストア

インストールしたら、自動的に拡張機能が有効になります。導入した状態でツイートデックを開くと、「COLOR DECK」のアイコンが一瞬表示されてツイートデックが開きます。ちゃんと本拡張機能が認識されてるよ~ということです。

使い方

拡張機能をインストールすると、自動的に設定ページが開きます。

開かない場合or2回目以降は、ColorDeck for Tweetdeckのアイコン拡張機能ボタンをクリックすることで設定ページが開けます。

ColorDeck for Tweetdeckの拡張機能ボタンをクリック

新しいページで本拡張機能の設定ページが開きます。左側にメニュー項目があります。

ColorDeck for Tweetdeckの設定画面

配色の変更(Colors)

上部にある「Style enhancement(スタイルの有効化)」をオンにします。逆に、色設定は保持したまま、一時的にデフォルトのデザインに戻したい時はオフにします。

Style enhancement(スタイルの有効化)をオンにする

オンにすると、画面下半分にプレビューが表示されます。ここを確認しながら配色を変更します。

オンにすると、ツイートデックのプレビュー画面が表示される
Principal colorメインカラー(左側項目、カラムタイトルの背景など)
Backgroundカラム以外の背景色
Titlesタイトル
Linksリンク

以下のようになっています。

Principal color、Background、Titles、Linksの場所

より高度な色設定をしたい場合は、左上の「Basic」を「Advanced」にしましょう。

より詳細に色を変更したい場合は、BasicをAdvancedにする

「Advanced」にすることで、タイムラインの背景色、通知の色も変更できるようになります。

色変更は、HTMLカラーコードを直接入力するか、ポップアップ内で好きな色を指定できます。

Column title 色設定

色を変更して反映させたい場合は、必ずSave changesをクリックします。クリックしないと反映されません。クリックすると、ツイートデックのページに反映されます。既に開いている場合でもリロードすることなく、自動的に変わります。

試しに、当サイト風にしてみた画像を貼っておきます。

TweetDeck ナポリタン寿司のPC日記風(ライト)

個人的にはダークモードの方が好きです。

TweetDeck ナポリタン寿司のPC日記風(ダーク)

他にもいくつか適当に作成してみた配色のスクリーンショットを貼っておきます。

砂漠とサボテンをイメージしたテーマ

TweetDeck 砂漠とサボテンをイメージしたテーマ

深海をイメージしたテーマ

TweetDeck 深海をイメージしたテーマ

緑をイメージしたテーマ

TweetDeck 緑をイメージしたテーマ

桜をイメージしたテーマ

TweetDeck 桜をイメージしたテーマ

好きなように変更できます。

注意点

トレンド、ツイート以外のタイムラインの背景色の変更はできませんでした。(僕が設定項目見逃しているだけかもしれませんが)

本拡張機能は、トレンド、空いている背景色などは変更されない

こちらも色変更したい場合は、ウェブサイトにCSSを適用できるChrome拡張機能「Stylebot」を使うことでできます。詳しくはこちらに飛んでみてください。

レイアウトの変更(Layout)

レイアウトの変更(Layout)

色以外のレイアウトの部分を設定できます。

Columns
Number of columns (vertically)列数
Wrap columnsカラムの折り返しのオンオフ切り替え
Columns Width size (px)列幅のサイズ
Space between columns (px)列間のスペース
Border radius (px)角丸具合
Column title
New tweets notification新着ツイート通知
Iconsアイコン
Shadow
Permanent search input常時検索入力状態にする
Tweets
Rounded avatars丸みを帯びたアバター画像
“Replying to"リプライツイートのスタイル
Scrollbars
Scrollbar Width size (px)スクロールバーの横幅
Border radius (px)スクロールバーの角丸具合
Profile
Styleプロフィールのスタイル

それぞれの項目の横にあるバツをクリックすることで、デフォルトの設定に戻せます。色々変更してやっぱり元に戻したい時に活用してみましょう。

Number of columns(列数の変更)

カラムを複数行に分けて分割できます。デフォルトは1です。

例えば、2にした場合は、以下のようになります。上下にカラムが並びます。大量のカラムを表示している方は、2列くらいにした方が見やすいかもしれません。

Number of columns(列数の変更) ツイートデックを2列表示

Columns Width size(カラムの横幅)

カラムの横幅を調整できます。デフォルトでは350pxになっています。

例えば、200pxと500pxにした比較画像を貼っておきます。1ページに多くのカラムを表示させたい場合は数字を小さくしましょう。

Columns Width size(カラムの横幅) 200pxと500pxの比較画像

僕は、キーに別の機能を割り当てるソフト「AutoHotkey」を使って、マウスのサイドボタン+ホイール回転で横スクロールできるようにしているので、1ページに多くのカラムを表示させたいといった欲がありません。よって、デフォルトの350pxのままです。

5ボタンマウスを持っている方は、サイドボタン+ホイール回転した時に、横スクロールできるようにしておくと、色々な場面で便利だと思います。

Border radius(カラムの角丸具合)

角丸具合を調整できます。デフォルトは0=カクカクです。

20にした時の比較画像を貼っておきます。

Border radius(カラムの角丸具合) デフォルトと角丸20pxの比較画像

Icons(カラム横のアイコン表示)

カラムの横のアイコンを表示するかどうかオンオフできます。

Icons(カラム横のアイコン表示) アイコンありとなしの比較画像

オフにすると見栄えがスッキリしますが、アイコンクリックでトップに戻る機能が使えなくなるので注意です。

Shadow(カラムタイトル下の影)

カラムタイトルの下に影をつけるかつけないかの設定です。正直あんまり違いは感じられませんでした。配色によっては結構見栄えが変わるかもしれません。

Shadow(カラムタイトル下の影) 影なしと影ありの比較画像

“Replying to"(リプライのスタイル)

返信(リプライ)のデザインを変更できます。デフォルトではスタイル1になっています。

"Replying to"(リプライのスタイル) スタイル1とスタイル2の比較画像

スタイル2にすると、リプライのユーザー名の横から本文が表示されます。少しでもシュッとしたい場合は、スタイル2にするといいかなぁと思います。個人的には、少しごちゃごちゃすると思ったので、スタイル1が好きです。

Scrollbar Width size(スクロールバーの横幅)

スクロールバーの横幅を調整できます。デフォルトでは5pxになっています。0にすると、綺麗さっぱり消えます。スッキリさせたい方は0、または1pxがおすすめです。

Scrollbar Width size(スクロールバーの横幅)

Profile Style

プロフィールのスタイルを変更できます。ただし、僕の環境だとスタイル2はデザイン崩れが起こって見にくくなりました。このままスタイル1がおすすめです。

Profile Style

アニメーション(Animations)

アニメーションを設定できます。

アニメーション(Animations)

音(Sounds)

通知音を変更できます。14種類ほど用意されています。

音(Sounds)

カラムで音を再生するように設定していないと、再生されないので注意です。通知してほしいカラムの設定をクリック→Preferences→Enable soundにチェックします。

TweetDeck NOTIFICATIONS Enable sound

Settings(設定)

その他の設定ができます。

Settings(設定)
Disable the “Show more tweets" feature「ツイートをもっと表示する」機能を無効にする
Disable “Trends" column「トレンド」欄を無効にする
Disable fade effectフェード効果を無効にする
Gif AutoplayGIFの自動再生

【おまけ】トレンド一覧の色も変更

本拡張機能だけでは調整できないので、別の拡張機能を利用します。

ウェブサイトに自分で書いたCSSを適用できるChrome拡張機能「Stylebot」を使います。極論、こっちで全部色変更できるんですが、初心者だと設定するだけでも大変です。

既にインストールしている方は、スタイルシートに書き込むだけです。

インストールしていない場合は、下記記事を参考にしてみてください。ツイートデックだけでなく、他のウェブサイトを自分好みのデザインに変更できるChrome拡張機能です。

インストールできたら、以下のCSSを書き込みます。

/*トレンド、ツイート以外の背景色変更*/
html.dark .bg-color-twitter-midnight-dark-gray,
html.dark .column-panel {
  background-color: #15202b !important; /*ここを好きな色に変更する*/
}

/*トレンド一覧の境界線*/
html.dark .border-divider {
  border-bottom: 1px solid #14171a !important; /*ここを好きな色に変更する*/
}

「#15202b」と「#14171a」の部分に、それぞれ好きな色を指定します。トレンドの背景色が変更されます。

TweetDeckのトレンドの背景色をCSSで変更した画像

感想

以上、TweetDeckを好きな配色、レイアウトにできるChrome拡張機能「ColorDeck for Tweetdeck」についてでした。

自分の好きな配色にできる点、2列表示にできる点が特徴かなと思いました。配色に迷ったら、「Color Hunt」などで探してみるといい配色が見つかるかもしれません。

Posted by ナポリタン寿司