ついったーのBlogパーツでjavascriptを使っている方でデザインの変更をしたい方へのTips
<はてなグループの日記よりコピペ>
ついったー公式よりjavascriptを使ったBlogパーツを貼っていたのですが、
どうもデザイン的にしっくりとこないなと思うところがありました。
各更新ごとに「・」が勝手についてしまうんですよね。
何とかして消したいと思ってイロイロやったら出来たのでチラシの裏的に書き残しておこうかと。
ついったーより「コレを使え」と渡されたBlogパーツ用コードにはこんなことが書いてます。
<div id="twitter_div"> <h2 class="twitter-title">Twitter Updates</h2> <ul id="twitter_update_list"></ul></div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script text="text/javascript" src="http://twitter.com/statuses/user_timeline/ 「あなたのユーザID」?callback=twitterCallback2&count=5"></script>
描画時にjsを読み込んでいるのですが、コイツがhtmlを生成しています。
コイツの記述の中にリストタグがいるのが原因のようです。(リストタグについて)
実際のソースは下記アドレスから参照できるかと思います。
http://twitter.com/javascripts/blogger.js
対策法ですが、とりあえずjsの中身にあるtwitterCallback2で使用するリストタグを
取り払ったjsファイルを自分のWebページに乗っけて、自分のWebページのjsを読むように
Blogパーツ側も変更してみました。
↓こんなかんじ(各Twitごとにhrタグでボーダー引いてます)
function twitterCallback2(obj) { var twitters = obj; var statusHTML = ""; var username = ""; for (var i=0; i<twitters.length; i++){ username = twitters[i].user.screen_name statusHTML += ('<div style="font-size:85% "><span>'+twitters[i].text+'</span></div> <div align="right"><a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id+'">'+relative_time(twitters[i].created_at)+'</a> </div><hr border="1">') } document.getElementById('twitter_update_list').innerHTML = statusHTML; } function relative_time(time_value) { var values = time_value.split(" "); time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3]; var parsed_date = Date.parse(time_value); var relative_to = (arguments.length > 1) ? arguments[1] : new Date(); var delta = parseInt((relative_to.getTime() - parsed_date) / 1000); delta = delta + (relative_to.getTimezoneOffset() * 60); if (delta < 60) { return 'less than a minute ago'; } else if(delta < 120) { return 'about a minute ago'; } else if(delta < (60*60)) { return (parseInt(delta / 60)).toString() + ' minutes ago'; } else if(delta < (120*60)) { return 'about an hour ago'; } else if(delta < (24*60*60)) { return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago'; } else if(delta < (48*60*60)) { return '1 day ago'; } else { return (parseInt(delta / 86400)).toString() + ' days ago'; } }
(横に長くなっちゃってて申し訳ないです)
jsファイルをアップロードするのが大変な場合は下記アドレスを参考にするとイイかもしれません。
っていうか多分コッチの方がやりやすいかもしれないなぁ。(jsファイル不要だし)