【TweetDeck】右クリックの一部を消す方法。CSSを使おう！

2022年4月29日2022年12月1日Twitter

この記事では、「TweetDeck（ツイートデック）」の右クリックメニューにある一部項目を、非表示にする方法を書きます。

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

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

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

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

CSSを利用します。ウェブサイトにCSSを適用できる拡張機能（「Stylebot」や「Stylus」）を使うか、「TweetDeck」を拡張する拡張機能「Better TweetDeck」を利用します。

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

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

1. 「TweetDeck」の右クリック項目を削除するCSS
- 1.1. 「Stylebot」を使っている場合（Stylusでも同じ）
- 1.2. 「Better TweetDeck」を使っている場合
2. 感想

「TweetDeck」の右クリック項目を削除するCSS

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

/*【右クリック】Embed this Tweet*/
a[data-action="embed"] {
  display: none !important;
}

/*【右クリック】Copy link to this Tweet*/
a[data-action="reference-to"] {
  display: none !important;
}

/*【右クリック】Share via Direct Message*/
a[data-action="message-to"] {
  display: none !important;
}

/*【右クリック】Share via Email*/
a[data-action="email"] {
  display: none !important;
}

/*【右クリック】Tweet to @〇〇〇*/
a[data-action="mention"] {
  display: none !important;
}

/*【右クリック】Follow from accounts*/
a[data-action="followOrUnfollow"] {
  display: none !important;
}

/*【右クリック】 Like from accounts… */
a[data-action="favoriteOrUnfavorite"] {
  display: none !important;
}

/*【右クリック】Send a Direct Message*/
a[data-action="message"] {
  display: none !important;
}

/*【右クリック】Add or remove from Lists…*/
a[data-action="lists"] {
  display: none !important;
}

/*【右クリック】Add to Collection…*/
a[data-action="customtimelines"] {
  display: none !important;
}

/*【右クリック】See who quoted this Tweet*/
a[data-action="search-for-quoted"] {
  display: none !important;
}

/*【右クリック】Delete*/
a[data-action="destroy"] {
  display: none !important;
}

/*【右クリック】Re-draft*/
a[data-btd-action="edit-tweet"] {
  display: none !important;
}

/*【右クリック】Flag media*/
a[data-action="flag-media"] {
  display: none !important;
}

/*【右クリック】Mute @〇〇〇*/
a[data-action="mute"] {
  display: none !important;
}

/*【右クリック】Mute Retweets from User*/
a[data-btd-filter="BTD_is_retweet_from"] {
  display: none !important;
}

/*【右クリック】Mute Quotes from User*/
a[data-btd-filter="BTD_mute_quotes"] {
  display: none !important;
}

/*【右クリック】Mute this conversation*/
a[data-action="muteConversation"] {
  display: none !important;
}

/*【右クリック】Block @〇〇〇*/
a[data-action="block"] {
  display: none !important;
}

/*【右クリック】Report Tweet*/
a[data-action="report-tweet"] {
  display: none !important;
}

/*【右クリック】Undo Retweet*/
a[data-action="undo-retweet"] {
  display: none !important;
}

/*【右クリック】Hide this tweet*/
a[data-btd-filter="BTD_specific_tweet"] {
  display: none !important;
}

/*【右クリック】Mute "Twitter for 〇〇〇"*/
a[data-btd-action="mute-source"] {
  display: none !important;
}

各コードの上に、「/*【右クリック】〇〇〇*/」といったコメントを書いています。ここのコメントに書かれている項目と連動しています。例えば、「/*【右クリック】Embed this Tweet/*」の項目を書き込むと、「Embed this Tweet」の項目が消えます。

「display: none !important;」が、「非表示」という意味になっています。

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

例えば、「Embed this Tweet」、「Share via Email」、「Report Tweet」の3つだけを非表示にしたい場合は、以下のようになります。CSSが分かる方は、コードをまとめたほうがスッキリします。

/*【右クリック】Embed this Tweet*/
a[data-action="embed"] {
  display: none !important;
}

/*【右クリック】Share via Email*/
a[data-action="email"] {
  display: none !important;
}

/*【右クリック】Report Tweet*/
a[data-action="report-tweet"] {
  display: none !important;
}

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