sb で記事（エントリー）とコメントに絵文字を使う: 小粋空間

Top ＞ CMS・ブログ＞ sb ＞絵文字＞ sb で記事（エントリー）とコメントに絵文字を使う

sb で記事（エントリー）とコメントに絵文字を使う

Posted at January 27,2007 1:35 AM
Tag：[Customize, Image, sb]

sb（Serene Bach の前身）の記事およびコメント欄に絵文字を入力できるようにするカスタマイズです。
sb の記事投稿画面に絵文字を適用した完成例

これは現在公開中の「記事（エントリー）に絵文字を使う for Serene Bach」を sb 用に書き直したものです。

理由は、stroll::blog さんの「sb絵文字入力支援スクリプト」で提供されているスクリプト（ファイルではなく URL 配布）が 404 Not Found になってしまったようで、ふと元記事のコメント欄を拝見したところ、sb で困っている方も結構いらっしゃるかもしれないと思ったためです。

このカスタマイズは sb110R ? sb119R が対応可能と思います。設定方法は当サイトで公開しているテンプレートを例にしていますが、一部修正すれば他のテンプレートでも利用可能です。

１．記事投稿画面の修正

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

lib/lang/ja/admin.html

をダウンロードして、任意のエディタで開き、１．１?１．３項の修正を行ないます。
修正する自信のない方は、下記のリンクから修正済の admin.zip（または admin.lzh）をダウンロードして解凍し、２項に進んでください。

admin.zip / admin.lzh

このファイルを利用するとページ上部にある sb のリンクが新しい URL（http://serenebach.net/）になるというおまけつきです。

１．１ script 要素の追加

ファイルの 10 行目に青色の script 要素を追加します。

　　　　　　　　　　　：
<script type="text/javascript" charset="EUC-JP" src="{sb_site_js}"></script>
<script type="text/javascript" src="emoji.js" charset="utf-8"></script>
<title>{sb_site_title}</title>
　　　　　　　　　　　：

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

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

　　　　　　　　　　　：
<!-- BEGIN sb_entry_toolhig_body -->
<a href="#" onclick="return changeHeight('entry_body',-1);"><img src="{sb_site_parts}_parts/up.gif" width="30" height="20" alt="縮小" title="縮小" /></a>
<a href="#" onclick="return changeHeight('entry_body',1);"><img src="{sb_site_parts}_parts/down.gif" width="30" height="20" alt="拡大" title="拡大" /></a>
<!-- END sb_entry_toolhig_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" tabindex="4">{sb_entry_body}</textarea>
<div class="entry_tool">
<label>イメージ挿入：</label>
<select onchange="addImage('entry_body',this.value);">
<option value="">イメージを選択します</option>
{sb_entry_image}
</select>
<input type="button" value="新規…" onclick="showForm('edit_addfile')" />
</div>
　　　　　　　　　　　：

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

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

　　　　　　　　　　　：
<!-- BEGIN sb_entry_toolhig_more -->
<a href="#" onclick="return changeHeight('entry_more',-1);"><img src="{sb_site_parts}_parts/up.gif" width="30" height="20" alt="縮小" title="縮小" /></a>
<a href="#" onclick="return changeHeight('entry_more',1);"><img src="{sb_site_parts}_parts/down.gif" width="30" height="20" alt="拡大" title="拡大" /></a>
<!-- END sb_entry_toolhig_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" tabindex="5">{sb_entry_more}</textarea>
<div class="entry_tool">
<label>イメージ挿入：</label>
<select onchange="addImage('entry_more',this.value);">
<option value="">イメージを選択します</option>
{sb_entry_image}
</select>
<input type="button" value="新規…" onclick="showForm('edit_addfile')" />
</div>
　　　　　　　　　　　：

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

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

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

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

emoji.js

４．スクリプトに絵文字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 で sb をお使いでも、ファイルの文字コードは 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 -->

Posted by yujiro このページの先頭に戻る

小粋空間 - a cheap joke and a play on words site