【Microsoft Rewards】隠れキャラを強制拡大&位置移動させるCSS
この記事では、PCウェブサイト版「Microsoft Rewards」のダッシュボードに表示されるクリップキャラの位置を分かりやすい場所に移動&拡大するCSSを紹介します。
いつ頃かPCウェブサイト版「Microsoft Rewards」のダッシュボード上にクリップ姿のキャラクターが表示されるようになりました。毎日ダッシュボードのどこかに隠れていて、クリックすると5ポイント獲得できます。
最初は面白かったんですが、途中から毎回探すのがめんどくさく感じました。
CSSを使うことで強制的に分かりやすい場所に位置を移動できます。さらに大きさも変えられます。探す手間が省けてクリックするだけです。
CSSは自分自身の環境上（見た目）のみの変更で他人には一切影響しません。
本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。
https://www.naporitansushi.com/microsoft-rewards/前提
「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。
リワードの隠れキャラを強制拡大表示するCSS
スタイルシートを開く
「Microsoft Rewards」のダッシュボードにアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。
もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。
CSSを書き込む
以下のコードを書き込みます。
/*隠れキャラの位置&大きさ調整*/
mee-rewards-clippy>div {
left: 3vw !important;
top: 200px !important;
transform: scale(4.3) !important;
z-index: 100000 !important;
background-color: rgb(246 255 56) !important;
&>button {
transform: rotate(0deg) !important;
}
}「left」が左からどの位置に配置するか？、「top」が上からどの位置に配置するか？です。各自お好みで数値調整してみてください。
「transform」が拡大率です。上記の「4.3」はデフォルトより4.3倍の大きさにするという意味です。もっと大きくしたい場合は「scale(8)」といった感じにします。
「background-color」が背景色です。別になくてもいいです。より目立たせたい方にはいいかと思います。
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：rewards.bing.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
変わったか確認する
クリップキャラが左上に大きく表示されます。
当然ですが、既に獲得済みの場合はキャラが表示されないので表示されません。あくまでまだ未獲得でページ上のどこかに隠れている場合のみ表示されます。
表示されていないものを強制的に表示させて無理やりポイント獲得するといった強引なものではないです。なので既に本日獲得済みの場合は一切変化がないので、また表示されるタイミングに確認してみましょう。
ちゃんとクリック判定もあります。クリックでポイントを獲得でき、キャラが消えます。
また獲得できる時になったら、再びそこに固定表示されます。いちいち探す手間が省けます。
一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「rewards.bing.com」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
感想
以上、PCウェブサイト版「Microsoft Rewards」のダッシュボードに表示されるキャラクターの位置を分かりやすい場所に移動&拡大するCSSでした。
存在しない状態から強制的に表示させてポイントを無理やり獲得する…といった黒な方法ではなく、あくまで探す手間をショートカットするだけなので問題ないとは思いますが、いちお利用は自己責任です。