が使えますがコメント欄でも使えるようにカスタマイズしてみました。
お世話になったのはstroll::blogさんの
コメントにカスタマイズ絵文字入力機能です。
コメント確認を削除してしまいました。
それでもよければ使ってみてください。
まず、当然ながら絵文字画像が必要になります。
私はstroll::blogさんでもおすすめしていた
SWEETSさんの素材をお借りしました。
画像をアップしたら、画像設定スクリプトの編集をします。
はじめはstroll:blogさんのまま使ってみたのすが
この画像は11Ｘ11と小さくて、間がないと非常に見づらかったので
間を空けるために少し書き換えてあります。
（青字部分が書き換え箇所です）
その設定でよければ、
以下の画像設定スクリプトをコピーしてメモ帳に貼り付けて
赤字部分を編集します。
list[list.length] = new Array('画像名', '画像URL');は画像の数だけ増やして下さい。（これが結構大変です
）<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" hspace="2" vspace="2"';
// ***************** 設定ここまで *****************
att = (att != '') ? (' ' + att) : '';
return att;
}
// -->
</script>
では、編集したらそれをコピーして
デザイン→HTMLを開いて
今までHTMLを編集したことのない方はHTMLの追加をクリックして
HTML名をつけ、その画面を編集します。
</head>を探して、その前に、先ほどの画像設定スクリプトを貼り付けます。
HTMLの編集はここまでなので、これを保存して
この新しいHTMLを適用させます。
続いてデザイン→コンテンツ→記事HTML編集画面を開いて
ここに画像リスト出力スクリプトと画像変換スクリプトを記述します。
まず、画像リスト出力スクリプトですが
stroll::blogさんのものをSeesaa用に書き換えた以下のものをコピーしてください。
（青字部分が書き換えた箇所です）
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像リスト出力
function writeCustmizeEmojiTagList() {
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.article_child__body';
// ***************** 設定ここまで *****************
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>
これを絵文字を表示したい部分に貼り付けるのですが
私の場合は、コメントテキストエリアの上に表示したかったので
<textarea name="article_child__body" rows="10" cols="50">の上に貼り付けました。
それで、コメントテキストエリアはスタイルシートで見ると350pxだったので
その上にきれいに収まるように
この画像出力スクリプトを
<div style="width:350px;"></div>で囲んで
３列きれいに並ぶように絵文字の数を調節してみました。
pxの値はスタイルシートによって違うかもしれないので
自分の環境に合わせて変えてください。
それから
<form action="/pages/user/comments2/regist/input" method="post">を探して、これを
<form name="comform"と書き換えます。
action="/pages/user/comments2/regist/input" method="post">
続いて画像変換スクリプトですが
これもSeesaa用に書き換えた以下のものをコピーしてください。
（青字部分が書き換えた箇所です）
<script type="text/javascript">
<!--
// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag() {
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comments-body';
// ***************** 設定ここまで *****************
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>
これを
</form>の前に貼り付けます。
</div>
<% /if -%>
<% if:page_name eq 'search' -%>
以上で保存して記事ページを再構築すれば完了です。
【追記】
以前の記事では、HTMLにも3つのスクリプトを記述して
確認画面の不具合があったので、確認部分を削除すると書きましたが
HTML部分には画像設定スクリプトのみを記述して
記事HTMLに画像リスト出力スクリプトと画像変換スクリプト
を記述すれば、確認画面の不具合は出ませんでした。
ただし、確認画面では絵文字ではなくタグなんですけど・・・
【カスタマイズの最新記事】
at 14:36
|
カテゴリーを見ていて何かのご縁で
お会い出来ました！
ちょうどブログでそんな話をしてたので・・・。
ちなみにこれってOS は関係ないんですよね？
blog petを雑誌で見てやりたいなぁーと思ってたんですが
何せWinしか出来ないって[え～ん]
是非教えて下さい。
ちなみに私犬飼ってるんですが猫が好きなんです。
って言うと[いぬ]怒るかなぁ？
でもうちの[いぬ]は[ねこ]みたいに手を折り曲げて
体の下に入れています。とっても[ねこ]っぽい子です。
さっそくぴあのちゃん[いぬ]に会ってきました！
めちゃくちゃかわいい[拍手]
BlogPetはOSは関係ないはずでよ。
U^ｪ^U ﾜﾝ!ちゃんもいるから、きっと楽しいですよ[さくらんぼ]
何度も何度もチャレンジして出来なかった
”コメントに絵文字を使えるようにする”
出来ました！！[はぁと1]
ほんっとほんっとありがとうございました。。
ものすごく嬉しいです！
m(=＿ ＿=)mペコリ…
ＴＢもありがとうございます。
みえにゃん様のおかげで、無事カスタマイズ出来ました[はぁと1]
ありがとうございます[!!]
後ほどトラックバックさせて頂きますね[おんぷ]
コメント＆ＴＢありがとうございました。
お役に立ててうれしいです。
カスタマイズってはまると楽しいですよね[にこ]
ここの記事を参考にして絵文字機能を挑戦してみたのですが、右サイドバーが下に落ちてしまいました[ダウン]
自分でもあれこれ試してみたのですが直らなくて。
このような症状の場合はどうやったら直るのでしょうか？
お返事遅くなりました。
サイドバーが落ちてしまうのは
絵文字部分の幅が広すぎるためかと思いますので
<div style="width:350px;">画像リスト出力スクリプト</div>
としてみてください。
絵文字部分の幅が広すぎるんですか。
なんだかよく分からないのですが上手く設置できちゃいました[はぁと1]
もう上手く設置出来なくて頭が膿んじゃってました[ふぇ～ん]
とにかく設置できて良かったです[にこ]
そちらへお邪魔したところ、無事設置できていたようでおめでとうございます[ぱん]
今日、１日かかってコメントに絵文字を表示させようと頑張りましたが、結局成功しませんでした。
いろんな方々のブログを参考にしたのですが、どうも表示されません。
もう何が間違えているのかもわからず・・・
よろしければ、アドバイスいただけませんか？
http://messageboard699152.aimoo.com/ Lesbian Porn
http://messageboard699155.aimoo.com/ Lesbian Teen
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=iesqenul Lesbian Site
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=bqsmjszp Lesbian
http://oper656.journalspace.com/ Lesbian Porn
http://eteamz.active.com/lesbiansteen Lesbian Teen
http://eteamz.active.com/lesbianssite Lesbian Site
…難しい。
http://messageboard699128.aimoo.com/ Black Pussy
http://messageboard699131.aimoo.com/ Ebony Sex
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=kqbpqyin Free Black Pussy
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=obloemuh Ebony Sluts
http://parker837.journalspace.com/ Free Black Porn
http://eteamz.active.com/ebonytgp Ebony TGP
http://eteamz.active.com/taebony Ebony
今日からこちらの方でブログの方を始めたので、
この他にも色々と参考にさせて頂きました。
無事、設置できました。
ありがとうございました。
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=dluzundu Teen
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=bgqxencx Teen sex
http://popler529.journalspace.com/ Teen chat
http://www.insulate.org/frameset.php?thePage=http://a1zi2.com/hydrocodone853.html hydrocodone
http://www.insulate.org/frameset.php?thePage=http://a1zi2.com/cialis517.html cialis
http://www.nostarch.com/frameset.php?startat=http://a1zi2.com/onlinepharmacy513.html? online pharmacy
http://www.cosis.net/members/frame.php?url=http://a1zi2.com/hydrocodone488.html hydrocodone
http://www.cosis.net/members/frame.php?url=http://a1zi2.com/lortab792.html lortab
http://www.mississippi.gov/frameset.jsp?URL=http://a1zi2.com/phentermine120.html phentermine
http://www.cosis.net/members/frame.php?url=http://a1zi2.com/hydrocodoneonline242.html hydrocodone online
http://mentalhelp.net/poc/extpage.php?url=http://a1zi2.com/phentermine162.html phentermine
http://www.elbulli.com/main.php?url=http://a1zi2.com/buylortab661.html buy lortab
http://www.state.ms.us/frameset.jsp?URL=http://a1zi2.com/xanax821.html xanax
http://www.ms.gov/frameset.jsp?URL=http://a1zi2.com/canadianpharmacyonline958.html canadian pharmacy online
http://www.tigersushi.com/site/frameset.jsp?page=http://a1zi2.com/onlinepharmacy896.html online pharmacy
http://eteamz.active.com/iybuysomaonline buy soma online
http://eteamz.active.com/cruisessoma cruisessoma
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=jpezuehw soma
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=uutzqbik buy soma online
http://spiritbooks.thesitefights.com/cgi-bin/gbview.cgi?owner=bsxkform cruises soma
http://somaonline.blog.kataweb.it soma online
http://ttbuysoma.blog.kataweb.it buy soma
http://soma.blog.kataweb.it soma
http://www.elbulli.com/main.php?url=http://a1zi2.com/hydrocodone818.html hydrocodone
http://www.ms.gov/frameset.jsp?URL=http://a1zi2.com/phentermine157.html phentermine
http://www.itascacc.edu/getpage.php?id=http://a1zi2.com/hydrocodone114.html hydrocodone
http://www.tigersushi.com/site/frameset.jsp?page=http://a1zi2.com/buyviagra410.html buy viagra
http://www.spioneers.org/frame.php?url=http://a1zi2.com/xanax644.html xanax
http://www.ms.gov/frameset.jsp?URL=http://a1zi2.com/buyxanax302.html buy xanax
http://mentalhelp.net/poc/extpage.php?url=http://a1zi2.com/buyxanax161.html buy xanax
http://www.state.ms.us/frameset.jsp?URL=http://a1zi2.com/onlinepharmacy.html online pharmacy
http://www.rwr.ru/exploder/?url=http://a1zi2.com/buyphentermine443.html&power=25&sence=1&kudra=8&length=&let=&nc=1 buy phentermine
http://www.ms.gov/frameset.jsp?URL=http://a1zi2.com/xanax429.html xanax
http://www.ms.gov/frameset.jsp?URL=http://a1zi2.com/buyviagra69.html buy viagra
http://www.state.ms.us/frameset.jsp?URL=http://a1zi2.com/buyxanax.html buy xanax