Right Bower

記事一覧

拍手Re：5/29日分

5/29 20時の方≫

拍手ありがとうございます。
paddingについてのご質問なのですが、これはネタバレボタンの、と
いうことでよろしいのでしょうか？
ネタバレボタンのスタイルは、head内に入れた.nbtnに
text-alignを追加したときのようにpadding部分を弄ればよろしいかと思われます。
上下のみpadding値を変えたい場合は、下記のサイトを参照なさってみてください。
　⇒TAG index : ボックスのパディング（内側の余白）を指定する

他にもボタンの大きさを変えるには、widthやheightを使う方法も
ありますが、それらに関しても上記サイトなど、
スタイルシートを解説するサイトを参考になさってみてください。
また、ネタバレボタンの元サイトにも簡単に説明があります。
⇒nicky!TIPS　：ネタバレボタン＞よくある質問と答え

私自身、あまり自信を持ってお教えできるほど学んでいないこともありますが、
どのような表記にしたいのか、拍手コメントだけでは状況が分からなかったこともあります。
あまりお役に立てずに申し訳ありませんが、何かの参考になりましたら幸いです。

[ x CLOSE ]

■説明を書き直したり、コメント欄への絵文字のことを追記したり
アルバムモードの表示が上手くいかない原因をさぐったりと
絵を描く以外のことばかりをやっていたので、そろそろちゃんと
ゲームサイトらしいことをやらねば。

■コメント欄絵文字が上手くいったことに気をよくして
ツリー化スクリプトもできないかと実験⇒みごとに失敗。ノォォ。
コメントやトラックバックを題名ごとでまとめたいのだけれどなぁ。

■アルバムモードの表示が自分のところだけ変という現象、
あいかわらず原因がわかっておりません。一体何が違うんだろう
「他山之石」さんが調べてくださったところによると、
サムネイル機能ON/OFFは関係ないとのお話。（ありがとうございます）

どうやらペイントモードで書いた絵は、ミニ画像があっても
無視してフルサイズが出てきている様子。
ミニ画像のみの設定にしてあるのに、本当に何故なんだ

※その他にも拍手をいただき、本当にありがとうございます！
　更新の励みになります。

[Clap RES]

Web Diary Proのコメント欄に絵文字をつける

タグが使えないコメント欄でも絵文字を可能にする
「stroll::blog」さんのスクリプトです。
それに「6畳一間に魚とカメとヒト2人」さんの解説を元に、
Web Diary Proのコメント欄につける場合をメモ。

※使用にあたっての注意など、「stroll::blog」さんの記述を
　ご覧になってお使い下さい。
　また、参考にしました両サイト様に感謝です。

参考≫
　stroll::blog | コメントにカスタマイズ絵文字入力機能
　迷える子羊　| Ver4.10 絵文字入力機能設置方法

■コメント欄に絵文字を追加する■

１．画像設定スクリプトの設定
　　「skin＞header.html」を開き、<head>～</head>内に次の
　　スクリプトを記入する。

<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
return list;
}
function getCustmizeEmojiAttribute() {
// 画像タグに含める属性値（alt属性以外）
var att = 'border="0" style="vertical-align:middle"';
// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>

　※太文字部分をそれぞれ書き換えてください。
　　「画像名」がそのまま絵文字のalt属性になります。
　　その他追記したい属性は「画像タグに含める属性値」へ。
　　ここの属性はそのまま弄らなくとも問題ありません。

２．「skin＞comment.html」を開き、28行目あたりにある
　　formタグに次の箇所を追加。

<form action="${INFO_PATH}" method="post"
 id="comment_form">
<fieldset>
<legend>投稿フォーム</legend>
　　↓
<form action="${INFO_PATH}" method="post"
 id="comment_form" name="comform">
<fieldset>
<legend>投稿フォーム</legend>

３．画像リスト出力スクリプトを入れる
　　同じく「skin＞comment.html」内のＵＲＬ用フォーム近くに
　　次のソースを入れる。

<dt>ＵＲＬ</dt>
<dd><input type="text" name="url" size="30" value="${FORM_URL}" /></dd>
<!-- コメント欄に絵文字を追加 -->
<dt>絵文字</dt>
<dd><script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.text';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
for (var i = 0; i < list.length; i++) {
window.document.write('<a href="javascript:;" onClick="addCustmizeEmoji(' + textarea + ', \'' + list[i][0] + '\');"><img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" /></a>');
}
}
// reference from jugem.jp (c)
function addCustmizeEmoji(obj, tag) {
var item = '[' + tag + ']';
if (document.selection) {
obj.focus();
sel = document.selection.createRange();
sel.text = item;
} else if (obj.selectionStart || obj.selectionStart == '0') {
var startPos = obj.selectionStart;
var endPos = obj.selectionEnd;
obj.value = obj.value.substring(0, startPos)
+ item + obj.value.substring(endPos, obj.value.length);
} else {
obj.value += item;
}
}
writeCustmizeEmojiTagList();
// -->
</script>
</dd>
<!-- コメント欄に絵文字を追加 ここまで -->

