CALENDAR
S M T W T F S
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
ARCHIVES
CATEGORIES
RECOMMEND
FROM ME TO YOU
FROM ME TO YOU (JUGEMレビュー »)
YUI,yukamatsumoto,Hideyuki“Daichi”Suzuki,Ikoman,northa+,COZZi
RECOMMEND
<< データ移行完了の判別方法。 | main | いろいろ冷めてきた。 >>
スポンサーサイト

一定期間更新がないため広告を表示しています

| - | | - | - |
コメント絵文字機能を旧テンプレートでも。
livedoor Blog サポート同盟で質問されていた新機能を旧テンプレートで使う方法を紹介します。

移行が進んでいけば他にも必要になりそうな人がでてくると思うので先に記事にしちゃおうって事ですね。



とりあえず今回はコメント欄でも絵文字を使用する方法です。(ほぼ同盟BBSでの発言のコピペですが)

※また、サイドバーにあるコメントに絵文字機能とは別物です。





まずブログの管理画面に入り「ブログの設定/管理」→「デザインの設定」と言う風にアクセスし

一番右下にある「カスタマイズ」をクリックしてください。



次に「個別記事ページ」をクリックして個別記事のHTMLテンプレートを表示させてください。

編集する前にはバックアップをとってから行なうことをオススメします。



でははじめに

<title><$BlogTitle ESCAPE$>:<$ArticleTitle ESCAPE$></title>
このTITLEタグの直下に

<title><$BlogTitle ESCAPE$>:<$ArticleTitle ESCAPE$></title>

<script type="text/javascript" src="<$EmojiJsUrl$>"></script>
赤文字部分を入力。



次にコメントフォームの

<tr>

<td valign="top"><label for="text">コメント: </label></td>

<td><textarea id="text" name="body" rows="10" cols="50"></textarea></td>

</tr>
この部分を

<tr>

<td valign="top"><label for="text">コメント: </label></td>

<td>

<a href="javascript:void(0);" id="emojiLink1" onClick="showEmojiPanel(this.id, 'text')"><img src="http://parts.blog.livedoor.jp/img/usr/cmn/tool.gif" id="tool" width="18" height="18"></a>

</td>

</tr>

<tr>

<td valign="top">&nbsp;</td>

<td>

<textarea id="text" name="body" rows="10" cols="50"></textarea>

<div id="emoji" style="position:absolute; left:30px; display:none;"></div>

</td>

</tr>
この赤文字に置き換えてください。



左メニューの再構築から「全てのページ」で再構築をかけて個別記事ページにアクセスしてみてください。



・顔のアイコンをクリックすると絵文字パネルが表示される。

・好きな絵文字をクリックするとコメント欄に絵文字タグが入力される。

・コメント送信後、入力した絵文字がコメント中に表示されている。

上の三つが確認できれば完了です。

※環境によってうまく動かないこともあるのでご注意くださいませ。



絵文字パネルのスタイルはCSSに

#emoji{}
を追加して背景色やボーダーラインなど好きに設定してみてください。



それからリニューアル後はデザインを変更するとHTMLテンプレートまで変更されるようになっているので、

毎回カスタマイズする面倒を考えるとこの個別記事ページのHTMLテンプレートは保存しておいた方がいいかもしれません。



関連記事

新環境をさわってみた。
| customize | 20:57 | comments(18) | trackbacks(0) |
スポンサーサイト
| - | 20:57 | - | - |
コメント
うまく表示できたようでよかったです。[ぱちぱち]
また気軽にご質問してくださいね。
| cie | 2006/02/13 12:02 PM |
ありがとうございました。さっそく 大文字で入力し直しました所、顔マークから絵文字が展開されました。とっても嬉しいです。ありがとうございました。何度も何度も教えていただいてありがとうございました。又何かと教えていただくことこともあろうと思いますので、今後ともよろしくおねがいいたします。おかん[にこっ][ねこ]
| おかん | 2006/02/13 11:45 AM |
いつもご親切にありがとうございます。早速もう一度、試してみます。ありがとうございました。おかん
| おかん | 2006/02/13 11:31 AM |
もう一箇所修正するところがありました。
一度目のご質問と同じ絵文字パネルを呼び出す「顔マーク」のリンクの所。

onclick="showemojipanel(this.id,'text')"
ここの showemojipanelを小文字ではなく
onclick="showEmojiPanel(this.id,'text')"
というようにキッチリ大文字を使って記述してください。
これでうまく絵文字パネルが表示されるはずですよ。[さむあっぷ]
--
PCを長く使っているとやはり(慣れていない方には理解し辛い)使い慣れた言葉やカタカナ言葉をつかってしまいます。
もう少しわかりやすい表現で説明できればよろしいのですが・・・
| cie | 2006/02/11 9:58 PM |
こんにちは。又も早速のご返信ありがとうございます。o⇔0に変更してみましたが,残念ながら顔マークをクリックしても絵文字を展開させることは出来ませんでした。残念です。老齢者の部類に入ってからのブログ展開ですので、よくわからないことばかりです。特にブログ用語、PC用語が判らないことが多く困ってしまいます。なんとか絵文字を付けたいと考えておりますので又よろしくご指導くださいましようにお願い申し上げます。おかん
| おかん | 2006/02/11 2:19 PM |
おかんさんおはようございます。
症状確認させてもらいました。
えー、おそらく今私が使用しているテンプレートに一因がありそうです。[汗2]

修正箇所は絵文字パネルを呼び出す「顔マーク」のリンクの所。
javascript:void(o);
ここの(o)をo(小文字アルファベット)ではなく0(数字)に変更して保存しなおしてください。
これで表示されるはずですよ。

