2007年09月07日

コメント欄に漫画のふきだし風画像を追加

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

コメントをいただけるとこんな感じになります。
comment_1.png
コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文コメント本文
comment_2.png
Posted by がりんぺいろ at 2007年09月05日
シーサーでの設定方法
1.画像の作成・アップロード
コメント上の画像と下の画像を作り、アップロードします。
かなりいい加減に作ってので精度の高い画像ではありませんが、良ければ上の画像を使ってください。
2.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 -%>


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


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

posted by がりんぺいろ Edit | Comment(2) | ブログカスタマイズ
ブックマークに追加する

この記事へのコメント
comment_1.png
いいアイデアですね。
参考にさせていただきます。
comment_2.png
Posted by mary at 2007年09月10日 04:27
comment_1.png
突然のコメントで失礼いたします。
ブログを拝見させていただきまして、是非とも協力をして
いただきたくコメントという形で、ご連絡をいたしました。
当サイトは「ブログで繋がるコミュニケーション」をテーマに
参加していただくブロガーの皆様を幅広く募集をしています。
ランキングを楽しんだり、さまざまなブログを拝見したり、
ブログを持っている方々のコミュニケーションの、
一つの引き出しとして、その場を提供したいと考えています。
当サイトの検索バーの横にブログの登録フォームがあります。
お手数をおかけいたしますが、ご賛同いただいて、ブログの登録を
御願いできれば幸いでございます。
是非、御願いします。こちらのサイトです。
http://www.p-netbanking.jp
なお、こちらのミスで謝って、再度、ご連絡をした場合。
また、全く興味のない方は削除されてください。
comment_2.png
Posted by magazinn55 at 2007年09月18日 14:38
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
メルマガ、ホームページ、メールアンケート、アフィリエイト、懸賞メールなど様々な方法でインターネットで副収入を得る方法がありますが、今から始めるにはブログとアフィリエイトの組み合わせは最も効率的に稼ぐことが出来ます。私もブログをはじめて2ヶ月目には約2万円を得ることが出来、以前から作成しているホームページより売り上げ上昇が早いので、最近はブログ作りに集中しています。
では何故そんなに稼げるのか、そしてその方法を解説したいと思います。
はじめの一歩  ブログをはじめよう  アフィリエイトをはじめよう  ブログの機能を使おう 見栄えを良くしよう(html入門) 写真を掲載しよう リンクを使いこなそう
月に1万円稼ぐアフィリエイターは実は少数派。売り上げが伸びない方、アクセスを伸ばしたい方は必ず読んで下さい。
Firefoxを使おう ブログをカスタマイズしよう ブログツールを使いこなそう 人気ブログを研究しよう アクセスアップ・SEOを考えよう ランキングサイトへ登録しましょう アフィリエイト的ブログサービスの選び方 アクセス解析を使おう 目的にあったブログを選ぼう
月に5万円稼げるようになるとようやく一人前のアフィリエイターと言えるでしょう。最初の壁を越えるためのテクニックです。
独自ドメインを使おう 日本語ドメインを使おう Google サイトマップに対応させよう もっとアクセス解析



×

この広告は1年以上新しい記事の投稿がないブログに表示されております。