【Twitter UI Customizer】各種ボタンの色を変更できるアドオン

2022年12月23日Twitter関連

「Twitter UI Customizer」のアイコン

この記事では、Twitter上(PC)の各種ボタンの背景色、枠線、文字色を好きな色に変更できるFirefoxアドオン「Twitter UI Customizer(ツイッター・ユーアイ・カスタマイザー)」について書きます。

色の変更だけでなく、カスタムCSSの適用、「ツイート下にブックマークに追加」ボタンを配置して、ワンクリックで押せるようにすることも可能です。

「Twitter UI Customizer」のスクリーンショット1

Twitterの各種ボタンの色を変更するアドオンです。背景色、枠線、文字色の3つを個別に変更できます。透明化も用意されています。変更できる箇所は、主に以下のとおりです。

  • 未送信ツイートの編集ボタン
  • フォローしていない人のフォローボタン
  • フォローしている人のフォローボタン
  • フォロー解除ボタン
  • プロフィール編集ボタン
  • プロフィールの保存ボタン
  • 最終決定ボタン

「色の設定」ダイアログが表示されるので、初心者でも直観的な操作で、色を変更できます。テーマに左右されずに、自由に調整できます。

色の変更だけでなく、ツイート下に各種ボタンを配置する機能も搭載しています。通常、ツイートの下には、返信、リツイート、いいね、共有の4つが表示されています。

本アドオンを導入することで、これらのボタンに加えて、「ブックマークに保存」、「ツイートのリンクをコピー」ボタンを追加できます。

「Twitter UI Customizer」導入後のツイート下画像

通常、ブックマークするには、共有ボタン→「ブックマーク」といったように、最低でも2クリック必要で、ちょっと手間でした。本アドオンがあれば、ワンクリックで可能です。

それぞれのボタンは、好きなように並び替えられます。不要なボタンを非表示にすることも可能です。2022年12月頃から実装された、他人のツイートの表示回数にも対応しています。サクっと以前の状態に戻せます。

同じく12月に廃止された「Twitter for iPhone」や「Twitter for Android」といった「クライアント情報」も復活できます。(この機能は、今後廃止する可能性あり)

左側サイドバー(プロフィールやTwitter Blueなど)も好きなように非表示・並び替えられます。

タイムライン上のおすすめユーザーを非表示にする機能や、カスタムCSS機能も搭載しています。CSSを書き込むことで、Twitterの外観を変えることができます。

「Twitterのボタンの色を、テーマに関係なく変えたい!」、「もっと素早くツイートをブックマークしたい!」という方におすすめです。

Firefoxアドオンだけで、Chrome拡張機能はありません。ただし、GitHubにあるファイルを手動でダウンロードすることで、Chromeにも導入できます。

