バレンタインに世界中のブロガーからバレンタインチョコをもらえるブログパーツ

これは何？

マウスオーバーするだけで、好きなキャラ(もしくはブロガー)からバレンタインチョコをもらえるブログパーツです。

今日の記事を書く予定のあるブロガーの皆さんは、紛争解決のためにこのブログパーツを貼ってくださいね。

もし仮にですが、id:Brittyさんやid:merecoさんやid:dropdbさんやid:Bossoさんやid:dankogai(!)がこれを貼ってくれば紛争もとっくに解決して、寒い寒いはてな村にも春がやってくるんじゃないかな(適当)

世の中がバレンタインで浮かれている今週と来週一杯はブログに表示されたツンデレパーツにマウスをオン・オフさせていれば、一層仕事の生産性が落ちること請け合いです。

ツンデレ ブログパーツの作り方

例えば、

涼宮ハルヒのバレンタイン

でブログパーツを作る場合、

ツンデレブログパーツジェネレートにアクセスしてid(ツンデレページURLの末尾)とお好みのサイズを入力すれば自動で貼り付けコードが生成されます。

こんな感じ(マウスオーバーでチョコをもらえます。マウスアウト＋数秒放置すれば元に戻るので何回でもチョコがもらえますよ♪)↓

なぜかFirefox3+はてなダイアリーの環境でフェードインがきれいにきまらないっ。非対応なのに無理やり貼り付けたからバチがあたったかな(汗)

ツンデレ ブログパーツをはてなダイアリーに貼り付ける方法

はてなダイアリーに貼り付けたい場合は、当然対応していないですが、以下のようなコードで貼り付け可能です。

<script src="http://www.gmodules.com/ig/ifr?url=http://startzap.com/valentine_haruhi.xml&amp;synd=open&amp;w=500&amp;h=500&amp;title=%E6%B6%BC%E5%AE%AE%E3%83%8F%E3%83%AB%E3%83%92%E3%81%AE%E3%83%90%E3%83%AC%E3%83%B3%E3%82%BF%E3%82%A4%E3%83%B3&amp;border=%23ffffff%7C3px%2C1px+solid+%23ffffff&amp;output=js"></script>

はてなダイアリーへの貼り付けに関してはここが詳しいです。

ツンデレ ブログパーツのソースコード

jQueryとtsundere_parts.jsを遅延読み込みしてます。
遅延読みこみに関しては

JavaScriptから外部JavaScriptを読み込む方法

を参考にさせていただきました。

blogparts?id=55

var imgScale = 0;
var boxWidth = 486;
var boxHeight = 265;
(ScriptRunner=function(v){var i,n,l,p,s,c={},w=window,t=setTimeout;for(i=0,n=v.length;i<n;++i){l=v[i];if(typeof l=='string'||l instanceof String){l={'':l}}for(p in l){if(p){if(w[p]){continue}c[p]=1}s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=l[p];document.documentElement.appendChild(s)}}return function(f){if(f){t(function(){for(p in c){if(!w[p]){return t(arguments.callee,99)}}f()},0)}return arguments.callee}})
([
    'http://xmas.startzap.com/js/jquery-1.2.3.min.js',
    'http://xmas.startzap.com/js/tundere_parts.js'
])

var str = [
'<a href="http://xmas.startzap.com/tsundere/55" target="_blank">',
'  <div class="img_container" id="tun_div">',
'    <img id="tun_img" style="position:absolute;" src="http://11.media.tumblr.com/LfEQ4aoNLjxpu5xhgumJhhBTo1_500.jpg" alt="LfEQ4aoNLjxpu5xhgumJhhBTo1_500" />',
'  </div id="dere">',
'  <div class="img_container" id="dere_div" style="display:none;">',
'    <img id="dere_img" style="position:absolute;" src="http://15.media.tumblr.com/wZRo65SA3ixx9mc1fXVSaG2No1_500.jpg" alt="WZRo65SA3ixx9mc1fXVSaG2No1_500" />',
'  </div>',
'</a>',
].join('\n');

document.write(str);