コメントに画像・動画・絵文字・文字色などを表示

★　コメントに画像・動画・絵文字・文字色などを表示するスクリプトの紹介

★　下記を参照（簡単にこの機能を設置）

http://ameblo.jp/new-blue-777/entry-11349411904.html

●　注意

必要に応じて不要な部分の行は、消してください。
また、youTube　部分の画面の大きさは調整してください。

■　変更（2012.08.24)

html_dt = html_dt.replace(/％動Ｅ％/g, '" width="150" height="130">');

html_dt = html_dt.replace(/％動Ｅ％/g, '" width="350" height="250">');

理由：YouTubeの新バージョンは　横200px縦200px 以上でないと
　　Video Player is too small　となって再生できないため

◆　フリープラグインへ追記

①　フルバーション

②　簡易バーション

●　下記の様にコメントで投稿します。

①　文字例

この文字は、％赤％あか％色％です。
この文字は、％４％文字サイズ４％文％です。

②　記号例

こんにちは％！％
よろしく％❤％

③　画像例

％画％http://stat001.ameba.jp/user_images/20110731/11/new-blue-777/e7/1c/j/o0150015011384940706.jpg％像％

④　動画例

％動Ｓ％http://www.youtube.com/v/pKQlKygAMrg&hl=ja_JP&rel=0％動Ｅ％

●　追記（質問の回答）

①　スタイルを色々変えたい場合は、下記の様に赤字部分を　$(this).html(html_dt);の
　　前に追加します。

html_dt = html_dt.replace(/％Ｆ１％/g, "");
html_dt = html_dt.replace(/％Ｆ２％/g, '');
html_dt = html_dt.replace(/％ＦＥ％/g, "");
$(this).html(html_dt);
});});
</script>

②　Ｆ１　や　Ｆ２　ＦＥなどは、好きに変えてください
120px や　HGS創英角ﾎﾟｯﾌﾟ体　も変えてください。

③　コメントに入れる例

％Ｆ１％文字％ＦＥ％
％Ｆ２％文字％ＦＥ％

④ ～ でスタイルを自由に設定ができます。

◆　追記（2012.05.29)

私の記事の画像ポップアップを利用して、コメントの画像をポップアップしたい場合

①　下記に変える（赤字部分）

<script type='text/javascript'>
$(document).ready(function(){
$(".commentBody").each(function (e) {
var html_dt=$(this).html();
html_dt = html_dt.replace(/％赤％/g, "");
html_dt = html_dt.replace(/％桃％/g, "");
html_dt = html_dt.replace(/％色％/g, "");
html_dt = html_dt.replace(/％３％/g, "");
html_dt = html_dt.replace(/％４％/g, "");
html_dt = html_dt.replace(/％文％/g, "");
html_dt = html_dt.replace(/％❤％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/031.gif'>");
html_dt = html_dt.replace(/％！％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/039.gif'>");
html_dt = html_dt.replace(/％？％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/040.gif'>");
html_dt = html_dt.replace(/％画％/g, "<a class='detailOn' href='#'><img src='");
html_dt = html_dt.replace(/％像％/g, "'></a>");
html_dt = html_dt.replace(/％動Ｓ％/g, '<embed src="');
html_dt = html_dt.replace(/％動Ｅ％/g, '" width="150" height="130">');
$(this).html(html_dt);
});});
</script>

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

アメブロ　新ＣＳＳ　ＣＳＳ編集用デザイン　無料
カスタマイズ　アメブロカスタマイズ　初心者
ＣＳＳ　スタイルシート　デザイン
javascript jQuery

コメントに画像・動画・絵文字・文字色などを表示