livedoor Blogで設置する方法を解説させていただこうかと思います。
私がこのカスタマイズをした時の記憶をたどって書いている為、所々間違っている部分があるかもしれません。
と、1から説明を書こうと思っていましたが、詳しい人はstrollさんが解説されている方法で理解できるはずなので
ここではもっと簡単に設置できるようにlivedoor Blog用に最適化したjavascriptを使って設置する方法を解説させていただく事にしました。
出来るだけわかりやすく書くように心がけていますが、なにぶん私基準なのでわからない所が多々あると思います。(汗)
それでははじめます。
はじめにこのスクリプトの配布に際し、快く承諾していただいたstrollさんには心から感謝いたします！
またstrollさんが作られものを私がひとまとめにしただけですので、権利など諸々はstorllさんに帰属します。
また、設定した絵文字の数が多すぎても同じですのでご注意ください。
javascriptをブラウザ側で切ってしまっている方は動作しません。
またPCの環境よっては動作しない場合がありますのでご注意くださいませ。
livedoor Blogで予め用意されている物もしくは
stroll:blogさんでご紹介されている物で十分だと思います。
ほかにも絵文字を扱った素材サイトさんがあるので気に入った物を探してみてください。自作するのもありです。
※うちで使っている絵文字は一応オリジナルなので使わないようにしてください。お願いします。
・EUCの文字(漢字)コードをあつかえるテキストエディタ。
EUCで保存しないと正常に動作しない可能性があるので用意してください。
WINだとTeraPad。macだとYooEdit、iText、ミミカキエディットなどがフリーソフトではいいそうです。
これ以外にもあるのでvectorなどのソフトウェアダウンロードサイトで「テキストエディタ」で検索してお好きなエディタを選択してください。
・絵文字入力用スクリプト。
livedoor Blog用に最適化したjavascriptファイルを下のDOWNLOADに用意していますのでダウンロードしてください。
DOWNLOAD
※右クリックメニューから保存してください。macはマウス長押しだった・・・かな？
ファイルタイトルには「笑」や「汗」などの名前をつけておくと、後々わかりやすくてGOODです。
サムネイルを作成するにはチェックを入れないでください。
まず日本語部分が文字化けしていないかを確認してください。
文字化けしているときはソフトウェアの設定で文字コードをEUCに変えてみるといいと思います。
※ソフトウェアによって設定方法が違うので、わからない時はソフトの説明書きをよくお読みください。
正常にファイルが開かれましたら画像の設定を始めます。
ファイルの上のほうにある
ファイルのアップロードから先ほどアップロードしておいたそれぞれの絵文字のURLを取得しつつ
それぞれの絵文字の設定が済みましたらファイルを保存してください。
※必ずEUCという文字コードで保存してください。
最後に設定しおわったjavascriptファイルを管理画面の「ファイルのアップロード」機能を使ってアップロードして下さい。
※無料版の方は下の4bにアップロードしなくても使える方法を載せました。
ファイルのアップロード制限がされている為、4aの後半で紹介している方法ではできません。
ですがHTMLテンプレートにjavascriptを直接記述すれば問題なく使用できます。
まず個別記事のHTMLテンプレートの
続いて下の5番の項目のはじめの編集(<script 〜〜>の所)だけを無視して作業を進めてください。
とアクセスしテーマの設定ウィンドウを開いてください。
ウィンドウの上のほうに
編集の前にHTMLテンプレートの全文(<html>から</html>まで)をコピーしてテキストエディタに貼り付けそれぞれ保存しておきましょう。
保存してからテキストエディタ側で編集したほうが間違いがあればすぐ元に戻せますし便利ですよ。
ではまず先ほどアップロードしたスクリプトのURLをファイルのアップロードから取得します。それから
次に
次に
上の三つの箇所を編集しましたら、エディタから全文をコピーして先ほど開いた個別記事のHTMLテンプレートの編集画面へ貼り付けて保存してください。
保存後再構築していただくのですが、時間の節約する為にうまく動作するまでは最新記事だけを再構築するのをオススメします。
そのため配布しているjavascriptファイルのまま使用すると絵文字リストは表示されますが、
コメント本文中の絵文字用の文字列が変換されないという現象が起こります。
解消させるにはjavascriptの
・コメント欄の上か下に絵文字が表示されているか
・画像ををクリックするとコメント欄に[笑]などが入るか
をチェック後、適当な文と絵文字をコメント欄に記入します。
書込ボタンを押して投稿し、うまく絵文字が表示されれば成功です！
最後にBlogの再構築(全アーカイブ)を実行してください。
以上で説明は終わりです。
あまりわかりやすくないような気がしますが、設置に関してわからないことがありましたらお聞きください。
できるかぎりお答えさせていただきます。
またstrollさんが作られものを私がひとまとめにしただけですので、権利など諸々はstorllさんに帰属します。
1. 使用するにあたっての注意。
コメントの数が多くなると、絵文字の変換処理に時間がかかり表示が遅くなったり重くなったりします。また、設定した絵文字の数が多すぎても同じですのでご注意ください。
javascriptをブラウザ側で切ってしまっている方は動作しません。
またPCの環境よっては動作しない場合がありますのでご注意くださいませ。
2. 用意しておくもの。
・絵文字用の画像。livedoor Blogで予め用意されている物もしくは
stroll:blogさんでご紹介されている物で十分だと思います。
ほかにも絵文字を扱った素材サイトさんがあるので気に入った物を探してみてください。自作するのもありです。
※うちで使っている絵文字は一応オリジナルなので使わないようにしてください。お願いします。
・EUCの文字(漢字)コードをあつかえるテキストエディタ。
EUCで保存しないと正常に動作しない可能性があるので用意してください。
WINだとTeraPad。macだとYooEdit、iText、ミミカキエディットなどがフリーソフトではいいそうです。
これ以外にもあるのでvectorなどのソフトウェアダウンロードサイトで「テキストエディタ」で検索してお好きなエディタを選択してください。
・絵文字入力用スクリプト。
livedoor Blog用に最適化したjavascriptファイルを下のDOWNLOADに用意していますのでダウンロードしてください。
DOWNLOAD
※右クリックメニューから保存してください。macはマウス長押しだった・・・かな？
3. 画像をアップロード。
絵文字用に用意した画像を管理画面の「ファイルのアップロード」機能を使って全てアップロードして下さい。ファイルタイトルには「笑」や「汗」などの名前をつけておくと、後々わかりやすくてGOODです。
サムネイルを作成するにはチェックを入れないでください。
4a. 画像の設定とスクリプトのアップロード。
先ほどダウンロードしておいたjavascriptファイルをテキストエディタで開いて下さい。まず日本語部分が文字化けしていないかを確認してください。
文字化けしているときはソフトウェアの設定で文字コードをEUCに変えてみるといいと思います。
※ソフトウェアによって設定方法が違うので、わからない時はソフトの説明書きをよくお読みください。
正常にファイルが開かれましたら画像の設定を始めます。
ファイルの上のほうにある
// 画像名、画像URLの設定
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
return list;
この部分をlist[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
list[list.length] = new Array('画像名', '画像URL');
return list;
ファイルのアップロードから先ほどアップロードしておいたそれぞれの絵文字のURLを取得しつつ
// 画像名、画像URLの設定
list[list.length] = new Array('笑', 'アップロードした絵文字のURL');
list[list.length] = new Array('汗', 'アップロードした絵文字のURL');
list[list.length] = new Array('泣', 'アップロードした絵文字のURL');
・
・
・
return list;
このように画像名(文中に挿入される文字です)と画像のURLを設定したい数だけ増やしてください。list[list.length] = new Array('笑', 'アップロードした絵文字のURL');
list[list.length] = new Array('汗', 'アップロードした絵文字のURL');
list[list.length] = new Array('泣', 'アップロードした絵文字のURL');
・
・
・
return list;
それぞれの絵文字の設定が済みましたらファイルを保存してください。
※必ずEUCという文字コードで保存してください。
最後に設定しおわったjavascriptファイルを管理画面の「ファイルのアップロード」機能を使ってアップロードして下さい。
※無料版の方は下の4bにアップロードしなくても使える方法を載せました。
4b. javascriptファイルがアップロードできない！
画像の設定までは問題ありませんが、PROユーザ以外の無料版をお使いの方はファイルのアップロード制限がされている為、4aの後半で紹介している方法ではできません。
ですがHTMLテンプレートにjavascriptを直接記述すれば問題なく使用できます。
まず個別記事のHTMLテンプレートの
<body>bodyタグの直前に
<script type="text/javascript">赤字を入力。そしてスクリプトファイルを全て選択してコピーして
<!--
// -->
</script>
<body>
<script type="text/javascript">青字のように貼り付けます。
<!--
//----------------------------------------
//
// コメントにカスタマイズ絵文字入力機能 at livedoor Blog
・
・
（中略）
・
・
//--------画像変換スクリプトココまで
// -->
</script>
<body>
続いて下の5番の項目のはじめの編集(<script 〜〜>の所)だけを無視して作業を進めてください。
5. HTMLテンプレートの編集。
管理画面から「Blogの設定/管理」→「デザインの設定」→「スタンダード」→「CUSTOM」とアクセスしテーマの設定ウィンドウを開いてください。
ウィンドウの上のほうに
2004.7.9 HTMLテンプレート編集機能ができました！こちらのページからどうぞ。
というのがありますので、こちらのページをクリックして「個別記事」のHTMLテンプレートの編集画面へ進んでください。編集の前にHTMLテンプレートの全文(<html>から</html>まで)をコピーしてテキストエディタに貼り付けそれぞれ保存しておきましょう。
保存してからテキストエディタ側で編集したほうが間違いがあればすぐ元に戻せますし便利ですよ。
ではまず先ほどアップロードしたスクリプトのURLをファイルのアップロードから取得します。それから
</head>
の直上に<script type="text/javascript" charset="EUC-JP" src="アップロードしたスクリプトのURL"></script>
</head>
このように赤文字部分を入力して下さい。</head>
次に
<textarea id="text" name="body" rows="10" cols="50"></textarea>
の直前か直後に(絵文字を上に表示したい時は直前、下の場合は直後)<td>
<textarea id="text" name="body" rows="10" cols="50"></textarea>
<div style="width:400px;">
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList();
// -->
</script>
</div>
<td>
このように赤字部分を入力してください。(例は下に表示する場合です)<textarea id="text" name="body" rows="10" cols="50"></textarea>
<div style="width:400px;">
<script type="text/javascript">
<!--
writeCustmizeEmojiTagList();
// -->
</script>
</div>
<td>
次に
</table>
の直下に</table>
<script type="text/javascript">
<!--
changeCustmizeEmojiTag();
// -->
</script>
このように赤文字部分を入力してください。<script type="text/javascript">
<!--
changeCustmizeEmojiTag();
// -->
</script>
上の三つの箇所を編集しましたら、エディタから全文をコピーして先ほど開いた個別記事のHTMLテンプレートの編集画面へ貼り付けて保存してください。
保存後再構築していただくのですが、時間の節約する為にうまく動作するまでは最新記事だけを再構築するのをオススメします。
6. リニューアル後、新しいテンプレートを使用している場合。
リニューアル後に作られたテンプレートは以前と比べて構造などが変わっています。そのため配布しているjavascriptファイルのまま使用すると絵文字リストは表示されますが、
コメント本文中の絵文字用の文字列が変換されないという現象が起こります。
解消させるにはjavascriptの
// （３）各コメントの class 属性この赤文字部分を
var commentBodyClassName = 'comments-body';
// （３）各コメントの class 属性というように編集して保存してあげてください。
var commentBodyClassName = 'commenttext';
7. 実際にコメントしてみる。
再構築した個別記事にアクセスして・コメント欄の上か下に絵文字が表示されているか
・画像ををクリックするとコメント欄に[笑]などが入るか
をチェック後、適当な文と絵文字をコメント欄に記入します。
書込ボタンを押して投稿し、うまく絵文字が表示されれば成功です！
最後にBlogの再構築(全アーカイブ)を実行してください。
あまりわかりやすくないような気がしますが、設置に関してわからないことがありましたらお聞きください。
できるかぎりお答えさせていただきます。
![cie.buena.suerte[at]gmail.com](http://rosea.jpn.org/gmail.png "cie.buena.suerte[at]gmail.com"){kind=small}
rocco Says...
#1 at February 08, 2005 10:07