<< 管理画面 | Main
Top ＞ Serene Bach ＞ カスタマイズ ＞ 絵文字 [全て開く]
2006年12月25日

記事（エントリー）に絵文字を使う for Serene Bach

December 25,2006 1:25 AM
Tag：[, , ]
Permalink

Serene Bach の記事（エントリー）およびコメント欄に絵文字を入力できるようにするカスタマイズです。
エントリーに絵文字を使う for SereneBach

これは「公開テンプレートのコメントに絵文字を使う for SereneBach」のテクニックを記事部分に適用させたものです。

記事に絵文字を入力するカスタマイズは stroll::blog さんの「sb絵文字入力支援スクリプト」がポピュラーですが、「ブラウザに依存しないで入力する方法はないですか？」という質問を頂いたので、本エントリーにて紹介致します。

設定方法は当サイトで公開しているテンプレートを例にしていますが、一部修正すれば他のテンプレートでも利用可能です。

なお「公開テンプレートのコメントに絵文字を使う for SereneBach」と設定内容が若干異なるため、記事とコメントの両方に絵文字と併用したい場合は、本エントリーのカスタマイズを行ってください（本記事はコメントの絵文字にも対応しています）。

１．記事投稿画面の修正

Serene Bach をインストールしている配下にある、

lib/resource/ja/entry.html

をダウンロードして、任意のエディタで開き、１．１～１．３項の修正を行ないます。
修正する自信のない方は、下記のリンクから修正済の entry.zip（または entry.lzh） をダウンロードして解凍し、２項に進んでください。なお、EUC-JP 版とUTF-8 版でダウンロードするファイルが異なりますのでご注意ください。

EUC-JP版
entry.zip / entry.lzh
UTF-8版
entry.zip / entry.lzh

このファイルは 2.05R をもとに修正したものです（2.09R2.12R まで確認済）。Serene Bach バージョンアップには対応できていないかもしれませんので予めご了承ください。

１．１ script 要素の追加

ファイルの一番先頭に下記を追加します。

<script type="text/javascript" src="emoji.js" charset="utf-8"></script>

１．２ 「本文」への絵文字一覧表示スクリプトの追加

「本文」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。

<div class="entry_tool">
<!-- BEGIN sb_entry_extool_body -->
<a href="#" onclick="return addHtmlTag('entry_body','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>
<!-- END sb_entry_extool_body -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 5.5em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_body');
</script>
</dd></dl>
<textarea name="entry_body" id="entry_body" rows="{sb_entry_body_rows}" cols="40" class="text">{sb_entry_body}</textarea>

１．３ 「続き」への絵文字一覧表示スクリプトの追加

「続き」部分も絵文字を使いたい場合は、「続き」のテキストエリア上部へ絵文字一覧を表示するタグを追加します。

<div class="entry_tool">
<!-- BEGIN sb_entry_extool_more -->
<a href="#" onclick="return addHtmlTag('entry_more','{sb_entry_extool_elem}','{sb_entry_extool_opt}');"><img src="{sb_site_template}tool/{sb_entry_extool_img}.gif" width="30" height="20" alt="{sb_entry_extool_alt}" title="{sb_entry_extool_alt}" /></a>
<!-- END sb_entry_extool_more -->
</div>
<dl><dt style="display:inline;">絵文字</dt><dd style="margin-left: 8.1em;">
<script type="text/javascript">
writeCustmizeEmojiTagList('document.mainform.entry_more');
</script>
</dd></dl>
<textarea name="entry_more" id="entry_more" rows="15" cols="40" class="text">{sb_entry_more}</textarea>

２．ファイルのアップロード

修正した entry.html を元のディレクトリにアップロードします。

３．スクリプトのダウンロード

下記のリンクより emoji.js をダウンロードしてください。

emoji.js

この emoji.js は「公開テンプレートのコメントに絵文字を使う for SereneBach」で配布しているものと若干異なります。
「公開テンプレートのコメントに絵文字を使う for SereneBach」で配布している emoji.js をお使いの場合は、下記の修正を行ってください。上記のリンクよりダウンロードしてお使いになる場合は、そのまま４項へ進んでください。

３．１ 絵文字一覧表示部分（赤色を削除し、青色を追加）

