記事・メッセージボード・フリースペースの禁止タグを防ぐ | リアナのカスタマイズ日記(CSS編集用デザイン)

リアナのカスタマイズ日記(CSS編集用デザイン)

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


★ 記事・メッセージボード・フリースペースの禁止タグを防ぐ
javascriptは除く・・・但しダグ内に含まれているものは可能)


● ちゃんと動かない、わからない場合は、コメントで質問してください。
  テスト不足の場合があるため、すべてのタグには対応して
  いません。



★ 記事にタグを貼る場合は必ず、標準エディタまたはタグ編集エディタを使ってください。
  新エディタでは、エディタ側で強制的に内容を変えてしまうので、タグを入れられません。




● 機能

① メッセージボードや記事で禁止タグになるコードを入れられる様にします。
② バナー紹介タグなどを記事、メッセージボードに入れられます。
③ 携帯にはタグを表示しないようにできます。
④ 改行を入れたい場合は、を利用します。
  は、自由に別の文字に変えられます。あまり使われない文字を
  指定してください。
  (変換用の画面フォームを利用した場合は、何もする必要はありません)
⑤ フリースペースの禁止タグを防ぐためには、タグの変換が必要です。
⑥ 記事・メッセージボードでタグ編集エディタを使っている場合も
  タグの変換が必要です。

⑦ タグ内容の文字数が長い場合は、うまく変換できない場合があります。
  その場合は、複数に分割してください。
⑧ YouTubeの動画などを貼る場合は、標準エディタで、
  YouTubeなどのコンテンツを貼り付けるには、こちらをご利用ください。
  のこちらをクリックしないでも、動画を貼れます。
⑨ 下記に変換用の画面フォームを用意しています。
  記事・メッセージボードに使う場合は、記事を書くで、HTMLモードで
  結果を入れてください。
  フリースペースに入れる場合は、そのまま結果を入れてください。



● 変換用の画面フォーム





◆ フリースペースの場合は、 変換後のタグフリースペースに直接、貼ります。
  記事・メッセージボードの場合は、HTMLタグを表示をクリックして、
  HTMLモードにして変換後のタグを貼ります。

◆ この記事の◆ フリープラグインに追加 のスクリプトをフリープラグインに貼ります。



◆ この変換用のタグ内容(参考)・・・ 下記を使っています。

<form name="NG_tag_freesp_chg">
<fieldset><legend>★ 禁止タグ用変換(フリースペース用 記事・メッセージボードでも使えます)</legend>
◆ タグ内容     
<textarea name="NG_tag_chg_in" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;"></textarea>
<input type="button" name="NG_tag_css_go" value="タグ変換" onClick="NG_tag_css_Create()"><input type="reset" name="NG_tag_reset" value="リセット">
<textarea name="NG_tag_chg_out" cols="60" rows="90" style="height:150px;overflow:auto;font-size:12px;width:470px;">結果</textarea>
</fieldset></form>

◆ この画面フォームのスクリプトのソースは下記

function NG_tag_css_Create(){
$(document).ready(function(){
var NG_tag_in=document.NG_tag_freesp_chg.NG_tag_chg_in.value;
var NG_tag_out=NG_tag_in.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/<br>/g,"").replace(/<BR>/g,"").replace(/"/g,"&quot;");
document.NG_tag_freesp_chg.NG_tag_chg_out.value='<div style="display: none;" class="NG_tag_area">'+NG_tag_out+'</div>';
});
}



● 関連記事

記事・メッセージボード内にスクリプトを入れる
http://ameblo.jp/new-blue-777/entry-11369686854.html






