公開テンプレートのコメントに絵文字を使う for SereneBach
完成するとスクリーンショットのように絵文字が表示されます。テキストエリアにフォーカスがある状態でこの絵文字をクリックすると、テキストエリアに絵文字に対応するテキスト文字が表示され、投稿後にテキスト文字が絵文字に変換されて表示される仕組みになっています。 注：絵文字の表示位置やコメントとして表示された絵文字のスタイル等についてのご質問はご遠慮ください（自己解決願います）。 |
１．スクリプトのダウンロード
下記のスクリプトをダウンロードして emoji.js というファイル名で保存してください。これは元カスタマイズ記事の JavaScript をファイルにまとめたものです。ご自身で元サイトからスクリプトをコピーして作成されても結構ですが、下記のスクリプトには公開テンプレートに適用させるための面倒な設定を予め施しています。
２．スクリプトに画像の設定
絵文字にしたい画像をダウンロードしてください。実験では下記サイトからダウンロードさせて頂きました。
.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE
また先ほどダウンロードした emoji.js を任意のエディタで開いて、5行目付近に画像の設定をしてください。設定例を下記に示します。
// コメントにカスタマイズ絵文字入力機能：画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array('00a', 'http://yourhost/images/pp_00a.gif');
list[list.length] = new Array('01a', 'http://yourhost/images/pp_01a.gif');
list[list.length] = new Array('02a', 'http://yourhost/images/pp_02a.gif');
：
return list;
}上記で指定した位置に画像もアップロードしてください。
注：開いたファイルの文字コードが UTF-8 になっていることを確認してください。意識的に他の文字コードに変更する場合は４項の script タグの charset 属性を変更する必要があります。
３．スクリプトのアップロード
スクリプトの設定が完了したら保存して、index.html と同じディレクトリに emoji.js をアップロードしてください。
４．テンプレートの修正
<head> ? </head> の間に下記のタグを追加します。
<script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"></script>次にコメント絵文字表示用のタグを設定します。コメントフォームのテキストエリア直前の位置に下記の青色部分を追加してください。テキストエリア下に表示したい場合は適宜変更してください。
：
<dt><label id="cookie_label" for="set_cookie">cookie:</label></dt>
<dd><input type="checkbox" tabindex="4" name="set_cookie" value="1" id="set_cookie" /></dd>
<dt>icons:</dt><dd>
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList();
// -->
</script>
</dd>
<dt><label for="description" id="labeldescription">comments:</label></dt>
<dd>
：上記の付近にコメントアイコンの独自タグがコメントアウトされた形で記述されていると思いますが削除してください。
もうひとつ、コメントエリア終了直前に下記の青色部分を追加してください。これは絵文字に対応するテキストを画像に変換するためのスクリプトを起動する部分です。
：
</form>
</div>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag();
// -->
</script>
<!-- END comment_area -->
：ここまでの設定で絵文字が表示されるように仕組んでますが、コメントフォームと別のフォームがページに表示（厳密に言うとHTMLマークアップでコメントフォームよりも先に別のフォームが記述）されている場合、正常に表示されない可能性があります。その場合のみ、５項を実施してください。
５．フォームがページに2つ以上ある場合（必要な方のみ）
スクリプトの
// コメントを入力するテキストエリアを指定
var textarea = 'document.forms[0].description';を
// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.description';に変更して、テンプレートの form タグに name 属性（青色部分）
<form name="comform" action="{site_cgi}" method="post">を追加してください。
６．他のテンプレートでご利用になる場合
コメント表示部分のHTMLマークアップが当サイトの公開テンプレートと異なっている場合、絵文字が表示されませんので、emoji.js の下記の赤色部分を適宜修正してください。
// （１）コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comment';（１）?（３）はそれぞれ下記の青色部分に対応しますので、参考にしてください。
<!-- BEGIN comment_area -->
<div id="comments" class="comments"> ← （１）
<div class="comments-content">
<h3 class="comments-header">Comments</h3>
<!-- BEGIN comment -->
<div class="comment"> ← （２）（３）
<div class="comment-content">{comment_description}</div>
<p class="comment-footer">Posted by {comment_name} at {comment_time}</p>
</div>
<!-- END comment -->
</div>
<form action="{site_cgi}" method="post">
：
（略）
：
</form>
</div>
<!-- END comment_area -->
2006.07.11 追記
６項を追加しました。
- 記事（エントリー）に絵文字を使う for Serene Bach
≫ コメントに絵文字が使えるようになりました from 四月階段
ずっと悩んでいたコメントに絵文字を設置する方法を、いつもお世話になっている『小粋空間』さんが考え出してくださいました。 [続きを読む]
≫ 使用プログライン一覧表示+コメントに絵文字 from えちの森
先日ブログのテンプレートを新しい物にしましたその時に今まで使っていたテンプレにどのプログラインをどのように記述していたのか、メモしてなかったため、新テンプ... [続きを読む]
≫ ｺﾒﾝﾄに絵文字 from どらの戯言【本館】
ず???っと苦戦していたカスタマイズがとうとう出来ました！！「小粋空間」様の「コメントに絵文字を使う for SereneBach」です。えらい時間がかか... [続きを読む]
≫ Serene Bachカスタマイズ 覚え書き from きまぐれ日記
プラグインとかブログの表示調整とか管理画面のカスタマイズだとか。現時点で導入しているものの一覧と頂いてきたサイトさんの一覧。 [続きを読む]
≫ 解決！コメントに絵文字機能 from * Sweet + Bitter *
付けてみたは良いけれど...コメント部分に絵文字が表示されず...タグがそのまま表示されていて...原因が解らず放置してた絵文字。解決できて表示されるよう... [続きを読む]
≫ コメントに絵文字 from *Happy*Days*
やっとやっと コメントに絵文字をつけました・・。これも 長??ぃ道のロでした1度エラーがでてしまうと どこをいじってもまた エラー... [続きを読む]
≫ 続々 コメントで絵文字 from PEEKABOO
なかなかうまくいかなかったコメントの絵文字入力ですが、ようやく設置完了いたしました。基本的な設置方法は配布元である小粋空間様に掲載されていますが、yuji... [続きを読む]
≫ 記事に絵文字＆星空作成パーツ from Selbstgesprach ?徒然日記?
久々にBlogを弄ってみました[閃き]日ごろお世話になっている「小粋空間」様のカスタマイズを拝借[音符2]「記事（エントリー）に絵文字を使う for Se... [続きを読む]
≫ 絵文字の設定！ from :: go with the light ::
以前から設定しようとして挫折していたんですが小粋空間様の「記事（エントリー）に絵文字を使う for Serene Bach」「公開テンプレートのコメント... [続きを読む]
≫ カスタマイズMEMO [絵文字設置] from m*size Blog
以前使っていた□stroll::blog 様sb絵文字入力支援スクリプト1ヶ月前くらいから、急に使えなくなりました... [続きを読む]
こんにちわ。
絵文字導入してみます。（していたんですけども、エラーが出るんです。。。）
それで、やっぱり７エラーが気になるのでTOPバナーとカレンダーを替えたいと思います。
それで、まだカレンダーはしていないんですけども。。。以前の私のコメントがどこかへ行ってしまって。。。こちらで質問させてください。
(o*。_。)oペコッ
4: line 1015: <iframe> には title 属性を指定するようにしましょう。 → 解説 1936: line 1095: <a> のアンカー名 `http://pig-family.ciao.jp/blog` が見つかりませんでした。 → 解説 220
そこでアンカー名ですが。。。以前＃の後にＢＬＯＧのＵＲＬをということで、ＵＲＬを入れたところ。。。
エラーが出てしまいました。
場所が違うんですかね？
すみません。。。
４エラーのは、解説を見たんですけど。。。
分からずでした。。。
＊それと、こちらのコメントに絵文字を導入でしたが・・・エントリーに絵文字導入は。。。
すみません。。。エラーがでるんでなんとか解決したくて。。。ちなみにエラーは・・・
テンプレート「エントリー・アーカイブ」の再構築に失敗しました:<MTIfCommentsActive>タグでエラーが発生しました: 読み込むテンプレート・モジュール「smileys」が見つかりません。テンプレート「エントリー・アーカイブ」の再構築に失敗しました: <MTInclude>タグでエラーが発生しました: 読み込むテンプレート・モジュール「smiley macros」が見つかりません。
一応、こちらを導入したところへ問い合わせをしております。
お忙しいところすみません。。。
よろしくお願いいたします。
すみません。。。
以前に、７エラーのを調べていただいていたんですね。。。お手数をおかけして申し訳ないです。
(´･(●●)･)(o´＿ ＿)oﾍﾟｺﾘ
＞feiさん
こんにちは。
かなりエラーがとれましたね！
ご質問の件ですが、4エラーは
<iframe title="?" …（略）… ></iframe>
と青色部分を追加すれば結構です（「?」にはiframeのタイトルになる適当な言葉を設定してください）。「属性」というのは、タグの中に設定する xx="?" の部分を指しますので、この用語は是非覚えておきましょう。
6エラーは、href 属性の値、「http://?」の前に "#" をつけているのは誤りです。# の後ろには ページ内に指定された name 属性または id 属性に一致する名称が記述されていなければいけません（または単に "#"）。
とりあえず "#" を削除すればエラーは解消します。
それではよろしくお願い致します。
すみませんでしたぁ。
４エラーのは、なんか悪戦苦闘でしたぁ(;゜(エ)゜) アセアセ。。。
<frame title="?" …（略）… ></iframe>
このtitleを、後ろに付けてみたらOKでした。
そのときに、iframeを省略したんですけど。。。
あっていますか？？？
<iframe style="border-style : none;" src="http://pig-family.ciao.jp/cgi/apeboard_plus.cgi" width="168" height="290" frameborder="0" scrolling="no" name="rara" align="top" marginwidth="0" marginheight="0" title="bbs"></iframe>
６エラーは解決しました。
ありがとうございます。
こちらの絵文字は違ったんですね・・・・
(´･(●●)･)(o´＿ ＿)oﾍﾟｺﾘ
＞feiさん
こんにちは。
「iframeを省略したんですけど」が何を指されているのか不明ですが、上記のリストで大丈夫と思います。
ではでは。
こんばんわ。
ここで質問していいのか。。。すみません。
ブログ簡単パワーアップモバイルタイプスーパーテクニックの１０９ぺージのエントリーの絵文字を入れられるようにする。というのがあるんですけども。。。
そこで、絵文字のイメージをモバイルタイプのDRの中に「mt_static」というDRに「icons」というDRを作ってバイナリーでUPしました。
それで、JavaScriptのソースをDLしました。
それで、画像のUP先のDRのところで。。。
http://pig-family.ciao.jp/cgi/mt/mt_static/iconsとしたんです。。。
あとは。。。画像のファイル名とかの入力ですが。。。（保存の際に、文字コードはMTに合わせました。）
あと、プラグインのInsertIconというのをDLして。。。「InsertIcons.pl」に名づけて保存しました。そこで、アップロード先なんですけども・・・
モバイルタイプのDRへアップロードとあるんです。。。
それがいまいち分からず・・・
説明がうまくいなかいかもしれないんですけども・・・↓
http://pig-family.ciao.jp/cgi/mt/~（?がInsertIcon.pl)
ｍｔのDRがあるところでいいんですか？
分からないですね・・・
一応、全てしたんですけども、新規エントリーに表示されないんですね。。。
すみません。。。(´･(●●)･)(o´＿ ＿)oﾍﾟｺﾘ
＊お答えできなければ・・・自力で。。。できるかな？なんとかアドバイスお願いいたします＊
＞feiさん
こんばんは。
ご質問の件ですが、「モバイルタイプのDRへアップロード」というのは、plugins ディレクトリの中に InsertIcon.pl をアップロードすればOKです。
それから mt_icon.js というファイルがアップロードされていないかもしれませんので再度ご確認ください。
なお申し訳ありませんが、この本の内容に関するご質問は著書の藤本壱さんのブログ The Blog of H.Fujimoto へお願い致します（当サイトのカスタマイズに関するご質問であればこちらで受け付けます）。
あと細かくて恐縮ですが、
・モバイルタイプ→ムーバブルタイプ（または Movable Type）
・DR→ディレクトリ
と書かれた方が一般的です。
それではどうぞよろしくお願い致します。
ありがとうございます。
すみません。お恥ずかしいですね・・・
てっきり、そう読むとずーと思っていました。
ポリポリ f ￣．￣*)
了解いたしました。
(o*。_。)oペコッ
テンプレートのところでコメント欄の絵文字について
質問させていただきました者です。
早速、今日、お教え通りに設置いたしましたところ、
無事に絵文字が表示されて使えるようになりました。
どうもありがとうございました（またしても感涙）
TBもさせていただきました。
これからも、いろいろと参考にさせていただきます。
本当にありがとうございました（ぺこり）
＞グラツィアさん
こんにちは。
ご連絡＆トラックバックありがとうございました。
無事に表示されたようでなによりです。
ではでは！
このカスタマイズ、ず?っとやりたかったんですが、なかなかうまくいかなかったんです。
でも、ようやく表示されるようになりました！
記念にTBさせていただきますね。
＞どら♀どらさん
こんにちは。
記事参照＆トラックバックありがとうございました。
うまくできたようで良かったです。
ではでは！
コメントのアイコンを使用しようとしているのですが、うまくいきません。
アイコンは正常に表示されているのですが、アイコンオスとアイコンに指定している名前だけ、たとえば[00a]だけ表示されてしまいます。jsの設定は、設定方法の1?4まで設定しただけで特にいろってません。
分かる方よろしくお願い致します。
＞akiyannさん
こんばんは。
サイトを拝見させて頂ければ適切な回答ができると思いますので、URLを入力して再コメント願えますでしょうか。
それではよろしくお願い致します。
はじめまして
コメントに絵文字がどうしても使いたくて ここにたどりつきました。
いろいろ試したみましたが iconsだけ表示されるのですが アイコンが全然表示されないのです。
お忙しいとは思いますが アドバイスいただけると嬉しいです。宜しくお願いします。
＞瑞稀さん
こんにちは。
ご返事遅くなってすいません。
ご質問の件ですが、emoji.js の編集にケアレスミスがあるようです。
まず、
：
lst[list.length] = new Array(メモ↓', 'http://happydays.babymilk.jp/icon/p-n_emoji_23.gif');
：
lst[list.length] = new Array(曇り', 'http://happydays.babymilk.jp/icon/p-n_emoji_53.gif');
：の「メモ」「曇り」の日本語部分の前の「'」が抜けています。
また、8行目から88行目の
lst[list.length] =は
list[list.length] =ですね。
これらを修正して emoji.js をアップロードすればバッチリ表示されると思います。
なお、
：
list[list.length] = new Array('ダブルハート', 'http://happydays.babymilk.jp/icon/pp_00.gif');
：
lst[list.length] = new Array('↑', 'http://happydays.babymilk.jp/icon/pp_02.gif');
lst[list.length] = new Array('↓', 'http://happydays.babymilk.jp/icon/pp_03.gif');
lst[list.length] = new Array('←', 'http://happydays.babymilk.jp/icon/pp_04.gif');
lst[list.length] = new Array('→', 'http://happydays.babymilk.jp/p-n_pp_05.gif');
：
lst[list.length] = new Array('ビール', 'http://happydays.babymilk.jp/icon/p-n_emoji_60.gif');
：
lst[list.length] = new Array('×', 'http://happydays.babymilk.jp/ikon/p-n_emoji_84.gif');
：については URL の typo 等で画像がみつかりませんでした（テキストが代替で表示されます）。
typo については分かる範囲で色をつけてます。
それではよろしくお願い致します。
はじめまして、
以前からいろいろなカスタマイズを利用しております。とてもありがたく頂戴しています。
実は行き詰まっておりまして、教えていただきたいのですが、
アイコンとプレビュー表示は正常に表示されるのですが、送信した後のコメント表示では絵文字が出てきません。［○○］としか表示されないのです。
厚かましいお願いですが、よろしくお願いします。
連続してすみません。
どうやらIEでは表示されているようで、
Firefoxで見ると[……]となるみたいです。
解決方法はないでしょうか…
＞だらりんさん
こんばんは。
ご質問の件は「投稿したコメントに絵文字が表示されない」ということですが、こちらから Firefox1.5 および Firefox2 で拝見させて頂いた限りでは正常に表示されているようです。
例えば「学生時代の同級生に会う」のだらりんさんとかなままさんのコメントにそれぞれ2つ、計4つの絵文字が表示されています。
もし表示されていないコメントがお分かりでしたら、ご連絡頂ければ幸いです。
それではよろしくお願い致します。
本当だ。どういう訳か直っています。
手間を取らせてしまいまして、本当に申し訳ありませんでした。
今後もカスタマイズ記事を参考にさせていただきたいと思っています。
ありがとうございました。
＞だらりんさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは！
こちらのテンプレートを使っていないのですが宜しければお教え下さい。
記事に従って５．以外設定をしたのですが、コメントの上にはアイコンが表示されるのですが、いざ投稿してみますと[アイコン名]と表示されます。
どこがおかしいかわかりません＾＾；
宜しければご教授お願いしますm(__)m
別にテストでこちらのテンプレートを使いましたら簡単に動きましたので・・・
テンプレートお借りします(＞▽＜;; ｱｾｱｾ
コメント汚しすみませんでしたm(__)m
＞キスティスさん
こんにちは。
ご質問の件ですが、この記事で提供しているカスタマイズは当サイトのテンプレートに合わせています。
他のテンプレートをご利用の場合の変更方法を６項に記していますが、もしお分かりでないようでしたら再度ご連絡ください。
それではよろしくお願い致します。
yujiro様
はじめまして。
yujiro様のテンプレートをお借りし、２カラム 左サイドバー固定で現在作っているのですが、
顔文字一覧は表示されたのですが、以下エラーがでます。
ライン:67
文字:9
えらー:'undefined'はNullまたはオブジェクトではありません。
コード:0
URL: http://www.kentan.jp/kentan/diary/log/eid0.html
お忙しいとは思いますが、アドバイスいただけると嬉しいです。
宜しくお願いします。
＞kenさん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、５項の設定を行ってください。
それではよろしくお願い致します。
yujiro様
早速のご教授ありがとうございます。
確認不足で申し訳ございませんでしたm(__)m
ご助言のとおりしましたらバッチリ動作しました＾＾
以下要望？
yujiro様にお願いするのは筋違いかもしれませんが・・・
コメントは簡単に入力できるようにったのですが
本文に絵文字を入力するのを簡単にできないでしょうか？
現状は、stroll:blogさんで公開されているsb絵文字入力支援スクリプトのお気に入りに登録して毎回呼び出し使う様にするつもりですが
こちらを新規記事画面に入れることは難しいでしょうか・。・；
ある程度用意でお時間があればご対応願えませんでしょうかm(__)m
（スキルがないもので・・・ ；。；
ご検討お願いしますm(__)m
＞kenさん
こんばんは。
ご連絡ありがとうございました。
またご要望の件ですが、対応できそうです（プラグインではなく力技ですが）ので、改めてエントリーしたいと思います。
ではでは！
テンプレートをお借りして新しいブログを作成中です。
本文とコメントに絵文字を導入しようと努力しておりますが、
5回やり直しても絵文字がきちんと表示されません。
SereneBach本体のアップからやり直しても駄目でした。
どうあがいても、ばってんの四角が出てしまい、認識されていないようです。
新規エントリページ、コメント欄、共にです。
何か素人が陥りやすい落とし穴などありましたら、
お教えいただければ幸いです。
宜しくお願いいたします。
↑書く場所を間違えました。
ごめんなさい。
こんばんわ。
以前使用してた「絵文字」が使用できなくなり、困っていたところ...こちらを発見！！
早速、使用させていただきました♪
どうもアリガトウございました＾＾
＞Maronさん
こんにちは。
ご利用＆ご連絡ありがとうございました。
うまく設定できたようで良かったです。
ではでは！
こんばんわ！
少し悪戦苦闘しているのでアドバイスをお願いします＞＜
６でのエラーだと思うのですが、初めにエラーがでてしまったのは
[挨拶]とそのまんま文字が出てしまったので、記載のとおりに
<!-- BEGIN comment -->のところに
<div class="comment">?<div>を付け加えしてしまうと
デザインがすごい事になってしまいました。
テンプレートはblog TK*Plus1様の煤竹（すすたけ）を
使わせていただいてます。
何度か書き換えてみたのですが、とんでもない事になってしまったので
お忙しいと思いますがよろしくお願いします＞＜
今は戻してあります。
こんばんわ。
あれから、記事（エントリー）に絵文字を使う for Serene Bachを
参考に試してみたら、一発で解決することができました＞＜
自分でもビックリしてます…。もっと色んな事を試してから質問するべきでした。
申し訳ございません＞＜
＞chiさん
こんばんは。
ご利用ありがとうございます。
ご質問の件、自己解決されたようでなによりです。
ではでは！
yujiroさま、こんにちわ。
古い記事へのコメントで失礼します。
16番瑞稀さんと同じく、icon:は表示されますが
画像は表示されません。
ダブルクォーテのミスやパスの確認もしたのですが
emoji.js内に記載したalertも動作しませんでした(,,・ω・)
今のserene bachでは利用出来ないんでしょうか。
お忙しい中申し訳ありませんが、改善策を教えてください。
yujiroさま。
連続コメ失礼致します。
改善策を教えていただくためにタグ等を残しておこうと思ったのですが
コメントが投稿出来なくなってしまいましたので一旦削除しました。
またいつかチャレンジしてみますので
そのときはよろしくお願いします(*T^T)
＞ちょこらてさん
こんにちは。
ご質問の件、了解致しました。
またぜひチャレンジしてください。
ではでは！
: February 6, 2009 12:25 PMyujiroさま。
たびたび失礼致します。
コメントが入力できない問題が
意外と早期解決しましたので再度質問させて頂きます。
内容は38番のとおりです。
Serene Bachのバージョンは2.20Rです。
お時間があるときにでもご回答頂ければ幸いです(>_<)
＞ちょこらてさん
こんばんは。
ご質問の件ですが、emoji.js の一番最後の行に「→」みたいな文字が含まれているので、それを削除すれば動作するようです。
それではよろしくお願い致します。
: February 15, 2009 10:05 PMyujiro様。
ありがとうございました！
さっそくチャレンジしてみたのですが、
emoji.jsファイルに該当文字はありませんでした。。
文字コードやエラーコンソールも確認しましたが
指定された箇所以外は触っていないので全く分かりません(T_T)
テンプレートが原因かもしれないので、今回は諦めて
違うテンプレートを利用することがあればまた取り入れてみます。
お忙しい中失礼しましたっ。
