コメント欄にルームのプロフ画像を表示するプラグインを作りました
photo credit: smemon87http://farm5.static.flickr.com/4035/4670117256_c3fd4d145c_s.jpg
※現在受付を中断しております。
再開する時はまたブログ、なうにてお知らせします！
前回の記事で開発を進めていたコメント欄の画像表示ですが、完成したので公開したいと思います。
自前で設置するにはサーバーを準備する必要があるので、ウチのサーバーに設置したものをプラグインとして公開します。
方法については（大したことはしてないんですが）、希望があればソースを載せてみようと思います。
※すっかり忘れていたprototype.jsとの相性問題を解決 アップデート済
※firefoxのみ未対応と発覚。現在作業中デス
※firefox対応完了。
※当面のバグフィックス全て完了
※コメント欄の背景に画像を使っている方用のコードを作ってみました。
※利用登録、1日あたり10人程度を目安にしております。サーバーの様子を見つつ、という感じです。ご了承ください～
※アメンバー限定記事には使用できません。これはアメーバ側の仕様です。
こんな感じの表示になります。
ぐるっぽの掲示板的な感じですね。
で、使い方なんですが、ちょっとサーバー的な事情がありまして。。。
始めのうちは、「使いたいんですけどー」っていう感じで申請してくれた人に公開しようかなと思っています。
未承認のままプラグインを貼るとアラートが出ますので、ご了承ください・・・。
申請→承認されて初めて使用できます！
今後は使用希望の申請はこちらまでおねがいします！
http://ameblo.jp/meat18/entry-10569338210.html
不具合報告はこちらに
http://ameblo.jp/meat18/entry-10569338840.html
こちら以外の書き込みだと見逃すor忘れてしまうかもしれますん・・・
ちょっと整理つかなくなってきたので、ご協力をｗ
申請が承認された方は、フリープラグインに以下のように貼り付けてください。
※373番以降に申請した方は、以前と貼りかたが異なります。
373番以前に申請した方は、以下のように貼りつけてください。
●背景に画像を使用していない方
<link rel="stylesheet" href="http://navi-map.info/com_thumb/com_thumb_light.css" type="text/css"/>
<script type="text/javascript" src="http://navi-map.info/com_thumb/comment_thumbnail_light.js"></script>
<script type="text/javascript" src="http://navi-map.info/com_thumb/comment_thumbnail_light.js"></script>
●背景に画像を使用している方
まずCSS
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
#comment_module .admin_comment .prfphoto{
float:left;
margin-top:10px;/*管理者コメントの写真の縦位置を調整*/
left:10px;/*管理者コメントの写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
.prfphoto img{
margin:21px;
}
#comment_module .comment_body{
padding-left:100px;/*コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .comment_body{
padding-left:100px;/*管理者コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*管理者コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .label{
padding-left:100px;/*コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .label{
padding-left:100px;/*管理者コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*管理者コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .comment_footer{
clear:left;
}
次にフリープラグイン
<script type="text/javascript" src="http://navi-map.info/com_thumb/comment_thumbnail_imgbg.js"></script>
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
#comment_module .admin_comment .prfphoto{
float:left;
margin-top:10px;/*管理者コメントの写真の縦位置を調整*/
left:10px;/*管理者コメントの写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
.prfphoto img{
margin:21px;
}
#comment_module .comment_body{
padding-left:100px;/*コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .comment_body{
padding-left:100px;/*管理者コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*管理者コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .label{
padding-left:100px;/*コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .label{
padding-left:100px;/*管理者コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*管理者コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .comment_footer{
clear:left;
}
次にフリープラグイン
<script type="text/javascript" src="http://navi-map.info/com_thumb/comment_thumbnail_imgbg.js"></script>
374番以降に申請した方は、以下のように貼りつけてください。
●背景に画像を使用していない方
<link rel="stylesheet" href="http://navi-map.info/com_thumb/com_thumb_light.css" type="text/css"/>
<script type="text/javascript" src="http://navi-map.info/com_thumb/2/comment_thumbnail_light.js"></script>
<script type="text/javascript" src="http://navi-map.info/com_thumb/2/comment_thumbnail_light.js"></script>
●背景に画像を使用している方
まずCSS
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
#comment_module .admin_comment .prfphoto{
float:left;
margin-top:10px;/*管理者コメントの写真の縦位置を調整*/
left:10px;/*管理者コメントの写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
.prfphoto img{
margin:21px;
}
#comment_module .comment_body{
padding-left:100px;/*コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .comment_body{
padding-left:100px;/*管理者コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*管理者コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .label{
padding-left:100px;/*コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .label{
padding-left:100px;/*管理者コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*管理者コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .comment_footer{
clear:left;
}
次にフリープラグイン
<script type="text/javascript" src="http://navi-map.info/com_thumb/2/comment_thumbnail_imgbg.js"></script>
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
#comment_module .admin_comment .prfphoto{
float:left;
margin-top:10px;/*管理者コメントの写真の縦位置を調整*/
left:10px;/*管理者コメントの写真の横位置を調整*/
width:75px;
position:absolute;
overflow:hidden;
margin-right:5px;
margin-bottom:5px;
border:dotted 2px #ddd;
background:#FFFFFF;
}
.prfphoto img{
margin:21px;
}
#comment_module .comment_body{
padding-left:100px;/*コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .comment_body{
padding-left:100px;/*管理者コメント本文の位置(数字を増やすと右に寄ります)*/
padding-right:0px;/*管理者コメント本文が右にはみ出る場合は数値を上げてください*/
}
#comment_module .label{
padding-left:100px;/*コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .admin_comment .label{
padding-left:100px;/*管理者コメントタイトルの位置(数字を増やすと右に寄ります)*/
padding-right:20px;/*管理者コメントタイトルが右にはみ出る場合は数値を上げてください*/
}
#comment_module .comment_footer{
clear:left;
}
次にフリープラグイン
<script type="text/javascript" src="http://navi-map.info/com_thumb/2/comment_thumbnail_imgbg.js"></script>
これでOKです！
現在コメレス400番の方まで承認しております。
今後は申請スレの方で申請お願いします。
※追記
先にもコメントした通り、次の承認は少し先になるかもしれません。
パフォーマンスが落ちてきていますので、何らかの改善策を考えているところです。
ご了承ください。