Top > CMS・ブログ > Serene Bach > カスタマイズ > 絵文字 > 2006年5月
2006年5月14日

公開テンプレートのコメントに絵文字を使う for SereneBach

May 14,2006 1:10 AM
Tag:[, , , ]
Permalink

公開テンプレートのコメントに絵文字を使うSerene Bach 用公開テンプレートのコメント欄に stroll::blog さんのコメントにカスタマイズ絵文字入力機能を適用するカスタマイズです。
上記の記事をそのままテンプレートに反映させれば良いのですが、設定についてのご質問を頂きましたので、より簡単に設定できるよう設定方法を若干変更してみました。

完成するとスクリーンショットのように絵文字が表示されます。テキストエリアにフォーカスがある状態でこの絵文字をクリックすると、テキストエリアに絵文字に対応するテキスト文字が表示され、投稿後にテキスト文字が絵文字に変換されて表示される仕組みになっています。

注:絵文字の表示位置やコメントとして表示された絵文字のスタイル等についてのご質問はご遠慮ください(自己解決願います)。

1.スクリプトのダウンロード

下記のスクリプトをダウンロードして emoji.js というファイル名で保存してください。これは元カスタマイズ記事の JavaScript をファイルにまとめたものです。ご自身で元サイトからスクリプトをコピーして作成されても結構ですが、下記のスクリプトには公開テンプレートに適用させるための面倒な設定を予め施しています。

emoji.js

2.スクリプトに画像の設定

絵文字にしたい画像をダウンロードしてください。実験では下記サイトからダウンロードさせて頂きました。

.:. 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 になっていることを確認してください。意識的に他の文字コードに変更する場合は4項の script タグの charset 属性を変更する必要があります。

3.スクリプトのアップロード

スクリプトの設定が完了したら保存して、index.html と同じディレクトリに emoji.js をアップロードしてください。

4.テンプレートの修正

<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マークアップでコメントフォームよりも先に別のフォームが記述)されている場合、正常に表示されない可能性があります。その場合のみ、5項を実施してください。

5.フォームがページに2つ以上ある場合(必要な方のみ)

スクリプトの

// コメントを入力するテキストエリアを指定
var textarea = 'document.forms[0].description';

// コメントを入力するテキストエリアを指定
var textarea = 'document.comform.description';

に変更して、テンプレートの form タグに name 属性(青色部分)

<form name="comform" action="{site_cgi}" method="post">

を追加してください。

6.他のテンプレートでご利用になる場合

コメント表示部分のHTMLマークアップが当サイトの公開テンプレートと異なっている場合、絵文字が表示されませんので、emoji.js の下記の赤色部分を適宜修正してください。

// (1)コメント全体のタグの id 属性
var commentAreaIdName = 'comments';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'comment';

(1)?(3)はそれぞれ下記の青色部分に対応しますので、参考にしてください。

<!-- BEGIN comment_area -->
<div id="comments" class="comments"> ← (1)
<div class="comments-content">
<h3 class="comments-header">Comments</h3>
 
<!-- BEGIN comment -->
<div class="comment"> ← (2)(3)
<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 追記
6項を追加しました。

Comments [43] | Trackbacks [10]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3