【TweetDeck】右クリックを日本語化する方法。CSSを使おう！
この記事では、「TweetDeck（ツイートデック）」の右クリックメニュー（ミートボールメニュー）を日本語化する方法について書きます。
CSSを使うことで、サクッと好きな日本語にできます。
「TweetDeck」の右クリックメニュー（ツイート下の三点ボタンをクリックしたときのメニュー）は、CSSを使うことで、好きな日本語に変更できます。
例えば、以下のように変更できます。変更後の日本語文章は、好きなようにカスタマイズできます。
| 変更前 | 変更後 |
|---|---|
| Embed this Tweet | ツイートを埋め込む |
| Copy link to this Tweet | ツイートのリンクをコピー |
| Like from accounts | いいね！する |
| Send a Direct Message | ダイレクトメッセージを送る |
| Hide this tweet | このツイートを非表示にする |
通常、「TweetDeck」のミートボールメニュー内の項目は英語です。日本語に変更することで、日本人が使いやすくなります。CSSで変更しているだけなので、いつでも元に戻せます。誰かに迷惑をかける心配もありません。
ウェブサイトにCSSを適用できる拡張機能（「Stylebot」や「Stylus」）を使うか、「TweetDeck」を拡張する拡張機能「Better TweetDeck」を利用します。
本記事の内容は、「TweetDeck」を「PWA（アプリケーション化）」にしていても利用できます。僕は、「Vivaldi」ブラウザを使ってPWAにしています。
本記事は、以下の記事を書いている時に、思いついた方法です。右クリックメニューの一部を非表示にしてスッキリさせてから、日本語に直すと、より快適に利用できると思います。
https://www.naporitansushi.com/tweetdeck-rightmenu-hide/「TweetDeck」の右クリック項目を日本語化する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^="follow"], /*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-action="translate"], /*Translate this Tweet*/
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^="follow"]: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-btd-filter="BTD_is_retweet_from"]:before {
content: 'ユーザーからのリツイートをミュートする';
font-size: 14px;
}
/*Mute Quotes from User*/
a[data-btd-filter="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;
}
/*Translate this Tweet*/
a[data-action="translate"]: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を開く」をクリックします。既にTweetDeck上でCSSを作成している場合は、上に「tweetdeck.twitter.com」と表示されていると思うので、そちらをクリックします。
スタイルシートが表示されるので、上記で紹介したCSSを書き込んでいきます。
書き込めたら、右上の「×」をクリックしてスタイルシートを閉じます。ツイート下にある
をクリックすると、日本語になっていると思います。なっていない場合は、ページをリロードします。
「Better TweetDeck」を使っている場合
「Better TweetDeck」は、「TweetDeck」の機能を拡張する拡張機能です。Chrome拡張機能、Firefoxアドオンが用意されています。沢山の機能があり、「TweetDeck」をよりヘビーに使いたいなら、ぜひとも導入しておきたいツールです。
詳しい解説は省略します。気になる方は、「Better TweetDeckとは」、「Better TweetDeck 使い方」といったようにググってみましょう。
インストールできたら、「TweetDeck」にアクセスします。
左のメニュー項目の中に「BTD Settings」という部分が新しく追加されているのでクリックします。
設定ページが開きます。左側の「カスタムCSS」をクリックします。スタイルシートが表示されるので、上記で紹介したCSSを書き込みます。書き込めたら、忘れずに一番下の「保存」をクリックします。
「TweetDeck」をリロードします。のメニューが日本語化されます。
ナポリタン寿司が使っているコード
「【TweetDeck】右クリックの一部を消す方法。CSSを使おう！！」の記事で、一部項目を非表示にしている場合、その行は書き込まなくてOKです。例えば、僕は以下の4つの項目のみを表示するようにしています。
- Copy link to this Tweet
- Delete（自分のツイートにのみ表示）
- Mute アットマーク記号〇〇〇
- Block アットマーク記号〇〇〇
この場合、日本語化する箇所は、「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」中毒の道へと進んでいくのだったー