Right Bower

※初版：2006/4/18
　 改定：2006/4/24 「ネタバレ」ボタンの追加方法
　 改定：2006/5/16 ネタバレ短文用・長文用の追加方法＆サンプル設置
　 改定：2006/5/28 説明を変更、挿入タグが全てこのページで見れるようにした

このサイトはWeb Libertyさんの「Web Diary Professional」を使用しています。
普通のブログものと違いテンプレートをHTMLでいじれるため
とても外見のカスタマイズがしやすいのですが、
レンタルブログにあるようなタグエディタが付いておりません。
直タグ打ちも面倒になってきたので、フォーム部分のスキンに
タグエディタを追加することにしました。

参考にしましたスクリプト元のmugiさん、Raelianさん
ありがとうございました。

参考≫
nicky!用 タグ入力支援機能強化版（2005/9/5版）
Mugi's Homepage

■タグ支援入力ボタンの追加法■

１．「skin＞admin_form.html」を開く

２．ソース内の最初の部分（<--SKIN_FORM_START-->すぐ下）に
　↓のスクリプトを全てコピー＆ペースト。（著作権は消さないように！）

<script type="text/JavaScript">
/* Script written by Mugi (mugi@wa2.so-net.ne.jp)          */
/*   2nd Edition by Raelian(2005/02/10)-(2005/08/15)       */
/*   http://painter.mypets.ws/~raelian/tag/enclose.html   */
/*   3rd Customize by Narusawa(2005/08/16)                 */
/*   http://caelum.skr.jp/                                 */
var sel_length, end_length=0, start_length=0;
var bl=0;
var el=null;
function get_pos(d){
if( bl != 1 && bl != 2 ) return;
if( d ){ el=d; }else{ return; }
 var ret=0;
 if( bl==1 ) {
   var sel=document.selection.createRange();
   if( !sel ) return;
   sel_length = sel.text.length;
   var r=d.createTextRange();
   var all=r.text.length;
   r.moveToPoint(sel.offsetLeft,sel.offsetTop);
   r.moveEnd("textedit");
   end_length=r.text.length;
   start_length=all-end_length;
 } else if( bl==2 ) {
     start_length=d.selectionStart;
     end_length=d.value.length - d.selectionEnd;
     sel_length=d.selectionEnd-start_length;
 }
}
function atach_focus(ln){
  if( bl == 1 ){
    var e=el.createTextRange();
    var tx=el.value.substr(0, ln);
    var pl=tx.split(/¥n/);
    e.collapse(true);
    e.moveStart("character",ln-pl.length+1);
    e.text=e.text+"";
    e.collapse(false);
    e.select();
  } else if( bl == 2 ){
    el.setSelectionRange(ln, ln);
  }
  el.focus();
}
function enclose(s, e){
  if( !el ){
    if( bl != 1 && bl != 2 ){
      el=document.getElementById("Message");
    }else{
      return;
    }
  }
  var flag2=0;
  if( bl == 1 ){
   var sel=document.selection.createRange().text;
   if( sel ){
     var len1, len2, lens, dat;
     dat=el.createTextRange().text;
     len1=dat.length;
     lens=sel.length;
     if( len1 != lens ){
       document.selection.createRange().text=sel;
       len2=el.createTextRange().text.length;
     }
     document.selection.createRange().text=s+sel+e;
     if( len1 != len2 && len1 != lens ){
       document.selection.createRange().text+="¥n";
     }
     flag2=1;
   }
  }
  if( bl == 4 || bl == 3 ){
    var str=document.getElementById("Message").value;
    document.getElementById("Message").value=str+s+e;
  } else if( bl && flag2 == 0 ){
    var itext=el.value;
    var click_s=itext.substr(0, start_length);
    var click_m=itext.substr(start_length, sel_length);
    var click_e=itext.substr(start_length+sel_length, end_length);
    el.value=click_s + s + click_m + e + click_e;
  }
  atach_focus(s.length+e.length+start_length+sel_length);
}
function convert(s, e){
  if( !el ) return;
  if( (bl!=1) && (bl!=2) ){
     el.focus();
     return;
  }
  if( bl == 1 ){
   var flag=0;
   var sel=document.selection.createRange().text;
   if( sel ){
     var len1=el.createTextRange().text.length;
     document.selection.createRange().text=sel;
     var len2=el.createTextRange().text.length;
     if( len1 != len2 ){
       flag = 1;
     }
     var cnv = sel.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
     document.selection.createRange().text=cnv;
     if( flag ){
       document.selection.createRange().text+="¥n";
     }
   }
  }else{
    var itext=el.value;
    var click_s=itext.substr(0, start_length);
    var click_m=itext.substr(start_length, sel_length);
    var click_e=itext.substr(start_length+sel_length, end_length);
    var cnv = click_m.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
    el.value=click_s + cnv + click_e;
  }
  atach_focus(start_length+cnv.length);
}
function fstins(af){
 if( !el ) return;
 if( (bl!=1) && (bl!=2) ){
    el.focus();
    return;
 }
  
 if( bl == 1 && start_length < 0 ){
   var flag=0;
   var sel=document.selection.createRange().text;
   if( sel ){
     var len1=el.createTextRange().text.length;
     document.selection.createRange().text=sel;
     var len2=el.createTextRange().text.length;
     if( len1 != len2 ){
       flag = 1;
     }
     var cnv=sel.replace(/¥n/g, "¥n"+af);
     document.selection.createRange().text=cnv;
     if( flag ){
       document.selection.createRange().text+="¥n";
     }
    }
 }else{
  var itext=el.value;
  if( start_length ){
    if( itext.substr(start_length-1,1) == "¥n" ){
      start_length--;
    }
  }
  var click_s=itext.substr(0, start_length);
  var click_m=itext.substr(start_length, sel_length);
  var click_e=itext.substr(start_length+sel_length, end_length);
  var sel = click_m.replace(/¥n/g, "¥n"+af);
  if( start_length==0 ){
    sel=af + sel;
  }
  el.value=click_s + sel + click_e;
 }
 atach_focus(start_length+sel.length);
}
var tmstr=0;
function gettmstr(){
var tmn=new Date();
var tms=tmn.getTime();
  if( tmstr == tms ){
    tms++;
  }
  tmstr=tms;
}
function neta_btn(){
gettmstr();
var s1='<input class="nbtn" type="button" name="nothing" value="ネタバレ" onclick="sfield_view('+"'"+tmstr+"'"+');return false;"><div id="'+tmstr+'" class="sfield">';
enclose(s1, "</div>");
}
function neta_link(){
gettmstr();
var s1='<a href="#" onclick="sfield_view('+"'"+tmstr+"'"+');return false;">ネタバレ</a><div id="'+tmstr+'" class="sfield">';
enclose(s1, "</div>");
}
</script>

