ブログで稼ごう　ガリンペイロ

当ブログのデザインはシーサーブログのシンプルブルー（廃止済）をカスタマイズしたものですが、シンプルなのが好きなのですが、コメント欄が寂しかったので、簡単にできるカスタマイズをしてみました。
吹き出し風画像を入れるもので、ちょうどposted欄のハンドルネームからふきだしが出るようにしています。
Yahoo!ブログなどではアバター表示されますが、Gravatarなどを使って、投稿者の顔写真からふきだしを出すことも出来ますね。（まだ国内での利用者が限られているのと、重くなるのがいやで当サイトはURLのファビコンだけ表示させています）

コメントをいただけるとこんな感じになります。
１．画像の作成・アップロード
コメント上の画像と下の画像を作り、アップロードします。
かなりいい加減に作ってので精度の高い画像ではありませんが、良ければ上の画像を使ってください。
２．htmlの編集
管理画面で「デザイン」−「コンテンツ」−「記事」を選び、「コンテンツhtml編集」をクリックし、下記のように追加します。

<div class="comments-head">この記事へのコメント</div>

<% loop:list_individual_article_children -%>

<div class="comments-body">
<img src="上の画像のアドレス" alt="" border="0" />
<div class="text"><% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<img src="下の画像のアドレス" alt="" border="0" />
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank"><% comment.writer | html | tag_strip %></a><% else %><% comment.writer | html | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>
<% /loop -%>

３．CSS調整
コメント本文がふきだしからはみ出さないように、「comments-body」のマージン・余白等修正します。
最後に再構築をお忘れ無く。


ふきだしを使ったテンプレートを作ってみました。
ひらめき裸電球プレビュー
良かったらご利用ください。
忍者ブログ用テンプレート