コメント欄にプロフィール画像を載せる
みけねこさんのブログ
で紹介されていました。
コメント欄にプロフィール画像を載せる方法です。
設置は簡単。ハピブロでは、コメントごとに枠を付ける方法をご紹介します。
赤い部分を編集し、以下の文をフリープラグインに貼り付けてください。
－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript" src="http://amebaplugin.appspot.com/dispprof2.jsp?id=あなたのアメーバＩＤ&selfphoto=あなたのプロフィール画像のＵＲＬ&background=FFFF00&margin=20&padding=30&border-width=20&border-style=dotted&border-color=000000&photoframe-color=FF0000&size=80"></script>
－－－－－－－－－－－－－－－－－－－－－－－－－
（参考）
margin ・・・ コメントの枠の外の余白
padding ・・・ コメントの枠の中の余白（枠からコメントまでの幅）
border-width ・・・ 枠の太さ
border-style ・・・ 枠の種類
(solid,double,groove,ridge,inset,outset,dashed,dotted)
border-color ・・・ 枠の色
background ・・・ 背景の色
photoframe-color ・・・ プロフ画像の枠の色（&photoframe-color=○○をつけなければ枠なし）
size ・・・ プロフ画像のサイズの最大値(px)
－－－－－－－－－－－－－－－－－－－－－－－－－
画像のサイズを大きくしたり、コメント欄枠の線を太くすることが可能です。
ちなみにハピブロの場合は以下の文章で実行しています。
－－－－－－－－－－－－－－－－－－－－－－－－－
<!-- コメント欄にプロフィール画像 ここから-->
<script type="text/javascript" src="http://commentplugin4.appspot.com/dispprof2.jsp?id=hapico1173&selfphoto=http://stat.profile.ameba.jp/profile_images/20100224/21/ff/9f/j/o021502181267015513954.jpg&background=FFFFE0&margin=20&padding=10&border-width=2&border-style=double&border-color=FFA500&photoframe-color=FF0000&size=80"></script>
<!-- コメント欄にプロフィール画像 ここまで-->
－－－－－－－－－－－－－－－－－－－－－－－－
通常の作業はこれでおしまいです。以下はさらにカスタマイズしたい場合です。
といってもハピ自身、うまく動作していません。
というのも、ハピはプロフィール画像をコメント欄の左側に表示させたいのですが、方法がわかりません。
ミートくんのブログで使用していたCSSなどを参考にやってみたのですがわかりませんでした。
どなたかわかる方がいらっしゃいましたら教えてください。
（方法）
方法は最初にご説明したものと同じです。
１．フリープラグインに文章を貼り付けます。
２．次にCSSに以下の文章を貼り付けました。これにより、コメント本文は右に寄ります。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:85px;
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:85px;
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;
}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
画像の位置はみけねこさんのjavaファイルにより、移動できないようになっているのかしら？
プロフィール画像の位置なんてどこでもよくね？ｗと思われるかもしれませんが、自分がこうしたかった！という要望を忘れないために、お恥ずかしい話ですが記録に残しておきます。
長々とありがとうございました。m(_ _)m
コメント欄にプロフィール画像を載せる方法です。
設置は簡単。ハピブロでは、コメントごとに枠を付ける方法をご紹介します。
赤い部分を編集し、以下の文をフリープラグインに貼り付けてください。
－－－－－－－－－－－－－－－－－－－－－－－－－
<script type="text/javascript" src="http://amebaplugin.appspot.com/dispprof2.jsp?id=あなたのアメーバＩＤ&selfphoto=あなたのプロフィール画像のＵＲＬ&background=FFFF00&margin=20&padding=30&border-width=20&border-style=dotted&border-color=000000&photoframe-color=FF0000&size=80"></script>
－－－－－－－－－－－－－－－－－－－－－－－－－
（参考）
margin ・・・ コメントの枠の外の余白
padding ・・・ コメントの枠の中の余白（枠からコメントまでの幅）
border-width ・・・ 枠の太さ
border-style ・・・ 枠の種類
(solid,double,groove,ridge,inset,outset,dashed,dotted)
border-color ・・・ 枠の色
background ・・・ 背景の色
photoframe-color ・・・ プロフ画像の枠の色（&photoframe-color=○○をつけなければ枠なし）
size ・・・ プロフ画像のサイズの最大値(px)
－－－－－－－－－－－－－－－－－－－－－－－－－
画像のサイズを大きくしたり、コメント欄枠の線を太くすることが可能です。
ちなみにハピブロの場合は以下の文章で実行しています。
－－－－－－－－－－－－－－－－－－－－－－－－－
<!-- コメント欄にプロフィール画像 ここから-->
<script type="text/javascript" src="http://commentplugin4.appspot.com/dispprof2.jsp?id=hapico1173&selfphoto=http://stat.profile.ameba.jp/profile_images/20100224/21/ff/9f/j/o021502181267015513954.jpg&background=FFFFE0&margin=20&padding=10&border-width=2&border-style=double&border-color=FFA500&photoframe-color=FF0000&size=80"></script>
<!-- コメント欄にプロフィール画像 ここまで-->
－－－－－－－－－－－－－－－－－－－－－－－－
通常の作業はこれでおしまいです。以下はさらにカスタマイズしたい場合です。
といってもハピ自身、うまく動作していません。
というのも、ハピはプロフィール画像をコメント欄の左側に表示させたいのですが、方法がわかりません。
ミートくんのブログで使用していたCSSなどを参考にやってみたのですがわかりませんでした。
どなたかわかる方がいらっしゃいましたら教えてください。
（方法）
方法は最初にご説明したものと同じです。
１．フリープラグインに文章を貼り付けます。
２．次にCSSに以下の文章を貼り付けました。これにより、コメント本文は右に寄ります。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:85px;
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:85px;
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;
}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
画像の位置はみけねこさんのjavaファイルにより、移動できないようになっているのかしら？
プロフィール画像の位置なんてどこでもよくね？ｗと思われるかもしれませんが、自分がこうしたかった！という要望を忘れないために、お恥ずかしい話ですが記録に残しておきます。
長々とありがとうございました。m(_ _)m
【CSS】コメント欄に画像を載せる（備忘録）
※備忘録
アメーバブログコメント欄にプロフィール画像を載せる方法。
以前はミートくんのブログで紹介していたが、最近は動作しなくなっていた。
以前の方法をまとめる。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
１）フリープラグインに以下の文を追加。保存。
<script type="text/javascript" src="http://navi-map.info/com_thumb/2/comment_thumbnail_imgbg.js"></script>
※注意 現在は動作しません。
２）CSSに以下の文を追加。保存。
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:85px;
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:85px;
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>
※注意 現在は動作しません。
２）CSSに以下の文を追加。保存。
#comment_module {
position:relative;
}
.prfphoto{
float:left;
margin-top:10px;/*写真の縦位置を調整*/
left:10px;/*写真の横位置を調整*/
width:85px;
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:85px;
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;
}
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
コメント欄、プロフィール画像の横に、投稿したコメントが表示される。
ブーシュカからのプレゼント
ブーシュカからプレゼントが届きました。
パソコンからは受け取れません。携帯で受け取ってね、とのことです。
ハピはやっていないので微妙な心境です。
しかもハピの携帯はブーシュカに対応しているのかわからない。（5年前の携帯なので。）
ブーシュカをやっている方には嬉しいプレゼントですね。ヾ(*´∀`*)ﾉ ｷｬｯｷｬｯ