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

2022年10月16日Twitter関連

「Twitter UI Customizer」のアイコン

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

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

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

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

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

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

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

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

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

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

それぞれのボタンは、好きなように並び替えられます。不要なボタンを非表示にすることも可能です。

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

「Twitterのボタンの色を、テーマに関係なく変えたい!」、「もっと素早くツイートをブックマークしたい!」という方におすすめです。色はデフォルトのままで、ツイート下のボタン機能だけ使うのもアリです。

Twitterページだけでなく、プレビュー版であれば、TweetDeckでも動作するようです。

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

提供元:kaonasi_biwa(Twitterはこちら
記事執筆時のバージョン:2.4.2(2022年10月26日)

インストール方法

Firefoxアドオンストアからダウンロードできます。

Chromeをご利用の方は、下記アコーディオンを展開してみてください。ちょっとだけ手間が発生しますが、利用できます。

本アドオンは、Firefoxアドオンのみの提供で、Chrome拡張機能はリリースされていません。ただし、ちょっと手間は発生しますが、Chromeでも利用できます。

下記サイトにアクセスします。

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

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

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

ダウンロードできたら、圧縮ファイルを解凍します。

「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

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

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

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

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

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

使い方

Twitter」にアクセスします。

左側サイドバーの「もっと見る」→「設定とプライバシー」をクリックします。

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

「アクセシビリティ、表示、言語」をクリック→「表示」をクリックします。

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

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

「Twitter UI Customizer」の設定ページを開く手順画像3
アドオンボタンからでもアクセスできる

右上のアドオンボタンをクリック→「Twitter UI Customizerの設定」をクリックすることでも開けます。

「Twitter UI Customizer」のポップアップメニュー画像

下記URLを直接アドレスバーにコピペしてもOKです。Twitterの表示設定ページを開けるのであれば、どの方法でも構いません。

https://twitter.com/settings/display

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

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

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

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

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

変更できたら、忘れずにページ下部にある「保存」をクリックします。保存しないと反映されません。

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

これで指定した場所(未送信ツイートの編集ボタン)の色が変わります。背景色、枠線、文字色を自由に調整できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

「Twitter UI Customizer」のスクリーンショット6
合わせて読みたい

フォロー解除ボタン

フォロー解除ボタンです。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

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

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

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

カスタム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で広げる前と後の比較画像

さらに、右下のメッセージ欄を非表示にするCSSも紹介します。

/*左下のメッセージ非表示*/
div[data-testid="DMDrawer"] {
    display: none !important;
}
Twitterの右下にある「メッセージ」欄を非表示にする前と後の比較画像

感想

以上、Twitterの各種ボタンの色変更、及びツイート下に追加でボタンを配置するアドオン「Twitter UI Customizer」についてでした。

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

Posted by ナポリタン寿司