記事一覧

Web Diary Pro にタグエディタをつける

※初版: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

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

1.「skin>admin_form.html」を開く

2.ソース内の最初の部分(<--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>

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

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

4.本文用フォームのすぐ後ろ(</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>

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

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

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

このようにリンクでも隠すことが出来ます。
「続きを読む」の別バージョンのようにも使えるかも。

こんなやつです。

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

2.「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>
<!-- ネタバレ用ここまで -->

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

ネタバレ短文用もこのように追加できます。

1.ネタバレボタンの実装を済ませる。

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

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

4.タグ支援&ネタバレ生成ボタンを置いたところ(本文入力フォーム)の側に
  「3」の2つめのタグをペースト。

ネタバレ長文用のサンプル。このようになります。
「閉じる」ボタンが文章の最後につくので、沢山のネタバレを作っても
ひとつづつが見やすくなります。

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

ボタンでなくすには少し改造が必要ですが、解説必要でしょうか?
ご要望がありましたら書いてみようと思います。

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

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

COMMENT

■ないと [H] ... 2006/04/26(水) edit・delete

はじめましてー。Web Liberty & Favorite Labo のないとです。
送っていただいたトラックバックURLから飛んできました。

タグ支援入力とネタバレボタンの解説ありがとうございます。m(_ _)m
この2つができると、かなり使い勝手が良くなりますね。時々要望をいただくので、解説を作っていただけてとってもありがたいです。
タグの入力支援機能についてはいつか作成したいと思っていましたが、まだまだ先になりそうです…。でも、スキン対応なので他のCGI用のスクリプトでも、比較的容易に組み込めそうですね。

組み込み方法を紹介するために、Web Liberty からこの記事に対してリンクをさせていただいてもよろしいでしょうか?
また、リンクに際して何か指定などありましたら、お知らせいただけると嬉しいです。

閑話休題。

Fate/stay night は、アニメ版は全く知らないのですが、原作はプレイ中です。
仕事やFF12の影響で少し間が開いてしまったのですが、またプレイしつつ、こちらの日記もこっそり拝見させていただきますね~。

ではでは、失礼します。

■kiriji ... 2006/04/26(水) edit・delete

初めまして、キリジと申します。
ないとさん宅のCGIはとても使い勝手がよく、
設置もしやすいプログラムなので愛用させていただいております。

折り返しご挨拶いただき、本当にありがとうございます。
こういった解説をしたことがないため、拙い説明になっておりますが
何かの参考になりましたら、とトラックバックさせていただきました。
他のブログで使われている方法で、他にも何か追加できるようでしたら実験してみようと思っています。

>リンクに関して

この記事に直接でしたら全然問題ありません。
一応18歳以上推奨としていますが、健全でも通じる内容なので
うっかり別ページに足を伸ばされる方が居ても多分大丈夫だと思います。

Fateネタバレは追加したネタバレボタンを利用しつつ
なるべく隠すようにしていますので、
ネタバレの面でも安心……だと思います。うっかりミスがなければですが。

Favorite Laboさんを拝見したとき、ちょうどFate/stay nightをプレイ中との記事があり、
実はそれもあってトラックバックしようという決心が湧きました(笑)
日記も含め、何かのお役に立てましたら幸いです。
本日はどうもありがとうございました!

■ないと [H] ... 2006/04/29(土) edit・delete

こんにちはー。

> この記事に直接でしたら全然問題ありません。

お言葉に甘えて、Web Liberty からリンクさせていただきました。m(_ _)m
現在、Web Diary Pro の解説ページとトップページからリンクさせていただいております。
Web Diary Pro は近々もう一度大きな機能追加を行いますが、標準機能以外にも便利な機能がありましたら、また紹介していただけると嬉しいです。(^^)

それでは、これからもよろしくお願いいたします。

■kiriji ... 2006/04/29(土) edit・delete

お忙しい中更新お疲れさまです。
アクセス解析を見たところ、恐ろしいことになっていたので
内心ガクガク震えています(笑)

スクリプトの著作に関しても、ないとさんの方で
Mugiさんのことを明記していただきありがとうございます。
nicky作者さんのBBS過去ログによると
「スクリプトの著作権を消さないこと(特にMugiさん)」
と利用規定にあったので、あとでこちらでも著作について
追記しようと思っています。

上記のサイトの方法ですと「絵文字・アイコンの追加」は
独自のCGIを追加して管理しているようなので
こちらでの追加実験は行っていません。
ただタグエディタの改造で、似たようなことは出来るようです。
(かつてnicky使用者さんが独自に
 改造なさっていたのを見かけたことがあります)

>Web Diary Pro は近々もう一度大きな機能追加を行います

本当ですか!?なんと楽しみなお話を!
使えば使うほど ver3と比べ格段に使いやすくなっていることが分かり、
思い切ったバージョンアップに本当に頭の下がる思いです。
こちらも新機能追加のその日を楽しみにお待ちしています。

■SB ... 2006/05/26(金) edit・delete

こちらに質問をお寄せしてよいものか迷うのですが…
こちらで紹介されているスクリプトを使わせていただきたいと思ったのですが、一つ目のソースをクリックしても空白ページになってしまいます。
ちなみに、二つ目はきちんと表示されています。
ぜひ使わせていただきたいので、対処していただければと思います。
勝手なお願いではありますが、よろしくお願いします。

■7 ... 2006/05/26(金) edit・delete

はじめまして。こちらのスクリプトを使わせていただきたいと思いましたが、
上の方同様、01.txtの方が空白ページになってしまうという同じ状態になります。
当方も、できれば使わせていただきたいと思っているので、大変申し訳ありませんが、もしご対応可能な場合どうぞよろしくお願いいたします。

■kiriji [H] ... 2006/05/29(月) edit・delete

>SBさん&7さん
同様のご要望なので、まとめてレスで失礼いたします。
最初のタグ「tagedit01.txt」が表示されないとのことでしたので、
すべてのタグがこのページで表示されるよう
書き方を変えてみました。

ソースをブログ内に書き込むのには少し
やっかいな手順を踏まねばならず、今まで出来ずにいましたが
これでなんとか表示されていると思います。[蒼ざめ]
もしこれでも見えない!ということがありましたら、
またお気軽にご要望をお寄せください。

少し反応が遅れてしまって申し訳ありません。
ご報告&コメントありがとうございました!

■SB ... 2006/05/29(月) edit・delete

わざわざありがとうございます!!
さっそく実装してみました!
とても使いやすそうですね[♪]
かなり重宝しそうです。

本当に、わがままを聞いていただいてありがとうございます。
これからも大事に使わせていただきますね。
お手数おかけしました。

■kiriji [H] ... 2006/05/29(月) edit・delete

>SBさん
実装OKのご報告ありがとうございます。
あとはソースがどこか間違っていて
タグエディタが動かない、ということがなければ良いのですが。
無事動いておりましたら何よりです。
わがままなどとんでもないですよ![ひらめき]
こちらこそ見えない環境で解説してしまっていて
本当に申し訳ありませんでした。
それでは楽しくブログがつけれますように!

■トトロウ ... 2006/09/28(木) edit・delete

はじめまして!
ブログを始めようと頑張っている最中です。
多分なんですが、この作業の後に日記を書き、記事を編集しようとしたら、編集元の記事がなくなってしまって
編集が出来なくなってしまいました[汗]
良ければ同じような状況になるか教えてください

■kiriji [H] ... 2006/09/29(金) edit・delete

>トトロウさん
はじめまして、ご来訪ありがとうございます。
このカスタマイズ方法はHTMLテンプレートのみ
書き換えたり加えたりするものですので、
記事を消すなどのプログラム上の事故は起きにくいと思われます。

テンプレートを書き換えた際、フォームタグや必要な変数を
間違って削ってしまったことはありませんでしたでしょうか?
すでに何度もお試しでしたら申し訳ないところなのですが、
よろしければもう一度デフォルトスキンから
admin_form.htmlを入れなおし、再度改造を行ってみてください。

■トトロウ [H] ... 2006/09/30(土) edit・delete

お騒がせしてスミマセンでした;
なぜか何も変えて無いのに次の日に直ってました・・・
とても参考になりました!ありがとうございました[♪]

■kiriji [H] ... 2006/10/05(木) edit・delete

>トトロウさん
無事解決なさいましたら何よりです[♪]
他に上手くいかないことなどありましたら、また
お気軽に書き込んでください。
こちらこそご利用ご来訪、ありがとうございました!

■nami ... 2006/10/11(水) edit・delete

 こんにちは、
便利な改造方法を公開してくださって、
本当にありがとうございます。

 こちらのネタバレボタンを是非使いたいのですが、
ボタンではなくリンクにしたいのです。
「ネタバレ長文リンク。アレンジver ≫」
を実装したいのですが、
どうしても出来ません…。

 改造を自分でがんばってみたのですが、
どうしても判りません。
ご教授いただけると大変幸いに思います。

■kiriji [H] ... 2006/10/12(木) edit・delete

>namiさん
ご来訪ありがとうございます。
ネタバレ長文のリンク・バージョンについてですが、
実は普通のネタバレ・リンクの最後に
「閉じる」ボタンを追加しただけのものだったりします。
ですからこのリンクverは文字が変化しないんですよね。[汗]
色々いじれば文字が変化するのも出来るかもしれないのですが、
特に自分にとって必要がなかったので
今のところやっておりません。
(元サイト様にも解説はありません)

もしネタバレ長文まで機能追加が出来ておりましたら、
ネタバレ長文スクリプトのすぐ後ろに

function sfield_link_longvchg(){
gettmstr();
var xid="x"+tmstr;
var vid=xid+"o";
var s1='<a href="#" onclick="sfield_view('+"'"+tmstr+"'"+');return false;"><b>MORE...</b></a><div id="'+tmstr+'" class="sfield">';
var s2='\n<div class="right">[ <a href="#" onclick="sfield_view('+"'"+tmstr+"'"+');return false;">x CLOSE</a> ]</div></div>';
enclose(s1, s2);
}

投稿記事フォームのネタバレボタン群の最後に

<input type="button" name="secretButton" value=" ネタバレ長文(リンク) " onclick="sfield_link_longvchg();return false;">

と追加してみてください。

■nami ... 2006/10/13(金) edit・delete

 丁寧な返信および解説をしてくださり、
本当にありがとうございました。

 あんなに苦労して頭使いすぎて吐き気まで催してたのに、
嘘みたいに出来てしまいました。
本当にうれしいです。
ありがとうございました。

■まきにゃん [H] ... 2006/11/19(日) edit・delete

悪戦苦闘の末、何とか実装する事が出来ました。
非常に便利な解説、ホントにありがとうございました[♪]

-追記-
当サイトのリンクに、勝手ながら加えさせていただきました。
問題ありましたら修正しますので、ご連絡ください。

■おしん ... 2006/11/21(火) edit・delete

実装させていただきました!
とても素晴らしい機能でこれからの日記が楽しくなりそうです。

突然の質問なのですが、画像をアップロードした際に記入する
『<br clear="all">ボタン』を作りたいと思い、admin_form.htmlをいじったのですが、ボタンを押しても反応がなかったり、br clear=all undefinedと表示されてしまい、うまくいきません。

kirijiさんならどのように記入されますか?
もしお時間がありましたらお教えください!

■おしん ... 2006/11/27(月) edit・delete

できました!

<input type="button" name="br clear=&quot;all&quot" value="br clear=&quot;all&quot" onclick="enclose('<br clear=&quot;all&quot;>', '');return false;">

と、しましたらエラーもなく動作しています。

ぶしつけに質問いたしまして申し訳ございませんでした。
またお騒がせしました。

■kiriji [H] ... 2006/11/28(火) edit・delete

大変遅れてしまいましたが、レスです。

>namiさん
タグエディタおよびネタバレボタン追加方法については、
いま改装にあわせて書き直しを行う予定です。
こちらでいただいたご質問をその時の参考にさせていただきます。
色々と説明をぶん投げてしまっているところがありましたので、
皆様を悩ませない記事にするよう心がけますね。
ご質問ありがとうございました!

>まきにゃんさん
ご利用&リンクありがとうございます。
リンクに関しては特に規定などはありませんので、
お気軽に張ってやってくださいませ。
いまゲーム関連とスキン関連を分離する作業をしていまして、
改装完了後は完全にWDP支援&スキン配布サイトとなる予定です。
もしジャンル分けなどがありましたら参考になさってください。

>おしんさん
サポートが遅れまして申し訳ありません!
解決法も書き込んでいただいて、むしろこちらから
お礼をいたしたいぐらいです。
ダブルクオーテーション(")を&quot;と書き換えなければならないのがミソだったのですが、
慣れると色々に使えますので面白いですね。
年末前にまたしっかりサポート再開したく思いますので、
どうぞよろしくお願いします。

■I Love Tennis ... 2006/11/29(水) edit・delete

ありがとうございます。使わせていただきました。
最高ですね。
初心者にはとてもありがたいです。
これからもよろしくお願いいたします。

■おしん ... 2006/12/02(土) edit・delete

kirijiさん

こちらこそ、いきなりサポート希望のコメントなんか出してしまってすいませんでした。
何の知識もないまま、やってしまいましたが
「ここをもう少しスマートに書いたらいいよ~」
なんてことがありましたら、よろしくお願いいたします。

お忙しいようですが、頑張ってくださいね!

■kiriji [H] ... 2006/12/04(月) edit・delete

>I Love Tennisさん
お役に立てましたらなによりです。
便利なものを使わせていただいている分、多くの方も
便利さを共有できたらと思っております。
現在より分かりやすいテキストを目指していますので、
何かお気づきの点などありましたら、いつでもお越しください。

>おしんさん
いやいや、これ以上ないほどに分かりやすいですよ!
自分もあれこれエラーを出しつつ
体当たり状態でカスタマイズ法を取り込んできたもので、
根本的なことがわかっていれば
もっとスマートに解説できるのにと思うことがしょっちゅうです。
時間があればJavaScriptの勉強がしたいと、切実に思います…。

ようやくひと段落つきましたので、年末までに色々
更新していきたいと思います。
コメントありがとうございました!

■かぼちゃ ... 2006/12/28(木) edit・delete

kirijiさん、初めまして。
わかりやすい説明があったので、楽に改造する事が出来ました。
そこで質問なのですが、只今上記の方法でタグ支援入力ボタンを付けたのですが、画像でタグ支援入力は出来ないのでしょうか?
ぜひ教えて下さると助かります。
図々しい者ですが、これからもよろしくお願いします。

■kiriji [H] ... 2006/12/29(金) edit・delete

>かぼちゃさん
初めまして。ご来訪ありがとうございます。

●タグ挿入ボタンを画像にしたい
●画像タグを挿入できるボタンを付けたい
●決められた画像を挿入するボタン(絵文字ボタン)が欲しい

のどれにご質問があたるか、少し悩んでおります。

【管理画面に絵文字をつける】
http://brutzero.s22.xrea.com/rb/archives/56.html

が絵文字を追加する方法になりますが、
もしタグ挿入ボタンを画像にしたい、というご要望ですと
HTMLやCSSの解説サイトさんに
「フォームボタンを画像にする」という説明があります。
そちらを参考になさってみてはいかがでしょうか。

【画像で送信ボタンを作る】
http://www.tagindex.com/html_tag/form/input_image.html

ちなみにWDP特有の画像ファイルの挿入の仕方
($FILE1などのようなもの)がボタン一つで
できるようにする方法は、今度実験する予定です。
自分が使う機会が増え、是非欲しくなってしまったボタンなので…[汗]
こちらのことでしたら、お待ちいただけますと幸いです。

■かぼちゃ ... 2006/12/29(金) edit・delete

早速のお返事ありがとうございます。
えと、質問の仕方が悪かったみたいですね;タグ挿入ボタンを画像にしたいという質問なのでした。
色々なサイト様を見たのですがなかなかボタンを画像にする方法が見つからなくてご質問させて頂きました。もしその方法が説明されているサイト様をご存知でしたら教えて下さると助かります。
文章が下手ですみませんでした。

■kiriji [H] ... 2006/12/30(土) edit・delete


質問の確認は、「もし違ったら…」と言う時のための
念のためのですので、どうぞお気になさらず!
ボタンを画像にする、という方法でしたら
前のレスにて【画像で送信ボタンを作る】という方法をURLとともにご紹介しております。
もう一度書いておきますね。

【画像で送信ボタンを作る】
http://www.tagindex.com/html_tag/form/input_image.html

それ以外にも拙作「MARU」スキンのように
ボタンをCSSで指定してデザインする方法もあります。

【スキン:MARU】
http://brutzero.s22.xrea.com/rb/sample/maru/maru.html

↑検索横のボタンが画像になっています。
もしよろしければスキンのサンプルなどを
参考になさってみてくださいませ。

■かぼちゃ ... 2006/12/30(土) edit・delete

お陰様で無事に画像にする事が出来ました!
年末でお忙しい中わかりやすく説明して下さり、本当に有難う御座いました。
またお世話になると思いますので、その時はまたよろしくお願いします。
これからも頑張って下さいね。

■kiriji [H] ... 2007/01/10(水) edit・delete

>かぼちゃさん
年明けの返信となってしまいましたが、改めまして。
無事解決できましてなによりです[♪]
実は解説後に、より分かりやすいサイトがあったことに気づき
自分の解説の至らなさにガックリしました。
うう、すいません……。

他にもお役にたてるかもしれませんので、一応こちらのサイトも
ご紹介しておきます。

「PHP & JavaScript Room」
 http://f32.aaa.livedoor.jp/~azusa/

お言葉ありがとうございます!今年も頑張りますね。

■未承認 ... 2014/07/09(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2014/07/14(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/26(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/01/29(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/02/18(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/03/03(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/06/18(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/08/10(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2015/08/17(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/12(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2017/03/13(月) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/12/05(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/12/12(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2020/12/15(火) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2021/01/07(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2021/07/08(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2021/11/20(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/23(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/24(木) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/26(土) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/27(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/11/27(日) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/07(水) edit・delete

管理者に承認されるまで内容は表示されません。

■未承認 ... 2022/12/23(金) edit・delete

管理者に承認されるまで内容は表示されません。

COMMENT FORM

COMMENT FORM
NAME
MAIL
U R L
 
MESSAGE
PASS
公開設定