※初版：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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """);
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="font-size:' + spansize.options[spansize.selectedIndex].value + 'px;color:' + spancol.options[spancol.selectedIndex].value+';">', '</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=" < >を&lt;&gt;に変換 " onclick="convert();return false;">
<input type="button" name="fins" value=" 行頭に # を挿入 " onclick="fstins('# ');return false;">
<input type="button" name="fins" value=" 行頭に&gt;を挿入 " onclick="fstins('&gt;&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>の直前）に入れる。
４．タグ支援＆ネタバレ生成ボタンを置いたところ（本文入力フォーム）の側に
「３」の２つめのタグをペースト。
「閉じる」ボタンが文章の最後につくので、沢山のネタバレを作っても
ひとつづつが見やすくなります。
↑実装の仕方は短文用のものとほとんどかわりません。
こちらの説明を参考に、各スキンにスタイル設定やタグを
入れてください。
以上でＯＫです。
テンプレートを弄るのでHTMLのタグ弄りに
ある程度慣れていると良いかと。
参照ページの解説ほぼそのままでいけますので、
特に自分で改造を加えたところはありません。
非公開 (03/31)
非公開 (03/07)
非公開 (01/04)
非公開 (10/26)
非公開 (10/20)