　※太字部分は「stroll::blog」さんのところのスクリプトを
　　Web Diary Pro用に書き換えてあるところです。
　　スキンによってidが異なる場合は書き換えが必要ですが、
　　普通ならば上記のままでＯＫです。

４．画像変換スクリプトの設定
　　「skin＞footer.html」を開き、次のソースを</body>の直前に
　　入れる。

<!-- コメント絵文字用スクリプト -->
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comment';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'text';
// ***************** 設定ここまで *****************
var list = getCommentEmojiList();
var att = getCustmizeEmojiAttribute();
var objComArea;
var classComArea;
var objComBody = new Array();
if (commentAreaIdName != '') {
objComArea = document.getElementById(commentAreaIdName);
if (!objComArea || !objComArea.innerHTML) return;
classComArea = objComArea.getElementsByTagName(commentAreaTag);
} else {
classComArea = document.getElementsByTagName('*');
}
for (var i = 0; i < classComArea.length; i++) {
if (classComArea[i].className == commentBodyClassName) objComBody[objComBody.length] = classComArea[i];
}
for (var i = 0; i < objComBody.length; i++) {
objComBody[i].innerHTML = getStringCustmizeEmojiTag(list, objComBody[i].innerHTML, att);
}
}
function getStringCustmizeEmojiTag(list, s, att) {
for (var i = 0; i < list.length; i++) {
s = s.split('[' + list[i][0] + ']').join('<img src="' + list[i][1] + '"' + att + ' alt="' + list[i][0] + '" />');
}
return s;
}
changeCustmizeEmojiTag();
// -->
</script>
<!-- コメント絵文字用スクリプトここまで -->

　　※太文字の部分が「stroll::blog」さんと
　　　「6畳一間に魚とカメとヒト2人」さんの説明とは異なる部分です。
　　　コメント欄にこのスクリプトを適用するので
　　　'comment'となっています。

これでコメント欄に絵文字が追加されました。
ただし、このスクリプトはコメント数が多くなると、
「画像への変換処理に時間がかかり、
　また、登録した画像の数が多すぎても同様」
とのことですので、絵文字の登録しすぎに気をつけてください。

+ + + + + + + + + + + + + + + + + + + + + + + + + +

■「コメント一覧を表示する」にすると絵文字がでません。

⇒「コメント一覧でも絵文字を表示」をご覧下さい。

■「タグエディタで絵文字を挿入」と併用できる？

⇒問題なく使用できます。
　スクリプトを沢山入れると、それぞれが影響して使えないものが
　でてくる場合がありますが、私が実験したところどちらも
　問題なく利用できます。

　「6畳一間に魚とカメとヒト2人」さんではタグエディタ絵文字の代わりとして
　このスクリプトを利用していましたが、その場合では
　管理人の書いた日記の内容のみしか絵文字が変換されませんでした。
　設定の仕方によっては両方ともこのスクリプトで絵文字が
　追加できるかもしれませんが、自分にはちょっと分からないです。

　※追記：「迷える子羊」さんで
　　絵文字機能を管理者＆コメント欄に併用する方法が公開されました。
　　管理画面で絵文字imgタグがずらずら描き込まれるのが嫌だ！
　　という方にはおすすめの機能です。　

