先日紹介した「お好き玉」ですが、アクセス数が多いはずなのにまだ2014に達していません！

アクセスが足りないのか、みんな諦めるのか分かりませんが2014を超したほうが楽しいので、少しだけヒント載せておきます！

素人でも、これをきっかけに少しだけWebエンジニアっぽいことに挑戦できたら楽しいよね:)

逃げる「イイネ!!」が押せない仕組み

このFBイイネが押せない理由は2つあります。

1. イイネボタンの上にCSSでマスクがかかっている
2. カーソルに合わせてボタンが動く

この両方を解除しないとボタンは押せません。

Google ChromeのDeveloper Toolは必須ですヨ:)

1.イイネボタンの上にCSSでマスクがかかっている

z-indexの仕業かと思ったら、こんな方法もあるんですねぇ。感心。

1
2
3
4
5
6
7
8
9
10

// https://iine2014.fnobi.com/css/iine2014.css:84
#iine:after {
  content: '';
  display: block;
  width: 120px;
  height: 22px;
  position: absolute;
  top: 0px;
  left: 0px;
}

Facebookのイイネボタンのidが#iineで、その直後に疑似要素:afterが同じサイズでかぶさっています。なので、どんなに頑張ってもボタンは押せません。

この疑似要素を消すか、widthを0にしてしまえばボタンは押せますね。Developer Toolの出番やで！

2. カーソルに合わせてボタンが動く

JavaScriptを見てみると、mouseoverとtouchstartのタイミングで位置を移動させているのが分かります。

1
2
3
4
5
6
7
8
9
10
11

// https://iine2014.fnobi.com/js/iine2014.js:9130
(function (win) {
    $(function () {
        var $window = $(window);
        var $iine = $('#iine');

        // 略

        $iine.on('mouseover touchstart', function () {
          // 略
        });

なので、このeventを解除してやれば動かなくなります(・∀・) onの逆をすればいいのです

まとめ

解説しましたが、つまるところ#iineにまつわるものを解除してやればいいので、Developer Toolを開いて、ちょめっとすれば一瞬ですネヾ(*´∀｀*)ﾉ

さぁ「お好き玉」へ挑戦してみようー！