リリース元:kaonasi_biwa(Twitterはこちら
記事執筆時のバージョン:2.7.3(2023年1月22日)

インストール方法

Firefoxの場合

Firefoxの場合は、以下のリンクから入手できます。

Firefoxへ追加をクリックします。

「Twitter UI Customizer」のインストール手順画像1

追加→「OK」をクリックします。

「Twitter UI Customizer」のインストール手順画像2

ボタンはそんなに利用しないので、右クリック→「オーバーフローメニューにピン留め」で非表示にしておくと、スッキリしていいかもしれません。

Chromeの場合

Chromeをご利用の方は、ちょっとだけ手間が発生します。下記サイトにアクセスします。

GitHubページにアクセスできたら、最新バージョンの「Assets」を展開して、「Twitter_UI_Customizer_Chromium.zip」をクリックします。

「Twitter UI Customizer」をChrome(Chromium)ブラウザに導入する手順画像2

上記画像は、「2.5.2」になっていますが、記事執筆時の最新バージョンだったためです。ご自身が見た時の最新バージョンを選んでください。「Twitter_UI_Customizer_Firefox.xpi」ではないので注意です。

ダウンロードできたら、圧縮ファイルを解凍します。解凍ソフトは各自で用意します。僕は、「CubeICE」を利用しています。

「Twitter UI Customizer」をChrome(Chromium)ブラウザに導入する手順画像3

圧縮ファイルのままでも追加できるのですが、僕の環境だと、ブラウザを再起動するたびに消えてしまいました。解凍して追加すると、うまく維持してくれました。

ダウンロードできたら、Chromeのアドレスバーに以下のパスを貼りつけます。

chrome://extensions/

Chrome拡張機能の管理ページが開くので、右上の「デベロッパーモード」をオンにします。

「Twitter UI Customizer」をChrome(Chromium)ブラウザに導入する手順画像4

オンにした状態で、先ほどダウンロードして解凍した「Twitter UI Customizer」フォルダーを、拡張機能の管理ページに、ドラッグ&ドロップします。これで追加されます。

「Twitter UI Customizer」をChrome(Chromium)ブラウザに導入する手順画像5
手動アップデートする必要がある

本拡張機能は、Chromeウェブストアにリリースされていないため、手動でのアップデートが必要です。デフォルトでは、アップデートがある場合、通知されます。その通知をクリックすると、GitHubページを開いてくれます。

詳しくは、下記記事を参考にしてみてください。

設定ページへのアクセス方法

本拡張機能は、設定ページへのアクセス方法が、沢山用意されています。好きな方法でOKです。個人的には、素早くアクセスできる「もっと見る」→「表示」がいいかなと思います。

詳しくは、下記記事を参考にしてみてください。

使い方

本アドオンをインストールした状態だと、「/settings/display」ページの背景画像の下に、新しく「Twitter UI Customizer」の設定項目が追加されています。日本語なので、理解しやすいです。

「Twitter UI Customizer」の設定ページを開く手順画像3

未送信ツイートの編集ボタン

変更したい項目の色をクリックします。Windowsの「色の設定」ダイアログが表示されます。この中で好きな色を決めます。設定できたら、「OK」をクリックします。

Windowsの「色の設定」ダイアログ画像

試しに、「未送信ツイートの編集ボタン」の背景色を黄色にしてみました。

「未送信ツイートの編集ボタン」の背景色を黄色にした画像1

これで指定した場所(未送信ツイートの編集ボタン)の色が変わります。以前は、設定の反映に再読み込みが必要でしたが、2.5.1以降、不要になりました。そのままホームなどに戻ると、反映されます。

背景色、枠線、文字色を自由に調整できます。

「未送信ツイートの編集ボタン」の背景色を黄色にした画像2(ダークテーマ)
ダークだけでなく、どのテーマでも利用可能

デフォルト(ライトテーマ)、ダークブルー、ブラック、どのテーマでも動作します。

「未送信ツイートの編集ボタン」の背景色を黄色にした画像3(ライトテーマ)

フォローしていない人のフォローボタン

フォローしていない人のフォローボタンです。

「Twitter UI Customizer」のスクリーンショット3

透明にしたい場合は、各項目の隣にある「透明色にする」にチェックします。これで、設定している色に関係なく、透過されます。

枠線と背景色を透過してみました。文字だけになります。

「Twitter UI Customizer」のスクリーンショット4

フォローしている人のフォローボタン

「フォロー中」のボタンです。

「Twitter UI Customizer」のスクリーンショット5

デフォルトの青が眩しいという場合は、本アドオンを使って、暗めの青にするといいかもしれません。

合わせて読みたい

フォロー解除ボタン

フォロー解除ボタンです。「Twitter UI Customizer」のデフォルトでは、赤になっていました。

「Twitter UI Customizer」のスクリーンショット7

プロフィール編集ボタン

プロフィールページの各種ボタンです。

ログインしているアカウントだと、「プロフィールを編集」、それ以外の他人のアカウントだと、ミートボールメニュー(三点ボタン)、DMボタンが該当します。

「Twitter UI Customizer」のスクリーンショット8

プロフィールの保存ボタン

プロフィール編集ページの右上にある「保存」ボタンです。

「Twitter UI Customizer」のスクリーンショット9

最終決定ボタン

「ツイートを保存しますか?」ダイアログなどのボタンです。

「Twitter UI Customizer」のスクリーンショット10

ツイート下ボタンの並び替え

「ツイート下ボタンの並び替え」で、ツイート下にボタンを追加・並び替えられます。

「Twitter UI Customizer」のスクリーンショット11

不要なボタンは、選択→「非表示にする」をクリックします。右側の非表示欄に追加されます。

「Twitter UI Customizer」のスクリーンショット12

並び替えたい場合は、選択→「上へ」、あるいは「下へ」をクリックします。

「Twitter UI Customizer」のスクリーンショット13(GIF)

個人的には、「ブックマーク」ボタンが便利です。この手の拡張機能を以前探したのですが、全く見つからなかったので嬉しいです。

「Twitter UI Customizer」のスクリーンショット14

2022年12月から追加されたツイートの表示回数を非表示にしたい場合、「ツイートアナリティクスを表示」を非表示にします。

詳しくは、下記記事を参考にしてみてください。

ツイート下ボタンにスクロールバーを表示

チェックすると、特定のウィンドウサイズ以下になった時、自動的にスクロールバーが出現します。通常サイズの時は表示されません。サイドバー(ウェブパネル)などで役立ちます。本拡張機能は、ウェブパネル内でも動作します。

「ツイート下ボタンにスクロールバーを表示」にチェックした画像

サイドバーの並び替え

左側サイドバーの項目を好きなように並び替え・非表示にできます。2022年12月頃から表示されるようになった「Twitter Blue」も消せます。

「Twitter UI Customizer」の「サイドバーの並び替え」画像1

不要な項目を「非表示にする」をクリックして、右側に移動させます。

「Twitter UI Customizer」の「サイドバーの並び替え」画像2

これで、非表示欄に登録した項目が、左側サイドバーから消えます。

「Twitter UI Customizer」で、左側サイドバーの項目を非表示にした画像

「通知やメッセージが目に入ると疲れる!」という方は、思い切って消すといいかもしれませんね。時間をつぶしてしまいがちな「話題を検索(トレンド)」を見えないようにするとかね…。

タイムライン上のおすすめユーザー

非表示設定の「タイムライン上のおすすめユーザー」にチェックすると、タイムラインの「おすすめユーザー」欄を削除できます。

「タイムライン上のおすすめユーザー」を非表示にする前と後の比較画像

クライアント情報の復活

「クライアント情報を表示」にチェックすると、以前の「Twitter for Android」や「Twitter for iPhone」といったツイートした端末表示機能が復活します。自分だけでなく、他人のツイート下にも表示されます。

「クライアント情報を表示」にチェックした画像

ただし、現時点では、まだ使えるというだけで、今後廃止される可能性があります。

カスタムCSS

TwitterにCSSを適用できます。CSSは、サイトのデザインを変えられる機能です。

全く理解していない方は、無縁の機能だと思います。ネット上に色々コードがあるので、書けなくてもコピペすれば利用できます。当サイトの検索で、「Twitter CSS」とググってみるといいかもしれません。

試しに、タイムラインの横幅を広げるCSSを紹介します。

/*タイムラインの横幅*/
.r-1ye8kvj {
    max-width: 900px;
}

/*メッセージ(Dm)のセクション詳細横幅*/
section[aria-label="セクションの詳細"] {
    max-width: 600px !important;
}

/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
    width: 60%;
}

書き込んだら、「保存」をクリックします。

「Twitter UI Customizer」のカスタムCSSにコードを書き込んだ画面

これで、Twitterのタイムラインの横幅が広くなります。

Twitterのタイムラインの横幅をCSSで広げる前と後の比較画像

感想

以上、Twitterの各種ボタンの色変更、及びツイート下ボタン、左側サイドバーの項目を好きなように並び替え・非表示・追加できるFirefoxアドオン「Twitter UI Customizer(ツイッター・ユーアイ・カスタマイザー)」についてでした。

本アドオンの開発者さんは、Firefoxベースのブラウザ「Floorp(フロープ)」の開発にも携わっているすごいお方です。

2022年12月23日Twitter関連