hatena ブログでスーパーの特売風にエントリーをアピールする
こういうデイリーの記事があって、リアルシールで実装していたので今回システム側で実装してみた。↓これがサンプルページ
実装自体は簡単で、エントリー本体にアピールしたいステッカーが入る要素を直接ぶち込んでそれをJSを使ってヘッダー部に貼り直すだけ。 その際に適当に回転させて特売ステッカー感を出してみた。
まずとりあえずブログに特売ステッカーの画像を作ってアップする。
今回はこれを作った。はてなブログぐらいだと 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を貼り込まなければステッカーは貼られないのでアピールを記事毎にコントロールできる
テスト的に実装したデザインのブログ意外ではどのように動作するかわからないのでそのへん調整とか必要。
- 作者:デイリーポータルZ
- 発売日: 2013/03/12
- メディア: 文庫
- 作者:デイリーポータルZ
- 発売日: 2013/03/12
- メディア: 文庫