[Blog::custom]

ギャフン！（拍手Re＋）

5/24　3時の方≫

ネタバレエディタ実装できましたか！いや～よかったです

ようやくソースをブログ内に書き入れる方法がわかりました。<pre>を使えばよかったんですね。
これからも徐々に分かりやすく、見やすくを目指して改良していこうと思います。
ブログを書くのが楽しくなりますよう！

■タグエディタ＆ネタバレボタンの挿入用ソースが見れない！
というお話を多くいただき、突貫で解説を書き直し中です。
ひとまずタグエディタについてはこれで大丈夫でしょうか。
変換しそこねもなるべくチェックはしましたが、もし何か変という
ことがありましたらご報告お願いいたします。

■ネタバレボタンの応用で、「擬似メニュー折りたたみ」も
出来ました。文字が変化したりはしないのですが、使い様によっては
ナビゲーションすっきり。別館で使っています。
説明は必要……というほどのものでもないかもしれない。

■XHTMLをぼちぼち学び中です。targetって廃止なんすか！
このブログでも使い放題だったので、少しづつ減らしていっております。
なんとなく基本はわかってきました。空要素は最後は />とか、
まだそのレベルなんですが。

※その他にも拍手をいただき、本当にありがとうございます。
　更新の励みになります！

[Clap RES]

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

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

１．「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 ≫

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

[ x CLOSE ]

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

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

[Blog::custom]

WebDiaryProに絵文字ボタンを作る

※初版：5/16
　　改定：5/18　「コメント欄にも絵文字機能を付けたいのですが…」を追加。
　　改定：5/19　IMGタグがXHTMLとして正しくなかったので修正
　　改定：5/28　ソースを見やすく書き換え、コメント欄の絵文字について追記

前にやった「タグエディタとネタバレボタン」の応用で、
いささか強引ではありますが「絵文字ボタン」を作ってみました。

こんな感じになります

参考：タグ入力支援にICONを追加する[nicky!用]
　　　　stroll::blog | コメントにカスタマイズ絵文字入力機能
　　　　 .:. PEPPER .:.（アイコン元）

■絵文字ボタンを投稿画面に加える■

１．タグエディタを実装する。

２．「skin」フォルダに新しく「emoji」フォルダを作り、
　　こちらからダウンロードした絵文字アイコンをアップする。
　　（FREE GRAPHICS＞D.BALLOON＞01を今回使用）

３．「skin＞admin_form.html」を開き、
　　タグ支援ボタンの手前に↓のタグを入れる。

<!--絵文字入力ボタン-->
<dt>絵文字</dt>
<dd>
<img src="./skin/emoji/pp_00.gif" width="17" height="17" alt="…" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_00.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;…&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_01.gif" width="17" height="17" alt="ハート" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_01.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ハート&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_02.gif" width="17" height="17" alt="汗" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_02.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;汗&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_03.gif" width="17" height="17" alt="蒼ざめ" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_03.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;蒼ざめ&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_04.gif" width="17" height="17" alt="怒" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_04.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;怒&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_05.gif" width="17" height="17" alt="♪" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_05.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;♪&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_06.gif" width="17" height="17" alt="？" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_06.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;？&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_07.gif" width="17" height="17" alt="！" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_07.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;！&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_08.gif" width="17" height="17" alt="滝汗" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_08.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;滝汗&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_09.gif" width="17" height="17" alt="ひらめき" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_09.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ひらめき&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_10.gif" width="17" height="17" alt="ハートブレイク" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_10.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ハートブレイク&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
<img src="./skin/emoji/pp_11.gif" width="17" height="17" alt="LOVE LOVE" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_11.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;LOVE LOVE&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;">
<img src="./skin/emoji/pp_12.gif" width="17" height="17" alt="ドクロ" onclick="enclose('<img src=&quot;${INFO_URL}skin/emoji/pp_12.gif&quot; width=&quot;17&quot; height=&quot;17&quot; alt=&quot;ドクロ&quot; border=&quot;0&quot; style=&quot;vertical-align:middle&quot; />','');return false;" />
</dd>
<!--絵文字入力ボタンここまで-->