３．本文用フォームを次のように書き換える。

<dt>本文</dt>
<dd><textarea name="text" cols="70" rows="20">
　　↓
<dt>本文</dt>
<dd><textarea name="text" cols="70" rows="20" id="Message"
 onfocus="get_pos(Message);" onmouseup="get_pos(Message);"
 onkeyup="get_pos(Message);">

４．本文用フォームのすぐ後ろ（</textarea></dd>のあと）に、
　　↓のソースをコピー＆ペースト。
　　（フォーム前にいれると動作に微妙に支障あり）

<dt>タグ支援</dt>
<dd>
<!-- 太文字・小文字など -->
<input type="button" name="strong" value="strong( b )" onclick="enclose('<strong>', '</strong>');return false;">
<input type="button" name="em" value=" em( i ) " onclick="enclose('<em>', '</em>');return false;">
<input type="button" name="del" value=" del( s ) " onclick="enclose('<del>', '</del>');return false;">
<input type="button" name="u" value=" u " onclick="enclose('<u>', '</u>');return false;">
<input type="button" name="small" value="small" onclick="enclose('<small>', '</small>');return false;">
<!-- 太文字・小文字ここまで -->
<!-- span / size / color ここから -->
<input type="button" name="spanbtn" value="span" onclick="enclose('<span style=&quot;font-size:' + spansize.options[spansize.selectedIndex].value + 'px;color:' + spancol.options[spancol.selectedIndex].value+';&quot;>', '</span>');return false;">
<select id="spansize" name="spansize">
<option value="10">10px</option><option value="11">11px</option>
<option value="12">12px</option><option value="13">13px</option>
<option value="14">14px</option><option value="15">15px</option>
<option value="16">16px</option><option value="17">17px</option>
<option value="18">18px</option>
</select>
<select id="spancol" name="spancol">
<option value="Fuchsia">Fuchsia</option><option value="Purple">Purple</option>
<option value="Red">Red</option><option value="Maroon">Maroon</option>
<option value="White">White</option><option value="Gray">Gray</option>
<option value="Silver">Silver</option><option value="Black">Black</option>
<option value="Aqua">Aqua</option><option value="Teal">Teal</option>
<option value="Blue">Blue</option><option value="Navy">Navy</option>
<option value="Yellow">Yellow</option><option value="Olive">Olive</option>
<option value="Lime">Lime</option><option value="Green">Green</option>
</select>
</dd>
<!-- span / size / color ここまで -->
<!-- ここからhref -->
<dt>　</dt>
<dd>
<script type="text/JavaScript">
function add_tag_href(){
 var d=document;
 var str_title=d.getElementById('h2t').value;
 var str=str2="";
 if( str_title ){
   str=' title="' + str_title + '"';
 }
 if( d.getElementById('h2g').checked == true ){
   str2=' target="_blank"';
 }
 enclose('<a href="' + d.getElementById('href2').value + '"' + str + str2 + '>', '</a>');
}
</script>
<input type="button" name="hrefbtn" value=" a href "
 onclick="add_tag_href();return false;">
