シェアして頂けると嬉しいです!

Twitterの「いいねボタン」のデザインを寿司に変更する方法

スポンサーリンク

Twitterで「いいねボタン」をカスタマイズできる

今のTwitterの「いいねボタン」はこのようにハートマークになっていますが、Twitterの「いいねボタン」のデザインを寿司に変更するサービス「like2sushi」が開始されました。

twitter-sushi1

このサービスは、GitHubで展開されており、Zipファイルをダウンロードすることでこのサービスを受けることができます。

このサービスはユーザースタイルシートという技術が利用されていると思われます。

ユーザースタイルシートとは、Webサービスを受けるユーザーの方が設定できるスタイルシートのことです。通常、Webサービスを受けるユーザーはWebのスタイルシートを変更することはできませんが、このユーザースタイルシートを変更することで、実際のWeb上のデザインは変わりませんが、ユーザーが閲覧するWebのデザインを変えることができます。

つまり、ユーザーが見た時のWebページにだけそのユーザー用のフィルターをかけて見え方を変えてしまうというわけです。

今回の例でいうと、「いいねボタン」を寿司に変更してもTwitterでは「いいねボタン」はハートのままですが、「いいねボタン」を寿司に変更したユーザーからは「いいねボタン」が寿司にみえることになります。

今回は、 Twitterの「いいねボタン」のデザインを寿司に変更する方法について共有したいと思います。

「いいねボタン」のデザインを寿司に変更する方法

まず、Githubの「like2sushi」のページにアクセスします。

次に、右下にある「Download ZIP」をクリックしてファイルをダウンロードします。

twitter-sushi2

ダウンロードされるのは圧縮されたファイルなので、予めファイルを解凍しておきます。OSがOSXのEl Capitanの場合はダウンロードと同時に解凍されました。

twitter-sushi3

次に、Google Chromeを起動して、Google ChromeのExtensionsページを開きます。

今まで別のブラウザを使用してきた場合は、その前にGoogle ChromeのダウンロードページでGoogle Chromeをダウンロードしておきます。

Google ChromeのExtensionsページにアクセスしたら、「ディベロッパーモード」にチェックをつけて、「パッケージ化されていない拡張機能を読み込む」をクリックします。

twitter-sushi4

「パッケージ化されていない拡張機能を読み込む」をクリックすると、次のようなファイルを選択する画面がでてくるので、先ほどダウンロードした「like2sushi-master」を選択して、「選択」をクリックします。

twitter-sushi5

すると、先ほどアクセスしたGoogle Extensionsのページに「like2sushi for chrome extension 0.1」が一番上に表示されます。

ここで、「リロード」をクリックして完了です。

twitter-sushi6

Chrome上でTwitterのツイートを確認すると、このように「いいねボタン」のデザインが寿司に変わっているのが確認できます。

試しに「いいねボタン」をクリックすると、寿司が振動するような感じで動きました。面白いので、皆さんも試してみてください。

twitter-sushi7

また、Chrome上で文字を書く際に「すし」と入力すると、変換の候補に出てくるようになりました。マグロにぎりのアイコン可愛い(゚ω゚)

twitter-sushi8

「いいねボタン」のデザインに寿司を考えるのはかなり斬新な発想だと思います。実際に設定してみると面白いので、皆さんも試してみてください。

以上、参考にしていただけると嬉しいです。  

スポンサーリンク

シェアして頂けると嬉しいです!

みるにゅーすをフォローする(・ω・)!

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です