function writeCustmizeEmojiTagList(textarea) {
    // コメントを入力するテキストエリアを指定
    var textarea = 'document.mainform.entry_body';
 
    // ***************** 設定ここまで *****************

３．２ 絵文字表示部分（赤色を削除し、青色を追加）

// コメントにカスタマイズ絵文字入力機能：画像変換
function changeCustmizeEmojiTag(commentAreaIdName, commentAreaTag, commentBodyClassName) {
    // （１）コメント全体のタグの id 属性
    var commentAreaIdName = 'comments';
    // （２）コメント全体のタグ名
    var commentAreaTag = 'div';
    // （３）各コメントの class 属性
    var commentBodyClassName = 'comment';
 
    // ***************** 設定ここまで *****************
    var list = getCommentEmojiList();
    var att = getCustmizeEmojiAttribute();
    var objComArea;
    var classComArea;
    var objComBody = new Array();

４．スクリプトに絵文字URLの追加

emoji.js を任意のエディタで開き、ご自身のお好きな絵文字を下記の青色のように挿入してください。

// コメントにカスタマイズ絵文字入力機能：画像設定
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;
}

ちなみに、冒頭のスクリーンショットに表示させている画像は下記のサイトよりお借りしました。ありがとうございました。

.:. PEPPER .:. FREE GRAPHICS FOR WEB SITE

注：この emoji.js のファイルの文字コードは UTF-8 です。EUC-JP 版の Serene Bach をお使いでも、ファイルの文字コードは UTF-8 のままお使いください。

５．スクリプトのアップロード

修正した emoji.js を、index.html と同じディレクトリにアップロードします。

６．テンプレートの修正

</head> の直前に下記のタグを追加します。

<script type="text/javascript" src="{site_top}emoji.js" charset="utf-8"></script>

そして記事関連ブロック終了の直前に、記事に表示された、絵文字に対応する記号を実際の絵文字に変換するためのスクリプト（青色部分）を追加します。

<!-- BEGIN entry -->
<h2 id="entry{entry_id}" class="date">{entry_date}</h2>
<div class="entry">
<h3 class="entry-header">&#9679;<a href="{entry_permalink}">{entry_title}</a></h3>
<div class="entry-content">
<div class="entry_body">{entry_description}</div>
<div class="entry_more">{entry_sequel}</div>
</div>
<div class="entry-footer">
Posted by {user_name} at {entry_time} | Category: {category_name} | {comment_num} | {trackback_num}
</div>
</div>
{trackback_auto_discovery}
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('content', 'div', 'entry_body'); // 本文に絵文字を表示する
changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する
// -->
</script>
<!-- END entry -->

赤色部分はご利用のテンプレートによって異なります、それぞれの意味は下記の通りです。

  • content：中央カラム全体を括っている div 要素の id 属性（一例として "main" という設定のテンプレートが結構あるようですが、ご利用のテンプレートをよくご確認ください）
  • div：記事またはコメント本文全体を括っているタグ
  • entry_body / entry_more：記事またはコメント本文全体を括っているタグの class 属性

要するに画像を変換する場所を絞り込んでいる訳です。この部分でつまづく場合が多いようですが、ご利用のテンプレートおよび本エントリーのコメント欄等で不具合をよくご確認の上、どうしても分からない場合のみご質問ください。

changeCustmizeEmojiTag の起動は、「本文「用と「続き」用の2行があります。「続き」に絵文字を使わない場合は

changeCustmizeEmojiTag('content', 'div', 'entry_more'); // 続きに絵文字を表示する

を削除してください。

記事に絵文字を表示するカスタマイズは以上です。

  • 管理画面の新規記事および記事編集画面に絵文字が表示されること
  • 絵文字をクリックすると、テキストエリアに絵文字に対応した値が設定されること
  • 記事を公開すると、ブログの記事部分に絵文字が表示されること

を確認してください。
コメントにも絵文字を利用する場合は次項のカスタマイズを行ってください。

７．コメント部分にも絵文字を利用する場合

まずコメントの form 属性に name 属性を追加してください。

<form name="comform" action="{site_cgi}" method="post">
 
<div class="comments-open" id="comments-open">
<h2 class="comments-open-header">Comment form</h2>
<div class="comments-open-content">
 
<div id="comments-open-data">

次に、テンプレートのコメント部分に絵文字を表示するためのタグを追加します。

<dl>
<dt><label for="name" id="labelname">name:</label></dt>
<dd><input type="text" tabindex="1" name="name" id="name" value="{cookie_name}" size="20" /></dd>
<dt><label for="email" id="labelemail">email:</label></dt>
<dd><input type="text" tabindex="2" name="email" id="email" value="{cookie_email}" size="30" /></dd>
<dt><label for="url" id="labelurl">url:</label></dt>
<dd><input type="text" tabindex="3" name="url" id="url" value="{cookie_url}" size="30" /></dd>
<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 style="margin-left: 5.5em;">
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList('document.comform.description');
// -->
</script>
</dd>
<dt><label for="description" id="labeldescription">comments:</label></dt>
<dd><textarea tabindex="5" id="description" name="description" rows="8" cols="45"></textarea></dd>
</dl>

最後にコメント関連ブロック終了の直前に青色のタグを追加します。

</form>
</div>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag('comments', 'div' ,'comment');
// -->
</script>
<!-- END comment_area -->

「公開テンプレートのコメントに絵文字を使う for SereneBach」のカスタマイズを行っている場合は設定内容が微妙に異なるので、以前の設定は一旦削除した方がいいかもしれません。

８．CSS 設定

絵文字とテキストがきれいに並ばない場合は、下記のCSSを追加してください。

.emoji{
    vertical-align: middle;
}

必要に応じて margin / padding プロパティも加えてください。

2007.01.09 追記
６項の説明を追加しました。

2007.01.25 追記
EUC-JP 版に対応しました。

2007.03.10 追記
挿入される絵文字の img タグに class 属性を付与しました。それに伴い８項を追加しました。

2007.03.20 追記
green lettuce さんより頂いたコメントより、適用可能バージョンを 2.12R に修正しました。

Comments [181] | Trackbacks [28]
2006年5月14日

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

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

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

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

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

１．スクリプトのダウンロード

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

emoji.js

２．スクリプトに画像の設定

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

.:. 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 追記
６項を追加しました。

Comments [37] | Trackbacks [10]
Now loading...
List of "絵文字"
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
＜ Default ＞
For defective color vision
Gray Scale
RGB Color
Search this site

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

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner（RSS1.0/RSS2.0/Atom）
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
 
List Me!