【TweetDeck】右クリックメニューの一部を消す方法。CSSを使おう!

Stylebot&Stylus

TweetDeckのアイコン

この記事では、TweetDeckの右クリックメニューの任意の一部を、非表示にする方法について書きます。

CSSを使うことで、好きな項目を消せます。

【TweetDeck】右クリックメニューの一部を消す方法。CSSを使おう!

TweetDeckの右クリックメニュー(正確には、ツイート下の三点ボタンをクリックしたときのメニュー)は、CSSを使うことで、好きなように非表示にできます。

例えば、「Embed this Tweet」、「Share via Email」、「Send a Direct Message」の項目を非表示にする…といったことができます。使わない項目を消すことで、メニューがスッキリして、より快適なTweetDeckライフを送れます。

僕なんか、基本的に「Mute」しか利用しません。それなのに、毎回ずらっと表示されて邪魔です。消した項目は、いつでも元に戻せます。

CSSを使います。ウェブサイトにCSSを適用できる拡張機能(StylebotStylus)を使うか、TweetDeckを拡張する拡張機能「Better TweetDeck」を利用します。

「TweetDeckのツイート下にあるミートボールメニュー内項目が多すぎて邪魔すぎる!カスタマイズしたい!」という方、ぜひ試してみてください。

TweetDeckとは、Twitterの公式クライアント・アプリケーション(ウェブサイト)の1つです。カラムと呼ばれる「列」ごとでタイムラインを表示するレイアウトが特徴です。PCという長方形のディスプレイに適したTwitterアプリといった感じです。

本記事の内容は、TweetDeckをPWA(アプリケーション化)にしていても利用できます。僕は、Vivaldiブラウザを使ってPWAにしています。

三点ボタンメニューの項目非表示CSS

書き込むCSSは、以下のようになっています。全てを使うのではなく、自分が非表示にしたい項目だけを選択してみましょう。下記のCSS全部を書き込むと、全部のメニューが非表示になります。

/*TweetDeckの右クリックメニュー*/
a[data-action="embed"], /*Embed this Tweet*/
a[data-action="reference-to"], /*Copy link to this Tweet*/
a[data-action="message-to"], /*Share via Direct Message*/
a[data-action="email"], /*Share via Email*/
a[data-action="mention"], /*Tweet to @〇〇〇*/
a[data-action="followOrUnfollow"], /*Follow from accounts*/
a[data-action="favoriteOrUnfavorite"], /* Like from accounts… */
a[data-action="message"], /*Send a Direct Message*/
a[data-action="lists"], /*Add or remove from Lists…*/
a[data-action="customtimelines"], /*Add to Collection…*/
a[data-action="search-for-quoted"], /*See who quoted this Tweet*/
a[data-action="destroy"], /*Delete*/
a[data-btd-action="edit-tweet"], /*Re-draft*/
a[data-action="flag-media"], /*Flag media*/
a[data-action="mute"], /*Mute @〇〇〇*/
a[data-btd-filter="BTD_is_retweet_from"], /*Mute Retweets from User*/
a[data-btd-filter="BTD_mute_quotes"], /*Mute Quotes from User*/
a[data-action="muteConversation"], /*Mute this conversation*/
a[data-action="block"], /*Block @〇〇〇*/
a[data-action="report-tweet"], /*Report Tweet*/
a[data-action="undo-retweet"], /*Undo Retweet*/
a[data-btd-filter="BTD_specific_tweet"], /*Hide this tweet*/
a[data-btd-action="mute-source"] /*Mute "Twitter for 〇〇〇"*/ {
  display: none !important;
}

各行に「/*〇〇〇*/」といったようにコメントを書いています。ここのコメントに書かれている項目と連動しているので、例えば、「a[data-action="embed"], Embed this Tweet(このツイートを埋め込む)」の行を書き込むと、その名の通り「Embed this Tweet」の項目が消えます。

注意点ですが、最後の「display: none !important;」は必要なコードです。こちらが、「非表示」という意味になっています。

途中途中にある「data-btd-filter」の行は、Better TweetDeckを導入している方のみに表示される項目です。導入していない方は、そもそも表示されないと思うので、わざわざ書き込む必要はありません。

