Top > CMS・ブログ > Serene Bach > カスタマイズ > 絵文字 > 2006年12月
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」と設定内容が若干異なるため、記事とコメントの両方に絵文字と併用したい場合は、本エントリーのカスタマイズを行ってください(本記事はコメントの絵文字にも対応しています)。

1.記事投稿画面の修正

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

lib/resource/ja/entry.html

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

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

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

1.1 script 要素の追加

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

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

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

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

<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>

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

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

<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>

2.ファイルのアップロード

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

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

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

emoji.js

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

3.1 絵文字一覧表示部分(赤色を削除し、青色を追加)

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

3.2 絵文字表示部分(赤色を削除し、青色を追加)

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

4.スクリプトに絵文字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 のままお使いください。

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

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

6.テンプレートの修正

</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'); // 続きに絵文字を表示する

を削除してください。

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

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

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

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

まずコメントの 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」のカスタマイズを行っている場合は設定内容が微妙に異なるので、以前の設定は一旦削除した方がいいかもしれません。

8.CSS 設定

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

.emoji{
    vertical-align: middle;
}

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

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

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

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

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

Comments [188] | Trackbacks [28]
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