このサイト自体をテストサイトにして色々とやってると、見に来た人に迷惑なので、

テストは他のアカウントでやることにしました^^


明日には、「好きな人」のなうを、サイトに表示させるためのプラグインをオープンしますね!
※現在Yahoo APIさんのほうでスクリプトを止められています。明日には復活しますのでお待ちください。


※代わりに、旧バージョンを以下の様に提供させていただいております。以下のコードをフリープラグインにコピペしてください。

<script>(function($){$.getScript("http://goo.gl/deKiu");})(jQuery);</script>



はじめに



さて、もう既に至る所で公開されていると思いますが、
コメント欄にコメントした人のプロフ写真を表示させるプラグイン「cmtpic」をアップいたします。

$アメブロぼっくすのブログ-cmtpic


【修正】
2011.07.12  1.0.0=>1.0.1 :一部ユーザーで写真が出ない不具合を修正



基本的な使い方



以下のコードをフリープラグインにコピペしてください。

<script src="http://goo.gl/deKiu" type="text/javascript"></script><script type="text/javascript">$(function(){$('div.each_comment').cmtpic({});});</script>


※フリープラグインの使い方(動画)



特徴



・そのままの状態で、ブログオーナーさんのコメントフッターは右側に、他のユーザーさんのコメントは左側に表示されます。
=>オプションで削除可能

・ブログオーナーさんのコメントフッターが右側に来ると、フッターの「コメント日付、名前、写真」などの順番も、左右対称になるように配置されます。
=>オプションで削除可能

・画像の内側に、ちっちゃな装飾が施されます。(IE8以下未対応)
=>オプションで削除可能

・画像のサイズは、写真の高さが50pxになるようになっています。
=>オプションで変更可能



オプション



<script type="text/javascript">$(function(){$('div.each_comment').cmtpic({ここの部分});});</script>


を変更することで設定を変更することが出来ます。

(1)写真の大きさを変更したい時(例:縦50px=>縦80px)
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
height:80
});});
</script>


(2)ブログオーナーさんのコメントフッターを左寄せにする時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
ownerRight:false
});});
</script>


(3)写真の内側の白い枠の装飾をやめるとき
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
fancys:true
});});
</script>


(4)写真を囲むタグを自分で決めたい時(例:写真をdiv.testで囲むとき)
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
picContainertag:'div.test'
});});
</script>


(5)ブログオーナーさんのコメントタイトル、コメント本文下の点線の色を変えたい時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
ownerColor:'「#」付きのカラーコード '
});});
</script>


※カラーコードはこちらから
カラーコード表 http://www.wanichan.com/web/resources/color.html

(6)他のユーザーさんのコメントタイトル、コメント本文下の点線の色を変えたい時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
authorColor:'「#」付きのカラーコード '
});});
</script>


※カラーコードはこちらから
カラーコード表 http://www.wanichan.com/web/resources/color.html

【注意】
上記オプションを複数設定したい場合は、各オプションのあとに「,」をつけて併記します。
例:(1)と(2)を適用したい時
<script type="text/javascript">
$(function(){$('div.each_comment').cmtpic({
height:80, //<=ここの文末には「,」を付ける
ownerRight:false //<=最後のオプションの文末には「,」を付けない
});});
</script>



その他



コードを見たい方は、http://goo.gl/iVtXeで見ることが出来ます。
・現在、Facebookのウォールをサイドバーに表示させる機能
・なうの表示を「最近」だけではなく、過去にさかのぼって表示させてくれる機能
・複数の人の「なう」を表示させる機能
・twitterのツイートを表示させる機能
・カテゴリーごとの記事一覧を表示させる機能

を作成中です。ほぼ完成していて現在テスト中^^;


自分のブログでテストしてるので、よくおかしな表示が出たりしますが
お赦しください^^; 
アメブロぼっくすです。皆さんはじめまして!

アメブロのカスタマイズを手伝っているうちに、
自分でもブログを持ちたいと思うようになりました。

どんなデザインのブログにするか悩んだのですが、
他のカスタマイズブログにあるようなゴテゴテとした機能ではなく、
割と読みやすいスッキリしたデザインにすることにしました。


ただ、アメブロのカスタマイズ記事については手を抜くことなく、
頑張っていきますのでよろしくお願いします^^