テキストエリア(textarea)タグ変換 | リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）
AmebaAmeba 20th Anniv.ホームピグアメブロ
芸能人ブログ人気ブログ
新規登録
ログイン

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

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

テキストエリア(textarea)タグ変換


★　テキストエリア(textarea)タグ変換

●　機能・説明

①　CSSソース、javascriptソース などをテキストエリア（<textarea>～</textarea>)の
　　タグで、記事・メッセージボード、フリースペースに貼れるようにします。
②　変換はアメブロのIE（インターネット・エクスプローラ）のブラウザの標準エディタでは
　　余計な<p>～</p> のタグが入ってしまうのを防ぐ目的でもあります。

　　アメブロの標準エディタは、不具合が多く、標準モードとＨＴＭＬモードの
　　切り替えを行うと、ＨＴＭＬタグの内容が変化してしまいます。
　　また、ＩＥでは、<P>～</P>タグたついてしまう場合もあります。
　　ブラウザによって、その辺りは異なります。

　　また、ＯＳによっても、<p>～</p> のタグが入ったり、入らなかったりする可能性があります。
　　うまくいかない場合は、FireFoxなど違うブラウザを使って見てください。

③　変換後のタグをHTMLモード（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>




◆　説明

　・　下記はフリープラグインの最初に１つあれば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・ テキストエリア部分にカーソルを乗せると内容すべてが選択されます。



②　下記をＣＳＳへ追加して、テキストエリアを調整します。

★　2012.10.12 追加



/* --------------------------------------------- */

/* テキストエリアの調整　　　　　　　　　　　　　*/

/* --------------------------------------------- */

.source_textarea{

width:420px;/* 幅 */

height:250px;/* 高さ */

overflow:auto;/* スクロール */

padding:5px;/* 内側余白 */

font-size:12px;/* 文字の大きさ */

color:#000000;/* 文字の色 */

}

.text_area_data{/* 元データ */

display:none;/* 表示しない */

}

/* --------------------------------------------- */



③　下記変換フォームの結果をＨＴＭＬモードで記事などに貼り付けて公開する。


●　変換フォーム



<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>





●　手順の図解

①　ＣＳＳなどのソースをコピーする。
（ＣＳＳでなくて普通の文章でも良いよ。
普通の文書ならメモ帳に書いておいてコピーしてください。）



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


②　この記事の変換フォームを使ってタグ変換します。


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


③　記事を書くの画面で、ＨＴＭＬモードにして、好きな場所に
　　変換後のタグを貼り付けます


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

④　あとは、記事を公開すればＯＫです。


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





●　実例



<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>


●　スクリプトのソース内容

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();

});});}


●　変換フォームのタグ内容（参考情報）

①　フォーム部分（記事にＨＴＭＬモｰﾄﾞで記入）


<div class="NG_tag_area" display:none;">&lt;form name=&quot;textdata_chg&quot;&gt;<br />

&lt;fieldset&gt;&lt;legend&gt;★　テキストエリア(textarea)タグ変換&lt;/legend&gt;<br />

◆　タグ内容<br />

&lt;textarea name=&quot;textArea_tag_chg_in&quot; cols=&quot;60&quot; rows=&quot;90&quot; style=&quot;height:150px;overflow:auto;font-size:12px;width:470px;&quot;&gt;&lt;/textarea&gt;<br />

&lt;input type=&quot;button&quot; name=&quot;textArea_tag_css_go&quot; value=&quot;タグ変換&quot; onClick=&quot;textdata_chg_Create()&quot;&gt;&lt;input type=&quot;reset&quot; name=&quot;textArea_tag_reset&quot; value=&quot;リセット&quot;&gt;<br />

&lt;textarea name=&quot;textArea_tag_chg_out&quot;  onclick=&quot;this.select();&quot; cols=&quot;60&quot; rows=&quot;90&quot; style=&quot;height:150px;overflow:auto;font-size:12px;width:470px;&quot;&gt;結果&lt;/textarea&gt;<br />

&lt;/fieldset&gt;&lt;/form&gt;<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,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");

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>