twitter(ブラウザ表示)でRT済アイコンを見やすくするユーザースタイルシート
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日
こちらは上でも紹介している「Stylish」上に登録されているスタイルなので、ブラウザに「Stylish」アドオンをインストール後、Outlined retweet styleをブラウザで開き「Install Style」という青いボタンを押せば適用されます。
もいっこ追記:
格ブラウザからのStylishへのリンクをまとめてらしたので。
⚡️ "Stylish導入リンク"https://t.co/6J4NSmTpKS
— 硫酸鶏.MoveNext(); (@acid_chicken) 2017年7月21日