hatena ブログでスーパーの特売風にエントリーをアピールする

portal.nifty.com

こういうデイリーの記事があって、リアルシールで実装していたので今回システム側で実装してみた。↓これがサンプルページ

zamad.hatenablog.com

実装自体は簡単で、エントリー本体にアピールしたいステッカーが入る要素を直接ぶち込んでそれをJSを使ってヘッダー部に貼り直すだけ。 その際に適当に回転させて特売ステッカー感を出してみた。

まずとりあえずブログに特売ステッカーの画像を作ってアップする。

f:id:zamad:20161111174842p:plain

今回はこれを作った。はてなブログぐらいだと 128 x 128 px ぐらいで作ると丁度よかった。形が丸いのでアルファ付きPNGで作っている。

次にエントリーに元ネタ要素を貼り込む。このような class をくっつけた HTML 要素を貼り込む。

<span class="tokubai"></span>

内容が無いので画面上は何も表示されない。

これに対するスタイルシートを、デザインのカスタムとしてこのように作成する

#blog-title span.tokubai{
    position:absolute;
    width: 128px;
    height:128px;
    z-index: 10000;
    background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/z/zamad/20161111/20161111174842.png);
}
span.tokubai.d30{ transform:rotate(30deg); }
span.tokubai.d60{ transform:rotate(60deg); }
span.tokubai.d90{ transform:rotate(90deg); }
span.tokubai.d120{ transform:rotate(120deg); }
span.tokubai.d150{ transform:rotate(150deg); }
span.tokubai.d180{ transform:rotate(180deg); }
span.tokubai.d210{ transform:rotate(210deg); }
span.tokubai.d240{ transform:rotate(240deg); }
span.tokubai.d270{ transform:rotate(270deg); }
span.tokubai.d300{ transform:rotate(300deg); }
span.tokubai.d330{ transform:rotate(330deg); }

ブログのタイトル部に移動した時だけ効いてほしいのでこういうセレクタ。画像自体は↑でアップロードした画像のURLを指定する

デザインのカスタマイズでフッター部に JavaScript を書く部分があるので、そこにこのように書いた。

(function(){
    if(document.URL.indexOf("http://zamad.hatenablog.com/entry") == -1){
        return;
    }
    var tokubaiList = document.querySelectorAll("span.tokubai");
    if(tokubaiList.length == 0){
        return;
    }
    var headerTitle = document.querySelector("#blog-title");
    for(var i = 0; i < tokubaiList.length; i++){
        tokubaiList[i].parentNode.removeChild(tokubaiList[i]);
        headerTitle.appendChild(tokubaiList[i]);
        tokubaiList[i].style.top = 10 + Math.floor(Math.random() * 121) + "px";
        tokubaiList[i].style.left = 10 + Math.floor(Math.random() * 81) + "%";
        tokubaiList[i].classList.add("d" + (30 * (1 + Math.floor(Math.random() * 12))));
    }
})();

これで記事に暑苦しいほどのアピールができるようになった。当然HTMLを貼り込まなければステッカーは貼られないのでアピールを記事毎にコントロールできる

f:id:zamad:20161114130417p:plain

テスト的に実装したデザインのブログ意外ではどのように動作するかわからないのでそのへん調整とか必要。

おとなの自由研究 青おに (アスペクト文庫)

おとなの自由研究 青おに (アスペクト文庫)

おとなの自由研究 赤おに (アスペクト文庫)

おとなの自由研究 赤おに (アスペクト文庫)

おとなの自由研究

おとなの自由研究