★ テキストエリア(textarea)タグ変換
● 機能・説明
① CSSソース、javascriptソース などをテキストエリア(<textarea>~</textarea>)の
タグで、記事・メッセージボード、フリースペースに貼れるようにします。
② 変換はアメブロのIE(インターネット・エクスプローラ)のブラウザの標準エディタでは
余計な<p>~</p> のタグが入ってしまうのを防ぐ目的でもあります。
アメブロの標準エディタは、不具合が多く、標準モードとHTMLモードの
切り替えを行うと、HTMLタグの内容が変化してしまいます。
また、IEでは、<P>~</P>タグたついてしまう場合もあります。
ブラウザによって、その辺りは異なります。
また、OSによっても、<p>~</p> のタグが入ったり、入らなかったりする可能性があります。
うまくいかない場合は、FireFoxなど違うブラウザを使って見てください。
③ 変換後のタグをHTMLモード(HTMLタグを表示をクリック)にして、貼付ければOKです。
標準モード、HTMLモードの切り替えを行っても問題ありません。
また、どちらのモードで投稿してもOKです。
④ 携帯などのモバイル端末では、スクロールバーはつかず表示されます。
● 手順
① フリープラグインに追加
<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">
sc_text_chg('onclick');// onclick or onmouseover
</script>
◆ 説明
・ 下記はフリープラグインの最初に1つあればOKです。
<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>
・ sc_text_chg('onclick');
onclick・・・ テキストエリア部分をクリックすると内容すべてが選択されます。
onmouseover・ テキストエリア部分にカーソルを乗せると内容すべてが選択されます。
② 下記をCSSへ追加して、テキストエリアを調整します。
★ 2012.10.12 追加
/* --------------------------------------------- */
/* テキストエリアの調整 */
/* --------------------------------------------- */
.source_textarea{
width:420px;/* 幅 */
height:250px;/* 高さ */
overflow:auto;/* スクロール */
padding:5px;/* 内側余白 */
font-size:12px;/* 文字の大きさ */
color:#000000;/* 文字の色 */
}
.text_area_data{/* 元データ */
display:none;/* 表示しない */
}
/* --------------------------------------------- */
③ 下記変換フォームの結果をHTMLモードで記事などに貼り付けて公開する。
● 変換フォーム
<form name="textdata_chg">
<fieldset><legend>★ テキストエリア(textarea)タグ変換</legend>
◆ タグ内容
<textarea name="textArea_tag_chg_in" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;"></textarea>
<input type="button" name="textArea_tag_css_go" value="タグ変換" onClick="textdata_chg_Create()"><input type="reset" name="textArea_tag_reset" value="リセット">
<textarea name="textArea_tag_chg_out" onclick="this.select();" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;">結果</textarea>
</fieldset></form>
<fieldset><legend>★ テキストエリア(textarea)タグ変換</legend>
◆ タグ内容
<textarea name="textArea_tag_chg_in" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;"></textarea>
<input type="button" name="textArea_tag_css_go" value="タグ変換" onClick="textdata_chg_Create()"><input type="reset" name="textArea_tag_reset" value="リセット">
<textarea name="textArea_tag_chg_out" onclick="this.select();" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;">結果</textarea>
</fieldset></form>
● 手順の図解
① CSSなどのソースをコピーする。
(CSSでなくて普通の文章でも良いよ。
普通の文書ならメモ帳に書いておいてコピーしてください。)
② この記事の変換フォームを使ってタグ変換します。
③ 記事を書くの画面で、HTMLモードにして、好きな場所に
変換後のタグを貼り付けます
④ あとは、記事を公開すればOKです。
● 実例
<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">
function textdata_chg_Create(){
$(document).ready(function(){
var textArea_tag_in=document.textdata_chg.textArea_tag_chg_in.value;
var textArea_tag_in2=textArea_tag_in.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");
if(navigator.userAgent.indexOf("MSIE") != -1){
var textArea_tag_out=textArea_tag_in2.replace(/\r\n/g,"<BR>\r\n");
}else{
var textArea_tag_out=textArea_tag_in2.replace(/\n/g,"<BR>\n");
}
document.textdata_chg.textArea_tag_chg_out.value='<div class="text_area_data">'+textArea_tag_out+'</div>';
});
}
NG_tag_change('■');
</script>
<script type="text/javascript" src="http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css"></script>
<script type="text/javascript">
function textdata_chg_Create(){
$(document).ready(function(){
var textArea_tag_in=document.textdata_chg.textArea_tag_chg_in.value;
var textArea_tag_in2=textArea_tag_in.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");
if(navigator.userAgent.indexOf("MSIE") != -1){
var textArea_tag_out=textArea_tag_in2.replace(/\r\n/g,"<BR>\r\n");
}else{
var textArea_tag_out=textArea_tag_in2.replace(/\n/g,"<BR>\n");
}
document.textdata_chg.textArea_tag_chg_out.value='<div class="text_area_data">'+textArea_tag_out+'</div>';
});
}
NG_tag_change('■');
</script>
● スクリプトのソース内容
function sc_text_chg(action_p){ // CSSなどを textareaで表示させる
$(document).ready(function(){
$(".text_area_data").each(function(){
$(this).after('<textarea class="source_textarea" readonly '+action_p+'="this.select();">'+
$(this).html().replace(/<br>/g,"").replace(/<BR>/g,"\r\n")+'</textarea>');
$(this).remove();
});});}
● 変換フォームのタグ内容(参考情報)
① フォーム部分(記事にHTMLモードで記入)
<div class="NG_tag_area" display:none;"><form name="textdata_chg"><br />
<fieldset><legend>★ テキストエリア(textarea)タグ変換</legend><br />
◆ タグ内容<br />
<textarea name="textArea_tag_chg_in" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;"></textarea><br />
<input type="button" name="textArea_tag_css_go" value="タグ変換" onClick="textdata_chg_Create()"><input type="reset" name="textArea_tag_reset" value="リセット"><br />
<textarea name="textArea_tag_chg_out" onclick="this.select();" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;">結果</textarea><br />
</fieldset></form><br />
</div>
② スクリプト部分フリープラグインへ追記
<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">
function textdata_chg_Create(){
$(document).ready(function(){
var textArea_tag_in=document.textdata_chg.textArea_tag_chg_in.value;
var textArea_tag_in2=textArea_tag_in.replace(/</g,"<").replace(/>/g,">").replace(/"/g,""");
if(navigator.userAgent.indexOf("MSIE") != -1){
var textArea_tag_out=textArea_tag_in2.replace(/\r\n/g,"<BR>\r\n");
}else{
var textArea_tag_out=textArea_tag_in2.replace(/\n/g,"<BR>\n");
}
document.textdata_chg.textArea_tag_chg_out.value='<div class="text_area_data">'+textArea_tag_out+'</div>';
});
}
NG_tag_change('■');
</script>