BlankSlate

いや、そういう声もあるというだけです

Twitterの「いいね」を任意のアイコンに変更する知見

tl;dr

おさむん Adventあどべんと Calendarかれんだーでは、このせつ以外いがい必要ひつようはありません

Twitterついったー仕様変更しようへんこうにより、いままでの:star:(おり)アイコンが:heart:(いいね)アイコンへ変更へんこうされました。しかし、らないユーザは、自身じしんでスタイルシートを作成さくせい適用てきようすることで自分じぶんきなアイコンへ変更へんこうすることができます。

さる</ruby>にもわかるようにか</ruby>みくだ</ruby>いた解説かいせつ</ruby>

ッウウッウ!ッッッウキ!ッウキキウ!ッッウキキ!ッッウキキ!ッウキウキ!ッッウキウ!ッキキウウウウッキ!ッウウウキウウッッウ!ッッウッウッッッキウ!ッウッッウキッウッキ!ッッウウウッッウッッ!ッキキウウウウウキ!ッキキウウッウッッ!ッキキウウッウキウ!ッキッキッキウッッ!ッウウウキウウウウッ!ッキキウウウキッウ!ッキッキキキキキッ!ッキキウウウウッキ!キウッッ!ッッウキッ!ッッウキキ!ッウッキッ!ッッウキウ!キウッッ!ッウウキキッキウウウキ!ッキッキキッキッキ!ッッウッキキッキッキ!ッキキウウウウウキ!ッウウッッキウキウキ!ッキキウウッウキウ!ッウウキキッキウウッウ!ッキキウウキウッウ!ッキキウウキウッキ!ッキキウウキキウキ!ッキキウッキウッウ!ッキッキキッキキッ!キウッッ!ッウキッキ!ッウキウキ!ッウッキッ!ッッウキウ!ッッウキキ!キウッッ!ッウウキキッキウウウキ!ッキッキキッッキキ!ッキッキキッッキキ!ッキキウウウウッッ!ッウウキキッキウウッウ!ッキキウウキウッウ!ッキキウウキウッキ!ッキキウウキキウキ!ッキキウッキウッウ!ッキキウウウッキウ!ッウッッウキッウッキ!ッッウウウッッウッッ!ッキッキキキウキッ!ッキキウウッウキキ!ッキキウウウキッウ!ッキッキキキッウウ!ッキッキキキッキキ!ッキッキッキウッキ!ッキッキキキッウウ!ッキッキキッキキウ!ッキッキキキッウウ!ッキッキッキウッッ!ッッウッキキッキッキ!ッキキウウウウウキ!ッウウッッキウキウキ!ッキキウウッウッキ!ッキキウウウウウッ!ッキッキキッッキキ!ッキキウッッッキキ!ッキキウッキッッウ!ッキキウウキキッキ!ッキキウウウウキウ!ッキッキッキウッッ!ッキウウッキッキッウ!ッキッキウウキキウッ!ッキッキキキキキッ!ッキキウウキキキキ!ッキキウッウウッキ!ッキキウウキウッキ!ッキキウッッキッッ!ッキキウウキキキウ!ッキキウッキッッウ!ッキキウッウッッキ!ッキキウウッッッキ!ッウウウキッキッッウ!ッウキッッウキキッウ!ッキキウッキッウキ!ッキッキキウッウキウ!ッッッキウッウキッッ!ッキッキキキッウキ!ッキキウウッウキッ!ッキッキキキウッキ!ッキッキキキキキキ!ッキッキキキキキッ!ッキウウッキッキッウ!ッウウッキッウキウッ!ッキキウウウウッキ!ッウッッッウキッッッ!ッキッキキッキキキ!ッキキウウウウウッ!ッキキウウキウッウ!ッキキウウキウッキ!ッキキウウキキウキ!ッキキウッキウッウ!ッキキウウウッキウ!ッウッッウキッウッキ!ッッウウウッッウッッ!ッキッキキキッウキ!ッキキウウッウキッ!ッキッキキキウッキ!ッキッキキキキキキ!ッキッキキッキキッ!ッキッキキキキキッ!ッキッキキッキキキ!ッキキウウウキッウ!ッキッキキキッウキ!ッキッキッキウッキ!

ネタ元

Twitterのふぁぼマークがハートになってしまったので、昔ながらの寿司アイコンに戻す方法を書いておきます。(Google Chromeのみ) Twitterのふぁぼマークを寿司にする - Qiita

ネタ元では、Twitter自体で持つ絵文字画像を参照し、通常時と:hover:focus時で画像位置を変更する(backgroud-position: right or left)ことで:heart:から:sushi:への変更を実現している。

この考えを踏襲し、:heart:をVimのアイコンにする。

画像

オリジナルのtwitter_core.bundle.cssを見る限り、以下のような感じ。

  • 画像幅: 50x50px
  • 実際のアイコン幅: 16x16px

前述の通り、backgroud-positionの変更によって、アイコンを変化させる。よって、画像の横幅は100(50*2)x50pxとなり、以下のような透過PNGとなる。

画像のアップロード

CSS内で指定できるように、作成した画像をアップロードする。CORSを回避するため、画像はツイートに添付する形で、pbs.twimg.comにアップロードする。画像ファイルパスの取得方法はブラウザによって異なるが、Chromeであれば画像を右クリックし、画像URLをコピーで取得可能である。

実際にアップロードした画像( https://pbs.twimg.com/media/CS8_YfTUsAANbq3.png )

CSS

ネタ元を参考に、以下のように記述した。

.HeartAnimation {
    background: url(https://pbs.twimg.com/media/CS8_YfTUsAANbq3.png);
    background-position: left;
}

.ProfileTweet-action--favorite .ProfileTweet-actionButton:hover .HeartAnimation,
.ProfileTweet-action--favorite .ProfileTweet-actionButton:focus .HeartAnimation,
.favorited .ProfileTweet-action--favorite .HeartAnimation {
    background-position: right;
}

カスタムCSSの適用

ネタ元を参照せよ。

SEE ALSO

History