コメント・トラバにサムネイルを付けてみよう ver.3

皆様こんにちは、です。
久しぶりにCSS,ブログの講座ですが、

こちらは以前やっていた、

コメント・トラバにサムネイルを付けてみよう ver.1
コメント・トラバにサムネイルを付けてみよう ver.2

の続き、別のサービスを使って見たいと思います。
こちらのサービスはとっても使い勝手がいいので、
重宝させていただいていますよーー。

さて、やり方なのですが、基本的に簡単にやりましょうね。



管理画面 > テンプレートページ > カスタマイズ

のところにある、個別記事部分、そこのコメント部分を変更しましょう。

やり方は簡単に出来るようにコピー&ペースト対応でやりましょうね。


でも自己責任です。なので、最初にやる事は、

個別記事のコピーを作っておく事。
そうすると変な事になってもすぐ戻す事ができますので、
個別記事のコピーは最初に作っておいてください。



さて、まずどうするかというと、


■トラックバック編
<TrackBacksLoop>~~~~</TrackBacksLoop>

■コメント編
<CommentsLoop>~~~~</CommentsLoop>


上記のタグがまずこの個別記事のタグ中に存在します。l
そこを変更コピペしてください。


今回のサービスは

http://capture.heartrails.com/

上こちらのサービス、[ HeartRails Capture 」を利用します。
これは便利ですよー、ほんとにー。大きさやちょっとした形等
自分の好きなようにできますので、それは自分で設定してくださいね。

さて、まずはトラックバックの部分ですが、

■トラックバック編
<TrackBacksLoop>~~~~</TrackBacksLoop>

<TrackBacksLoop>
<div class="trackback-body">
<table>
<tr>
<h3>
■ <%PingTitle%>
</h3>
</tr>
<tr>
<td>

<!--画像-->
<a href="<%PingBlogUrl%>"><img src="http://capture.heartrails.com/150x150/cool?<%PingBlogUrl%>" alt="<%PingBlogUrl%>" width="150" height="150" /></a>
<!--画像-->

</td>
<td>
<%PingExcerpt%>
</td>
</tr>
</table>

<br clear=all></div>
<div class="trackback-post"><a class="atrackback-post" target="_blank" href="<%PingBlogUrl%>"><%PingTitle%></a>【<%PingBlogName%>】at <%PingDateTime%></div>
</TrackBacksLoop>


上記部分をコピーしてカスタマイズ内にて同じ部分にペースト、貼り付けてください。
それでOKです。

■コメント編
<CommentsLoop>~~~~</CommentsLoop>

コメント部分についても同じですが、


<CommentsLoop>
<div class="comments-body">
<table>
<tr>
<h3>
■ <%CommentAuthor%>
</h3>
</tr>
<tr>
<td>

<a href="<%CommentUrl%>"><img src="http://capture.heartrails.com/160x160/cool/shorten?<%CommentUrl%>" alt="<%CommentUrl%>" width="160" /></a>

</td>
<td>
<%CommentBody%>
</td>
</tr>
</table>

<br clear=all></div>
<div class="comments-post">Posted by <IfCommentUrl><a class="aposted" href="<%CommentUrl%>"><%CommentAuthor%></a><ElseIfCommentEmail><%CommentAuthor%><Else><%CommentAuthor%></IfCommentUrl> at <%CommentDateTime%></div>
</CommentsLoop>




という感じで、トラバとコメント部分を書き換える感じです。
これは以前の方法と同じなので、出来る方はすぐ出来ると思いますよ。

是非コメントに、書き込んでいただいた方のHPやブログが出てくれると、
なんだか華やかになるので、チャレンジしてみてくださいねーー。

でわ!





同じカテゴリー(ブログカスタマイズについて)の記事

この記事へのコメント
だーしゃさん

ばっちり出来ました(〃∇〃)
リンクも1枚はさむことなく直です♪

丁寧なご指導、どうも有難うございました。
Posted by まくらまくら at 2008年07月14日 15:16
ありがとう!

自分もちゃんとできました(^.^)

また加工してみよっと(^^ゞ
Posted by 164 at 2008年07月14日 16:51
■ まくらさんへ
こちらしっかりとできたみたいですね!
よかったですーーー。
色々と見栄えも大切なので、好きな形で触っていってみてくださいねー(^^)

■ 164さんへ

こちら是非活用してみてくださいーー。
コメント欄がにぎやかになりますよねっ
大きさなども変更とか出来るので、さわってみてくださいねー。
Posted by 管理者管理者 at 2008年07月14日 20:50
富山のナカムーです。
マイページから飛んできたときに、
「おっ!
って思って、とりあえずサイドバーに使ってみました。

今度コメント欄につかってみま~ス
Posted by ナカムー at 2008年07月14日 21:45
 私もやってみましたよ〜。
Posted by yugafu at 2008年07月14日 22:38
簡単にできました!!
毎度毎度アリガトウゴザイマス☆
Posted by ☆鮎っぺ☆ at 2008年07月15日 16:56
■ ナカムーさんへ
こちらは是非どんどん利用してくださいねー、
使い方はいっぱいあるとおもいますからー(^^)
色々とやってみましょうねー。

■ yugafuさんへ
早速ありがとうございますー、
どんどん利用してもらったらとおもいますよー。
にぎやかな方がいいと思いますしねー。

■ ☆鮎っぺ☆さんへ
こちらも利用はどんどん進めてくださいねー、
楽しく簡単にできたらいいですもんね、
こんな感じで、キャプチャが出た方がにぎやかですしー(^^)
Posted by だーしゃだーしゃ at 2008年07月16日 14:23
だーしゃさんの記事に
「続きを読む」ってボタンを押しても、
下にほかの記事もそのまま表示されてますよね?
で「続きを隠す」ボタンも設置されててとても便利です。
よかったら、設置方法を教えて下さいm(__)m
Posted by chocolat at 2008年07月17日 20:13
■ chocolatさんへ

こちら問題ないですよー、
ですが、それを設置するとPVが下がりますけどいいですかね?
クリックするだけで、PVはあがるわけではないのでそれは注意してくださいねー。

やり方をまとめて公開しましょうねーー(^^)
Posted by daxiadaxia at 2008年07月19日 19:17
だーしゃさん、私やってみました。
本当、とても華やかになって嬉しぃ♥。・
ただ、コメントの文字などが大きくなってしまいます。

小さくするにはどこをどうしたらいいですか?
Posted by museemusee at 2009年06月14日 00:30
追記

送信者の名前とコメント本文が大きくて、コメントが全て表示されずに切れてしまってます。
スタイルシートで設定を変えてみても小さくなりません。
素人の私では限界で自分で解決できません。
どなたか助けてくださぁ~ぃ m(*v_v)m
Posted by museemusee at 2009年06月14日 01:23
■ museeさんへ

見た感じ問題ないですが、もう解決しちゃったですか~??
ちゃんと出来てる感じですよーーー。
Posted by だーしゃ at 2009年06月14日 10:38
残念ながら、まだ解決していません (´д`)
だーしゃさんのPCではちゃんと表示されているんですか~?
この記事にコメントをのこされている☆鮎っぺ☆さんのは、
私のPCでもちゃんと表示されているんですが・・・。

どこが違うんでしょうかねぇ~ (ノ_・。)
Posted by musee at 2009年06月14日 11:21
■ museeさんへ

遅くなりましたけれども、解決されたみたいですね!
特に見ても問題ないですよー。
もしかするとブラウザの問題なのでしょうか??
Posted by だーしゃだーしゃ at 2010年01月17日 16:53
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。