<input type="text" name="href2" id="href2" value="http://">
title<input type="text" name="h2te" id="h2t" value="">
target<input type="checkbox" name="h2g" id="h2g" value="h2g" checked>
</dd>
<!-- hrefここまで -->
<!-- ここからimg -->
<dt>　</dt>
<dd>
<script type="text/JavaScript">
function add_tag_img(){
 var str_width=document.getElementById('imgwidth').value;
 var str1="";
 if( str_width ){
   str1=' width="' + str_width + '"';
 }
 
 var str_height=document.getElementById('imgheight').value;
 var str2="";
 if( str_height ){
   str2=' height="' + str_height + '"';
 }
 var str_alt=document.getElementById('imgalt').value;
 var str3="";
 if( str_alt ){
   str3=' alt="' + str_alt + '"';
 }
 enclose('<img src="' + document.getElementById('imghref').value + '"' + str1 + str2 + str3 + '>', '');
}
</script>
<input type="button" name="imgbtn" value=" img "
 onclick="add_tag_img();return false;">
<input type="text" name="img" id="imghref" value="http://">
width<input type="text" name="imgwidth" id="imgwidth" size="4" value=""> 
height<input type="text" name="imgheight" id="imgheight" size="4" value=""> 
alt<input type="text" name="imgalt" id="imgalt" value="">
</dd>
<!-- imgここまで -->
<!-- タグ変換ここまで -->
<dt>　</dt>
<dd>
<input type="button" name="cnv" value=" < >を&amp;lt;&amp;gt;に変換 " onclick="convert();return false;">
<input type="button" name="fins" value=" 行頭に # を挿入 " onclick="fstins('# ');return false;">
<input type="button" name="fins" value=" 行頭に&amp;gt;を挿入 " onclick="fstins('&amp;gt;&amp;nbsp;');return false;"></dd>
<!-- タグ変換ここまで -->
<!-- ネタバレボタン用 -->
<dt>　</dt>
<dd>
<input type="button" value="ネタバレ（ボタン）" onclick="neta_btn();return false;">
<input type="button" value="ネタバレ（リンク）" onclick="neta_link();return false;">
</dd>
<!-- ネタバレボタン用ここまで -->
<script type="text/JavaScript">
if( String("jadge") ){
 bl=3;
} else if( document.getElementById ){
 bl=4;
}
if( document.getElementById("Message").setSelectionRange ){
  bl=2;
} else if( document.selection.createRange ){
  bl=1;
}
</script>

以上でタグ入力支援用のボタンが生成されているはずです。
使い方や不具合については、上記参照ページの説明を参考にしてください。

■ネタバレボタンの作り方■　…タグエディタ実装後に追加可能

ネタバレリンク。説明の折りたたみにも。≫

１．上記の手順でタグ入力支援の実装を済ませる。

２．「skin＞header.html」を開き、<head>～</head>内に以下を追加。

<!-- 以下ネタバレ用 -->
<style type="text/css">
.sfield{
 display:none;
 border:solid 1px #888;
 background:#eee;
 padding:1em;
 margin-top:1em;
}
.nbtn{ background:#eee; border:double 3px #000; }
</style>
<script type="text/JavaScript">
function sfield_view(id){
 if( document.getElementById(id).style.display != "block" ){
  document.getElementById(id).style.display="block";
 }else{
  document.getElementById(id).style.display="none";
 }
}
</script>
<noscript>
<style type="text/css">
.sfield{ display:block; background:#eee; color:#eee; }
</style>
</noscript>
<!-- ネタバレ用ここまで -->

以上でＯＫです。
他にも短文用・長文用のネタバレボタンがありますが、
また追加方法が違うので下記で簡単に説明します。

１．ネタバレボタンの実装を済ませる。

２．「skin＞header.html」を開き、こちらの説明の「２」の内容を
　　ネタバレ用スクリプトの最後（</script>の直前）に入れる。

３．「skin＞admin_form.html」を開き、上記説明の「３」の内容を
　　<--SKIN_FORM_START-->すぐ下に入れたスクリプトの最後
　　（</script>の直前）に入れる。

４．タグ支援＆ネタバレ生成ボタンを置いたところ（本文入力フォーム）の側に
　　「３」の２つめのタグをペースト。

ネタバレ長文リンク。アレンジver ≫

↑実装の仕方は短文用のものとほとんどかわりません。
こちらの説明を参考に、各スキンにスタイル設定やタグを
入れてください。

以上でＯＫです。
テンプレートを弄るのでHTMLのタグ弄りに
ある程度慣れていると良いかと。
参照ページの解説ほぼそのままでいけますので、
特に自分で改造を加えたところはありません。