当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

2022年4月29日Twitter

「TweetDeck」のアイコン

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

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

「TweetDeck」のツイートメニューをカスタマイズした比較画像

「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にしています。

2023年9月追記

2023年8月以降、「TweetDeck」は無料で使えなくなり、有料の「XPro」という名称になりました。

僕は、加入しておらず、加入する気もないため、現在は「TweetDeck(XPro)」を使っていません。そのため、有料になった現在でも使えるのかは不明です。使えなくなっていたとしても、僕はあてになりません。

「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つの方法を紹介します。

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

「Stylebot(スタイルボット)」は、ウェブサイトにCSSを適用できるChrome拡張機能Firefoxアドオンです。

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

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

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。上記で紹介したCSSを書き込んでいきます。

Stylebotのスクリーンショット2

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

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

「Better TweetDeck」を使っている場合

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

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

インストールできたら、「TweetDeck」にアクセスします。左のメニュー項目の中に「BTD Settings」という部分が新しく追加されているのでクリックします。

「Better TweetDeck」の設定画面にアクセスする手順画像

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

「Better TweetDeck」のカスタムCSS画像1

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

「Better TweetDeck」のカスタムCSS画像2

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

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

感想

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

ここの項目がスッキリすることで、より快適な「TweetDeck」ライフを過ごせます。

こちらの記事もおすすめ

ミートボールメニュー(三点ボタン)内の項目は、日本語化できます。本記事で使わない項目を非表示にして、表示している項目を日本語化することで、見やすくなります。

2022年4月29日Twitter