twitter（ブラウザ表示）でRT済アイコンを見やすくするユーザースタイルシート

2017/07/21

twitterの偉い人へ。よろしくお願いします。 pic.twitter.com/H6AtNQXLih

— ヤスオカ/鈴鹿8耐全車&4耐22号車応援 (@yasuoka) 2017年7月17日

というツイートを見かけたので、PCのブラウザで見る場合だけですが、がになるユーザースタイルシートを書いてみました。

TwitterWeb画面のリツイートアイコンを白文字・緑背景に変更するユーザースタイルシート

CSSの中身はこれだけです。

.ProfileTweet-action--retweet:hover .ProfileTweet-actionButton, .ProfileTweet-action--retweet:hover .ProfileTweet-actionCount, .ProfileTweet-action--retweet .ProfileTweet-actionButton:focus, .ProfileTweet-action--retweet .ProfileTweet-actionButton:focus .ProfileTweet-actionCount, .retweeted .ProfileTweet-action--retweet .Icon--retweet, .retweeted .ProfileTweet-action--retweet .ProfileTweet-actionButtonUndo{
color: #ffffff;
background-color: #17bf63;
font-weight: bold;
}

ユーザースタイルシートの適用は、ChromeやFireFoxの場合は「Stylish」というアドオンを使用するのが簡単。

Chrome拡張「Stylish」でユーザースタイルシートを設定する
Chromeの場合はこの記事を参考に、「コード1」の部分に上に書いたスタイルをコピペしてみてください。

Firefoxアドオン「Stylish」の使い方
Firefoxの場合はこの記事を参考に、「3.スタイルを書く」で示されたエリアにコピペしてみてください。

ほかのブラウザもユーザースタイルシートの使い方は検索したら出てくると思います。
ご質問などは @hanameiro まで。

……と書いてみてから検索したら、もっときれいなスタイルを書いてる方がすでにいらっしゃいました。そりゃそうだ。

FF外から失礼します。ヤスオカさんのツイートに触発されて、RTを次の画像のように表示するStylishスタイルを作成しました。もしWEBブラウザを利用されていらっしゃるなら、こちらのリンクから利用できますので、もしよければどうぞ！ https://t.co/FoHXNZbguA pic.twitter.com/rfgXwNTTVY — 硫酸鶏.MoveNext(); (@acid_chicken) 2017年7月19日