● やり方(変換用の画面フォームを使わない方法


◆ 記事・メッセージボードの操作

① 記事メッセージボードに下記の様に入れます。(バナー紹介タグの例)
  ■は改行(<br>)を表しています。

<center><img src="バナー画像のURL"><input value='<a href="http://ameblo.jp/アメーバID/" target="_blank"><img src="バナー画像のURL"></a>' readonly onclick="this.select()" style="background-color:#FFB6C1;color:#FF69B4;width:160px;border:1px solid #cccccc;"></center>


リアナのカスタマイズ日記(CSS編集用デザイン)





② HTMLモード(HTMLタグを表示のタブをクリック)にして、
  スクリプトの最初に <div class="NG_tag_area" style="display:none">
  いれ、スクリプトの最後に</div> をいれる。


<div class="NG_tag_area" style="display:none">
<center><img src="バナー画像のURL">■<input value='<a href="http://ameblo.jp/アメーバID/" target="_blank"><img src="バナー画像のURL"></a>' readonly onclick="this.select()" style="background-color:#FFB6C1;color:#FF69B4;width:160px;border:1px solid #cccccc;"></center>
</div>



リアナのカスタマイズ日記(CSS編集用デザイン)



③ 公開ボタンをクリックして記事を公開します。
  HTMLモード、標準モードどちらで公開しても問題ありません。



④ 変更する場合は、一時的に下記の  style="display:none" を外します。

<div class="NG_tag_area" style="display:none">


  変更する時、ケース(内容)によっては禁止文字のエラーが表示される場合が
  あります。
  その場合は、一度、<div class="NG_tag_area" style="display:none">~</div> を
  消してもう一度行なってください。









◆ フリープラグインに追加

① ■は、改行(<br>)に変わります。■以外のものを指定可能です。

<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">
NG_tag_change('■');
</script>


尚、URLの関係でうまくいかない場合は下記を使ってください
<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">
NG_tag_change2('■');
</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>


  ・ NG_tag_change('');
     は、<br>に変わる文字を指定します。





◆ プルダウンメニューのケース

 ① 下記で自動で作成します

  http://ameblo.jp/new-bulue9/entry-10642311722.html#Top

 ② 例

<div id="sel_menu1"><SELECT onChange="location=this.options[this.selectedIndex].value" style="background-color:#FFFF00;color:#FFFFFF;font-weight:normal;">
<option style="background-color:#FFFF00;color:#FFFFFF" selected>メニュー</option>
<option value="http://ameblo.jp/new-blue-777" >ホーム</option>
<option value="http://profile.ameba.jp/new-blue-777" >ルーム</option>
<option value="http://blog.ameba.jp/reader.do?bnm=new-blue-777" >読者になる</option>
</select></div>

ダウン

<div class="NG_tag_area" style="display: none;"><div id="sel_menu1"><select style="background-color: rgb(255, 255, 0); color: rgb(255, 255, 255); font-weight: normal;" onchange="function onchange(event) {
location = this.options[this.selectedIndex].value;
}">
<option selected="true" style="background-color: rgb(255, 255, 0); color: rgb(255, 255, 255);">メニュー</option>
<option value="http://ameblo.jp/new-blue-777">ホーム</option>
<option value="http://profile.ameba.jp/new-blue-777">ルーム</option>
<option value="http://blog.ameba.jp/reader.do?bnm=new-blue-777">読者になる</option>
</select></div></div>





◆ スクリプトのソースの中身


function NG_tag_change(br_chr){// 記事・メッセージボードの禁止タグを防ぐ
$(document).ready(function(){
$(".NG_tag_area").each(function(){
var NG_tag_datax=decodeURIComponent($(this).html());
var NG_tag_datay=NG_tag_datax.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/<br>/g,"").replace(/<BR>/g,"");
var NG_tag_data=NG_tag_datay.split(br_chr).join("<br>");
$(this).html(NG_tag_data).css("display","block");
});
});
}



function NG_tag_change2(br_chr){// 記事・メッセージボードの禁止タグを防ぐ
$(document).ready(function(){
$(".NG_tag_area").each(function(){
var NG_tag_datax=$(this).html();
var NG_tag_datay=NG_tag_datax.replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/<br>/g,"").replace(/<BR>/g,"");
var NG_tag_data=NG_tag_datay.split(br_chr).join("<br>");
$(this).html(NG_tag_data).css("display","block");
});
});
}