【TweetDeck】右クリックメニューを日本語化する方法。CSSを使おう!

2022年4月29日Stylebot&Stylus

TweetDeckのアイコン

この記事では、TweetDeckの右クリックメニュー(ミートボールメニュー)を日本語化する方法について書きます。

CSSを使うことで、サクッと好きな日本語にできます。

TweetDeckの三点ボタン(ミートボールメニュー)内の項目を日本語化した画像

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

例えば、以下のように変更できます。文言は、好きなようにカスタマイズできます。

  • Embed this Tweet→ツイートを埋め込む
  • Copy link to this Tweet→ツイートのリンクをコピー
  • Like from accounts→いいね!する
  • Send a Direct Message→ダイレクトメッセージを送る
  • Hide this tweet→このツイートを非表示にする

TweetDeckのミートボールメニュー内の項目は英語です。日本語に変更することで、日本人が使いやすくなります。CSSで変更しているだけなので、いつでも元に戻せます。誰かに迷惑をかける心配もありません。

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

本記事の内容は、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="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-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*/
{
  font-size: 0;
}


/*----------------------------------
日本語化して、再び表示させる
-----------------------------------*/
/*Embed this Tweet*/
a[data-action="embed"]:before {
  content: 'このツイートを埋め込む';
  font-size: 14px;
}
/*Copy link to this Tweet*/
a[data-action="reference-to"]:before {
  content: 'このツイートのリンクをコピー';
  font-size: 14px;
}
/*Share via Direct Message*/
a[data-action="message-to"]:before {
  content: 'ダイレクトメッセージでシェアする';
  font-size: 14px;
}
/*Share via Email*/
a[data-action="email"]:before {
  content: 'メールでシェアする';
  font-size: 14px;
}
/*Follow from accounts*/
a[data-action="followOrUnfollow"]:before {
  content: 'フォローする';
  font-size: 14px;
}
/*Like from accounts*/
a[data-action="favoriteOrUnfavorite"]:before {
  content: 'いいね!';
  font-size: 14px;
}
/*Send a Direct Message*/
a[data-action="message"]:before {
  content: 'ダイレクトメッセージを送る';
  font-size: 14px;
}
/*Add or remove from Lists…*/
a[data-action="lists"]:before {
  content: 'リストの追加と削除';
  font-size: 14px;
}
/*Add to Collection*/
a[data-action="customtimelines"]:before {
  content: 'コレクションに追加';
  font-size: 14px;
}
/*See who quoted this Tweet*/
a[data-action="search-for-quoted"]:before {
  content: 'このツイートを引用した人を見る';
  font-size: 14px;
}
/*Delete*/
a[data-action="destroy"]:before {
  content: '削除';
  font-size: 14px;
}
/*Re-draft*/
a[data-btd-action="edit-tweet"]:before {
  content: 'ツイートを削除して再投稿';
  font-size: 14px;
}
/*Flag media*/
a[data-action="flag-media"]:before {
  content: '画像の通報(フラグ)';
  font-size: 14px;
}
/*Mute Retweets from User*/
a[data-action="BTD_is_retweet_from"]:before {
  content: 'ユーザーからのリツイートをミュートする';
  font-size: 14px;
}
/*Mute Quotes from User*/
a[data-action="BTD_mute_quotes"]:before {
  content: 'ユーザーからの引用をミュートする';
  font-size: 14px;
}
/*Mute this conversation*/
a[data-action="muteConversation"]:before {
  content: 'この会話をミュートする';
  font-size: 14px;
}
/*Report Tweet*/
a[data-action="report-tweet"]:before {
  content: 'ツイートを報告';
  font-size: 14px;
}
/*Undo Retweet*/
a[data-action="undo-retweet"]:before {
  content: 'リツイートを取り消す';
  font-size: 14px;
}
/*Hide this tweet*/
a[data-btd-filter="BTD_specific_tweet"]:before {
  content: 'このツイートを非表示にする';
  font-size: 14px;
}

仕組みとしては、一旦英語のテキストを「font-size: 0;」で非表示にしています。その後に、日本語化して再び表示させています。つまり、一旦英語テキストを非表示にしていないと、英語と日本語が混合してしまいます。

また、一部テキストは英語のままです。具体的には、「Mute “Naporitansushi"」といったようにユーザー名ごとで表示が変わる項目が該当します。まぁ、この程度なら英語でも理解できると思います。

各行に「/*〇〇〇*/」といったようにコメントを書いています。ここのコメントに書かれている項目と連動しています。例えば、「/*Copy link to this Tweet*/(ツイートのリンクをコピー)」の行を書き込むと、「Copy link to this Tweet」が「ツイートのリンクをコピー」といった日本語に変わります。

「content: '〇〇〇’;」の〇〇〇の部分を、好きな日本語に変更できます。自分が理解しやすい文言にしてみましょう。僕は、英語が壊滅的なので、DeepL翻訳の結果をそのままコピペしています。

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

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

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

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

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

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

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

Stylebot→Stylebotを開く

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

書き込めたら、右上の「×」をクリックして、Stylebotの画面を閉じます。ツイート下にある三点ボタンをクリックすると、日本語になっていると思います。なっていない場合は、ページをリロードします。

Stylebotに「右クリックメニューを日本語化するコード」を書き込んだ画面

Better TweetDeckを使っている場合

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

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

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

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

TweetDeckにアクセスして、左側の「BTD Settings」をクリック

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

Better TweetDeck カスタムCSS

TweetDeckをリロードします。三点ボタンのメニューが日本語化されます。

ツイートのメニューが日本語化される

ナポリタン寿司が使っているコード

【TweetDeck】右クリックメニューの一部を消す方法。CSSを使おう!」の記事で、一部項目を非表示にしている場合、その行は書き込まなくてOKです。例えば、僕は以下の4つの項目のみを表示するようにしています。

  • Copy link to this Tweet
  • Delete(自分のツイートにのみ表示)
  • Mute アットマーク記号〇〇〇
  • Block アットマーク記号〇〇〇
「Copy link to this Tweet」、「Mute」、「Block」の3つ以外の項目全てを非表示にした画像

この場合、日本語化する箇所は、「Copy link to this Tweet」、「Delete」の2点のみです。書き込むコードは以下になります。

/*TweetDeckの三点ボタン内の英語を一旦非表示にする*/
a[data-action="reference-to"], /*Copy link to this Tweet*/
a[data-action="destroy"] /*Delete*/
{
  font-size: 0;
}

/*----------------------------------
日本語化して、再び表示させる
-----------------------------------*/
/*Copy link to this Tweet*/
a[data-action="reference-to"]:before {
  content: 'ツイートのリンクをコピー';
  font-size: 14px;
}
/*Delete*/
a[data-action="destroy"]:before {
  content: '削除';
  font-size: 14px;
}

表示している項目だけが日本語化されます。非表示にしている項目の日本語化コードを書かないことで、コード自体もスッキリしていい感じです。

感想

以上、TweetDeckの三点ボタンをクリックした時のメニュー項目を日本語化する方法でした。

これでまた一歩、ナポリタン寿司は、TweetDeck中毒の道へと進んでいくのだったー

Posted by ナポリタン寿司