【※追記あり】サイドバーのプロフィール欄にツイッターとなうのボタンを追加する | blog lab 【アメブロカスタマイズとネタ話】

blog lab 【アメブロカスタマイズとネタ話】

コメント欄にプロフィール画像、などのカスタマイズの小ネタと、普段の話のネタを書いていきます。

blog lab


書こう書こうと思いつつすっかり忘れていたのですが、リクエストがありましたので公開してみます。
といっても超簡単にできますのでサクっと説明したいと思います。
jQueryに依存していますので、導入していない方はこちらの記事を参考に導入してみてください。

ではいってみましょう!
まずはフリープラグインから。

※追記1
リンク先が自分のIDのままでしたので、わかりやすく修正しました。

<script type="text/javascript">
(function($){
$(function(){
var myID = location.pathname.split('/')[1];
var myTwitterID = 'あなたのツイッターID';
$('ul.profileBtnArea:eq(0)').append('<li><a class="readerBtn skinImgBtnS" id="profileTwitterBtn" href="http://twitter.com/'+myTwitterID+'/"><span>twitter\u3092\u30d5\u30a9\u30ed\u30fc</span></a></li><li><a id="nowFollowBtn" class="amemberBtn skinImgBtnS" href="http://now.ameba.jp/'+myID+'"><span>\u306a\u3046\u3092\u30d5\u30a9\u30ed\u30fc</span></a></li>');
});
}(jQuery));
</script>

次にCSS。
#profileTwitterBtn span{
padding-left:18px;
background:url(http://stat001.ameba.jp/user_images/20110915/16/blog-lab/a2/69/p/t00160016_0016001611484559288.png) 0px 5px no-repeat;
}

#nowFollowBtn span{
padding-left:22px;
background:url(http://stat001.ameba.jp/user_images/20110915/22/blog-lab/b9/81/p/t00210015_0021001511485367355.png) 0px 6px no-repeat;
}

これで完成です。簡単でしょ?
さぁ、レッツトライ!