● 内容
① 私のブログの様にコメント欄にＣＳＳなどのソースを表示して、そのソース部分を
ダブルクリックするとテキストエリアが表示されコピーできる機能を紹介します。
② その他の機能として、コメント欄に表示できる機能として下記があります。
・ 文字の色を変える。
・ 文字の大きさを変える。
・ 動画(YouTube)を表示する
・ 画像を表示する。
・ リンクを表示する。
下記がこれらの記事で、以前に紹介しています。
コメントに画像・動画・絵文字・文字色などを表示する
③ テキストエリアの前にに説明文を載せることができます。
④ ＩＥのブラウザの場合はコピーボタンが表示され、クリップボードにテキストエリアの
内容をコピーできます。
⑤ 表示例
● やり方
① 下記をフリープラグインへ追加します。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type='text/javascript'>
$(document).ready(function(){
comment_change_fn();
setTimeout('waku_comment()',3000);
comment_Explanation('下記をタブルクリックするとテキストエリアに変わります。','http://stat.ameba.jp/blog/ucs/img/char/char2/175.gif');
});
</script>
■ 説明
・ 下記はフリープラグインに既にあれば、不要です。
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
・ setTimeout('waku_comment()',2000);
2000 は 2秒の意味です。前のcomment_change_fn();の関数とのタイミングを
計っています。
秒数は調整してください。
・ setTimeout('comment_Explanation("下記をタブルクリックするとテキストエリアに変わります。","http://stat.ameba.jp/blog/ucs/img/char/char2/175.gif")',2000);
2000 は 2秒の意味です。前のcomment_change_fn();の関数とのタイミングを
計っています。
秒数は調整してください。
下記をタブルクリックするとテキストエリアに変わります。 メッセージです。
調整してください。
http://stat.ameba.jp/blog/ucs/img/char/char2/175.gif 画像です。
メッセージの前につきます。下記画像です。
調整してください。
② ＣＳＳの一番下に下記を追加する。
/* ------------------------------------------------------- */
/* 枠 (コメント版） */
/* ------------------------------------------------------- */
.waku_comment{ /* コメント枠 */
background-color:#cccccc;/* 背景色 */
font-family: "ＭＳ ゴシック",sans-serif;
padding:10px; /* 内側余白 */
font-size:12px; /* 文字の大きさ */
color:#000000; /* 文字の色 */
border-radius: 5px; /* CSS3角丸 */
-moz-border-radius: 5px; /* Firefox角丸 */
-webkit-border-radius: 5px;/* Safari、Google Chrome角丸 */
}
.waku01_textarea{/* ダブルクリックしたときのテキスト部分 */
width:99%; /* 幅 */
height:150px; /* 高さ */
overflow:auto; /* スクロール */
padding:5px; /* 内側余白 */
font-size:12px; /* 文字の大きさ */
color:#000000; /* 文字の色 */
}
a.waku01_bk_btn{ /* 戻すボタン */
color:#ff0000; /* 文字の色 */
font-size:14px; /* 文字の大きさ */
background-color:#ff99ff;/* 背景色 */
border-radius:6px; /* CSS3角丸 */
padding:5px; /* 内側余白 */
position:relative; /* 相対配置 */
top:10px; /* 上からの位置 */
font-weight:bold; /* 文字の太さ */
margin-bottom:30px !important;
display:block;
width:85px; /* 幅 */
height:22px; /* 高さ */
text-align:center; /* 文字の中央寄 */
}
a.waku01_bk_btn:hover{ /* 戻すボタン カーソルを乗せたとき */
text-decoration:none; /* アンダーライン */
color:#000000; /* 文字色 */
background-color:#77ff77;/* 背景色 */
}
.waku01_Explanation{/* ダブルクリックによる枠のテキストエリア化の説明文 */
font-family:HG創英角ﾎﾟｯﾌﾟ体;
color:#0000ff; /* 文字色 */
font-size:14px;/* 文字の大きさ */
}
a.waku01_cp_btn{ /* コピーボタン(IE) */
color:#ff0000; /* 文字色 */
font-size:14px; /* 文字の大きさ */
background-color:#0099ff;/* 背景色 */
border-radius:6px; /* CSS3角丸 */
padding:5px; /* 内側余白 */
position:relative; /* 相対配置 */
font-weight:bold; /* 文字の太さ */
display:block;
width:85px; /* 幅 */
text-align:center; /* 文字の中央寄 */
height:22px; /* 高さ */
top:-69px; /* 上からの位置 */
left:110px; /* 左からの位置 */
}
a.waku01_cp_btn:hover{ /* コピーボタン(IE) カーソルを乗せたとき */
text-decoration:none; /* アンダーライン */
color:#000000; /* 文字色 */
background-color:#77ff77;/* 背景色 */
}
/* ------------------------------------------------------- */
● コメント欄への記述方法
① ％枠％と％閉％で囲みます。（％は、全角です）
％枠％
ＣＳＳなどテキスト部分
：
：
ＣＳＳなどテキスト部分
％閉％
② リンクの場合は、下記です。
★はリンク先のＵＲＬ。■はリンクしたい文字です。
％リ％★％ン％■％ク％
③ 画像の場合は、下記です。
●は画像のＵＲＬです。
％画％●％像％
・画像幅をはみ出さないようにするには、下記ＣＳＳをＣＳＳの一番下に追加してください。
（500pxは調整してください）
.commentBody img{/* コメント本文画像 */max-width:500px;/* 最大の幅 */}
④ 文字の色の場合は、下記です。
色は、赤、青、緑、桃、黄、黒があります。
％赤％文章％色％
％青％文章％色％
％緑％文章％色％
％桃％文章％色％
％黄％文章％色％
％黒％文章％色％
⑤ 文字サイズの場合は下記です。
文字サイズは１～７を指定できます。
％１％文章％文％
％２％文章％文％
％３％文章％文％
％４％文章％文％
％５％文章％文％
％６％文章％文％
％７％文章％文％
⑥ 絵文字の場合は下記です。
％❤％
％！％
％汗％
％音％
％合％
％目％
％下％
％爆％
％叫％
％？％
⑦ 動画の場合は下記です。
★はYouTube埋め込みコードのＵＲＬ(href)の部分です。
％動Ｓ％★％動Ｅ％
● ソースコード
function comment_change_fn(){// コメント表示チェンジ
$(document).ready(function(){
$(".commentBody").each(function (e) {
var html_dt=$(this).html();
html_dt = html_dt.replace(/％赤％/g, "<font color='red'>");
html_dt = html_dt.replace(/％青％/g, "<font color='blue'>");
html_dt = html_dt.replace(/％緑％/g, "<font color='green'>");
html_dt = html_dt.replace(/％桃％/g, "<font color='pink'>");
html_dt = html_dt.replace(/％黄％/g, "<font color='yellow'>");
html_dt = html_dt.replace(/％黒％/g, "<font color='black'>");
html_dt = html_dt.replace(/％色％/g, "</font>");
html_dt = html_dt.replace(/％１％/g, "<font size='1'>");
html_dt = html_dt.replace(/％２％/g, "<font size='2'>");
html_dt = html_dt.replace(/％３％/g, "<font size='3'>");
html_dt = html_dt.replace(/％４％/g, "<font size='4'>");
html_dt = html_dt.replace(/％５％/g, "<font size='5'>");
html_dt = html_dt.replace(/％６％/g, "<font size='6'>");
html_dt = html_dt.replace(/％７％/g, "<font size='7'>");
html_dt = html_dt.replace(/％文％/g, "</font>");
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/028.gif'>");
html_dt = html_dt.replace(/％音％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/038.gif'>");
html_dt = html_dt.replace(/％合％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/304.gif'>");
html_dt = html_dt.replace(/％目％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/242.gif'>");
html_dt = html_dt.replace(/％下％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/175.gif'>");
html_dt = html_dt.replace(/％爆％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/036.gif'>");
html_dt = html_dt.replace(/％叫％/g, "<img src='http://stat.ameba.jp/blog/ucs/img/char/char2/254.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, "<a href='");
html_dt = html_dt.replace(/％ン％/g, "'>");
html_dt = html_dt.replace(/％ク％/g, "</a>");
html_dt = html_dt.replace(/％動Ｓ％/g, '<embed src="');
html_dt = html_dt.replace(/％動Ｅ％/g, '" width="350" height="250">');
html_dt = html_dt.replace(/％枠％/g, "<div class='waku_comment'>");
html_dt = html_dt.replace(/％閉％/g, "</div>");
$(this).html(html_dt);
});});
}
function waku_comment(){// ダブルクリックによる枠のテキストエリア化(コメント編)
$(".waku_comment").dblclick(function(){
var action_p="onmouseover";
if(navigator.userAgent.indexOf("MSIE") != -1){
$(this).after('<textarea class="waku01_textarea" readonly '+action_p+'="this.select();">'+
$(this).html().replace(/<br>/g,"").replace(/<BR>/g,"\r\n").replace(/<\/?[^>]+>/gi, "")+
'</textarea>'+
'<br><a href="java'+'script:void(0)" class="waku01_bk_btn" onclick="waku01_back_IE(this);">元に戻す</a> <a href="java'+'script:void(0)" class="waku01_cp_btn" onclick="copy_textarea(this);">コピー</a>');
}else{
$(this).after('<textarea class="waku01_textarea" readonly '+action_p+'="this.select();">'+
$(this).html().replace(/<BR>/g,"\n").replace(/<br>/g,"\n").replace(/\n\n\n/g,"").replace(/\n\n/g,"\n").replace(/<\/?[^>]+>/gi, "")+
'</textarea>'+
'<br><a href="java'+'script:void(0)" class="waku01_bk_btn" onclick="waku01_back(this);">元に戻す</a>');
}
$(this).css("display","none");
});
}
function waku01_back(sel01){
$(sel01).prev().prev().remove();
$(sel01).prev().remove();
$(sel01).prev().css("display","block");
$(sel01).remove();
}
function waku01_back_IE(sel01){
$(sel01).prev().prev().remove();
$(sel01).prev().remove();
$(sel01).prev().css("display","block");
$(sel01).next().remove();
$(sel01).remove();
}
function copy_textarea(sel02){
window.clipboardData.setData("text",$(sel02).prev().prev().prev().text());
}
function comment_Explanation(Explanations,images){// ダブルクリックによる枠のテキストエリア化の説明文
$(".waku_comment").each(function(){
$(this).before('<div class="waku01_Explanation" title="コピーが容易になります。利用してください。"><img src="'+images+'">'+Explanations+'</div>');
});
}