これにここ3日間ほど毎晩格闘しました[汗]

記事とコメントに絵文字を入れることがSerene Bachでもできるんだと知りこれはやってみよう!と取り掛かることにしました。

小粋空間のYujiroさんの作られた記事(エントリー)に絵文字を使う for Serene Bachを見てカスタマイズしていきました。

実際は小粋空間さんのエントリーで設定されるとして、ここでは私が悩んだところを記事にします。
同じように設定に悩まれている方の参考になれば幸いです。

[双葉]まずSerene Bach をインストールしているフォルダの配下にある、
lib/resource/ja/entry.html を
ダウンロードして、任意のエディタ(私はxyzzyを使用しています)で開き、修正をしていくことになります。
修正する自信のない方向けに修正済の entry.zip(または entry.lzh)を用意して下さっているので、私はそれをダウンロードして使いました。
なお自分のブログはUTF-8版なので、同じようにUTF-8版をダウンロードしました。

[双葉]説明に書かれているとおりにscriptを追加していきます。

[双葉]ダウンロードした修正済みのentry.html を元のディレクトリにアップロードします。

[双葉]emoji.js をダウンロードします。

[双葉]emoji.js を任意のエディタで開き、自分の好きな絵文字を挿入します。

// コメントにカスタマイズ絵文字入力機能:画像設定
function getCommentEmojiList() {
var list = new Array();
// 画像名、画像URLの設定
list[list.length] = new Array(‘ハート’, ‘http://アップロードした画像のURL’);
list[list.length] = new Array(‘失恋’, ‘http://アップロードした画像のURL’);
                  : 
return list;
}

ちなみに今設定している絵文字は以前からパンダやトナカイ、きのこ画像を使わせて頂いていATP’s 素材置き場さん(2012/11/14リンク切れ)からお借りしています。
昨日までは*-Parthenon-*さん(2012/11/14リンク切れ)でお借りした絵文字アイコンで設定していました。

[双葉]修正した emoji.js を、index.html と同じディレクトリにアップロードします。私の場合はHPのindexとブログのindexがあるのでアップロード先を間違えているのに気づくのに多少時間がかかりました[ぐったり]

[双葉]テンプレートの修正
説明にあるとおりに修正していきます。

ここで大きくつまづいたのが、記事関連ブロック終了の直前にいれる、『記事に表示された絵文字に対応する記号を実際の絵文字に変換するためのスクリプト』を追加した時のことです。
なかなか絵文字が表示されません。
小粋空間さんが設定として書かれていたスクリプト内の”content“ではなく(中央カラム全体を括っている div 要素の id 属性)が一例としてあげられている “main” が私のブログでの設定でした。

他にやったミスとしてはemoji.jsで設定する絵文字のアップロード先のURLを間違えて画像が表示されない、ということがありました。

ここまで設定がうまくいっていれば絵文字が表示されているはずです[love]

続きはまた明日以降に書かせて頂きます。

2012/11/14現在 この機能は利用していません。