--
oと0との違いがわかり辛いフォントなので混乱させてしまったかもしれません。すみません。[しゅん]
右上にあるセレクトボックスから他のデザイン(weak以外)に切り替えて今一度確認してみてください。
| cie | 2006/02/11 9:23 AM |
早速のご返信ありがとうございます。わたくしのブログにもコメントで絵文字がつかえるようにいたしたくこの 「コメント欄でも絵文字を使用する方法です」 を参考に 赤文字を入力してみました。絵文字の 顔マークは 表示されたのですが、顔マークをクリックしても絵文字が展開されません。つかってるPCはFUJITSU。winndouwsXPです。
宜しくお願いいたします。おかん[わかば][ねこ]
| おかん | 2006/02/10 5:20 PM |
おかんさんこんばんは。

すみません。[汗]
ご説明された内容ではどういう症状かわからなかったのでもう少し詳しく書いていただると嬉しいです。
差し支えなければブログのURLもあわせて教えて下さい。症状の確認がとりやすいので。

> データを移行後でないと利用できないとの事ですが、その意味がわからない
すみません。コレはすでに皆さん移行が終っていますので無視していただいて構いません。
記事も編集させてもらいました。ご指摘感謝です。
| cie | 2006/02/10 1:14 AM |
いつも大変お世話になっております。

コメント欄に付ける絵文字についてテキストを変更して絵文字の顔マークはついたのですが、中の絵文字が表示されません。

データを移行後でないと利用できないとの事ですが、その意味がわからないのです。

詳しく教えていただけるとうれしいです。
よろしくお願いします。
| おかん | 2006/02/09 5:16 PM |
真理絵さんはじめまして。

コメント部分の文字の間を広げるには、はじめに
.comments-post{ }
の中に
letter-spacing:1px;
を書き加えてください。
それからCSSの最後の行に(どこでもいいんですけど解かりやすく)
br{letter-spacing:normal;}
を追加してCSSを保存して再構築(CSSだけでOK)して確認してみてください。

これで少し文字と文字の間が開いて読みやすくなると思いますよ。[さむあっぷ]
#もっと文字の間を広げたい場合は上の1pxを2px、3pxと増やして下さい。

また何かわからないことがありましたらお気軽に質問してくださいね。[芽]
| cie | 2005/07/14 9:04 PM |
お尋ねしたいのですが、
お忙しいところすみません。

このコメント欄のように、
文字と文字とのあいだを、このコメント欄のようにしたいのですが、
どのようにCCSを改造すればよいのでしょうか。

今の私のブログは、コメント欄の部分が、
文字と文字がひっつきすぎていて読みにくいです。

お時間があるときでいいので、よろしくお願いします。
厚かましい質問でごめんなさい。
| 真理絵 | 2005/07/14 9:57 AM |
わかりました!!!やってみます♪♪ありがとうございました♪これからもテンプレートどんどん使わせてもらいますね♪♪
| いろはママ | 2005/07/10 11:55 PM |
>> いろはママさん
返事が遅れてしまってごめんなさい。
コメントごとに線を入れる方法は comments-post{ }の中に
border-bottom:1px solid #444;
の一文を追加してCSSを再構築してもらえればOKだと思います。[さむあっぷ]

>> いじゅさん
今開発日誌をみてきましたけどホントにまだ5分の1なんですね・・・[しゅん]
7月下旬とか言ってますがこの状態だと
2週間で5分の1→単純計算であと8週間→9月上旬にずれこむ[さけび]
なんてことが起こりえそうで・・・[汗2]
| cie | 2005/07/10 12:54 PM |
なるほど!!それは嬉しいシステムですね[へぇ]

現段階でやっと5分の1が移行完了らしいですから・・・(笑
| いじゅ | 2005/07/08 10:25 PM |
お返事待っていました!!!ありがとうございます♪使っているテンプレートは「drops」です。ドット柄を小さくする…ということはしていないです。さらに詳しい解説をいただけたら、とっても嬉しいです!!
| いろはママ | 2005/07/08 6:09 PM |
>> いじゅさん
お久しぶりですー。
新しいシステムだとトラックバックを受けた時と同じように、コメントされた時もトップページを再構築するようになった(?)みたいですから大丈夫なのではないでしょうか。

それよりもデータ移行完了予定の7月上旬が怪しくなってきましたね・・・

>> いろはママさん
ご利用ありがとうございます。
どちらのテンプレートをお使いになっているのかわからないのでお答えできません。[汗]
差し支えなければテンプレート名を教えて下さい。

ただ大体どのテンプレートでも共通なのでCSSの
comments-post{}
この中をお好きなかたちに修正していただければいいと思います。
| cie | 2005/07/08 5:33 PM |
テンプレート気に入って使わせてもらっています。ひとつ気になる点があるのですが、投稿した記事に対してのコメントが数件来たりすると、全て立て続けに表示されて見にくいのですが…。
通常であれば、文章(コメント)・投稿者名(日にち・時間)・スペースまたは線・そしてまた文章と続くはずですよね??スペースや線が全くないので、かなり見にくくて困っています。解決法教えていただけますか??
| いろはママ | 2005/07/08 1:55 AM |
cieさんご無沙汰しています。

移行後に新しく登録したブログは、コメントがすぐにアップされるようになっているらしいのです。
移行前からあったブログも、移行後にはコメントがすぐにアップされるようになるのでしょうかねぇ。。。[しゅん]
| いじゅ | 2005/07/07 12:28 PM |
コメントする









この記事のトラックバックURL
http://buena-suerte.jugem.jp/trackback/500
トラックバック