例えば、「Embed this Tweet」、「Share via Email」、「Report Tweet」の3つだけを非表示にしたい場合は、以下のようになります。最後の行に関しては、「,」記号を削除して、「{」記号を挿入するのがルールです。詳しい意味は省略します。そういうものなんだ程度の認識でOKです。

/*TweetDeckの右クリックメニュー*/
a[data-action="embed"], /*Embed this Tweet*/
a[data-action="email"], /*Share via Email*/
a[data-action="report-tweet"] /*Report Tweet*/{
  display: none !important;
}

僕は、あんまりTweetDeckヘビーユーザーではないので、ほとんどの機能を使っていません。よって、ほぼ全てのメニュー項目を非表示にしています。具体的には、以下のコードになっています。

/*TweetDeckの右クリックメニュー*/
a[data-action="embed"], /*Embed this Tweet*/
a[data-action="message-to"], /*Share via Direct Message*/
a[data-action="email"], /*Share via Email*/
a[data-action="mention"], /*Tweet to @〇〇〇*/
a[data-action="followOrUnfollow"], /*Follow from accounts*/
a[data-action="favoriteOrUnfavorite"], /*Like from accounts*/
a[data-action="message"], /*Send a Direct Message*/
a[data-action="lists"], /*Add or remove from Lists…*/
a[data-action="customtimelines"], /*Add to Collection…*/
a[data-action="search-for-quoted"], /*See who quoted this Tweet*/
a[data-btd-action="edit-tweet"], /*Re-draft*/
a[data-btd-filter="BTD_is_retweet_from"], /*Mute Retweets from User*/
a[data-btd-filter="BTD_mute_quotes"], /*Mute Quotes from User*/
a[data-action="muteConversation"], /*Mute this conversation*/
a[data-action="report-tweet"], /*Report Tweet*/
a[data-action="undo-retweet"], /*Undo Retweet*/
a[data-btd-filter="BTD_specific_tweet"], /*Hide this tweet*/
a[data-btd-action="mute-source"] /*Mute "Twitter for 〇〇〇"*/ {
  display: none !important;
}

上記CSSを適用すると、「Copy link to this Tweet(このツイートへのリンクをコピーする)」、「Mute(ミュート)」、「Block(ブロック)」の3つ以外の項目全てが消えます。

「Copy link to this Tweet」、「Mute」、「Block」の3つ以外の項目全てを非表示にした画像

僕は、2022年4月時点では、この3つしか使っていません。かなりスッキリするのでおすすめです。今後変わる可能性はあります。

続いて、具体的な書き方を紹介します。ご自身が使っている拡張機能によって書き込み方が異なってきます。本記事では、代表的な2つの方法を紹介します。

Stylebotを使っている場合(Stylusでも同じ)

Stylebotは、ウェブサイトにCSSを適用できるChrome拡張機能Firefoxアドオンです。

本記事では、詳しい使い方は紹介しません。ウェブサイト(Twitterや、Google検索)のデザインを自分でカスタマイズできる拡張機能です。詳しい使い方・インストール方法を知りたい場合は、以下の記事を参考にしてみてください。

インストールできたら、「TweetDeck」のサイトにアクセスします。

ブラウザ右上のStylebotのアイコンアイコン→「Stylebotを開く」をクリックします。既にTweetDeck上でCSSを作成している場合は、上に「tweetdeck.twitter.com」と表示されていると思うので、そちらをクリックします。

Stylebot→Stylebotを開く

スタイルシートが表示されるので、上記で紹介したCSSを書き込んでいきます。

Stylebotに「ミートボールメニューの項目の一部を非表示にする」コードを書き込んだ画面

書き込めたら、Stylebotの右上にある「×」をクリックします。ツイート下にある三点ボタンをクリックします。一部項目が非表示になり、すっきりした状態のメニューが表示されます。

TweetDeckの全ての右クリックメニュー項目を非表示にした画像

Better TweetDeckを使っている場合

Better TweetDeckは、TweetDeckの機能を拡張する拡張機能です。Chrome拡張機能Firefoxアドオンが用意されています。沢山の機能があり、TweetDeckをよりヘビーに使いたいなら、ぜひとも導入しておきたいツールです。

詳しい解説は省略します。気になる方は、「Better TweetDeckとは」、「Better TweetDeck 使い方」といったようにググってみましょう。

インストールできたら、「TweetDeck」にアクセスします。

左のメニュー項目の中に「BTD Settings」という部分が新しく追加されているのでクリックします。

TweetDeck BTD Settings

設定ページが開きます。左側の「カスタムCSS」をクリックします。スタイルシートが表示されるので、上記で紹介したCSSを書き込みます。

Better TweetDeck カスタムCSS

書き込めたら、忘れずに一番下の「保存」をクリックします。

カスタムCSSに書き込んだら、保存をクリック

TweetDeckをリロードします。三点ボタンのメニューの書き込んだ項目が非表示になります。

ミートボールメニュー内の一部項目を非表示にした画像

感想

以上、TweetDeckの三点ボタンをクリックした時のメニュー項目を好きなようにカスタマイズする方法についてでした。

ここの項目がスッキリすることで、より快適なTweetDeckライフが過ごせます。最高です。これで、また無駄な時間を過ごすことになります。

こちらの記事もおすすめ

ミートボールメニュー(三点ボタン)内の項目は、日本語化できます。

本記事で使わない項目を非表示にして、表示している項目を日本語化することで、より快適にTweetDeckライフが過ごせます。英語が苦手な方、ぜひ参考にしてみてください。

Posted by ナポリタン寿司