2007/06/18

Seesaaブログテンプレート「ホワイト」

Seesaaブログのテンプレート「ホワイト」。シンプルなデザインが良く、私が初めて使用したテンプレートでもあります。でも一つ気になるところ、それはコメント欄です。コメントが記入されると以下のような表示になります。

コメント画像

左側に線が表示される何とも中途半端な感じ。記事表示と同じようなデザインにしてみたい。

まずスタイルシートの編集。
赤字の部分を削除緑字の部分を編集青字の部分を新たに追加します。

#comments {
margin-top:25px;
margin-left:5px;
text-align:left;
}

(略)

.comments-head{
margin-left:5px;
padding-top:10px;
color: #999;
font-size:12px;
font-weight:bold;
}
.comments-body {
margin-left:5px;
padding:5px 5px 5px 0px;
font-size: 12px;
color: #999;
}
.comments-post{
font-size: 10px;
color: #999;
padding:10px 10px 8px 20px;
background-image:url(https://blog.seesaa.jp/img/bg/white/blog_bottom.gif);
background-repeat:no-repeat;
background-position:bottom left;
}
.comments-text{
font-size: 12px;
color: #9B9B9B;
margin-top:30px;
padding:0px 30px 5px 30px;
background-image:url(https://blog.seesaa.jp/img/bg/white/blog_bg.gif);
background-repeat:repeat-y;
}
.comments-top{
background-image:url(https://blog.seesaa.jp/img/bg/white/blog_top.gif);
background-repeat:no-repeat;
background-position:top left;
padding-top:5px;
margin-bottom:20px;
}

次にコンテンツの「記事」のHtmlを編集。以下の箇所を変更します。
comments-body を comments-top に。 text を comments-text に変更。
<div class="comments-head">この記事へのコメント</div>

<% loop:list_individual_article_children -%>
<div class="comments-top">
<div class="comments-text">
<% comment.body | html | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | html | tag_strip %>" target="_blank" rel="nofollow"><% 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 -%>

以上で完了です。 サンプルページ


にほんブログ村 ランキング

この記事へのコメント

コメントを書く

※質問は該当するテンプレート記事へお願いします。

※ブログオーナーが承認したコメントのみ表示されます。

名前 *
メールアドレス
URL
コメント *
認証コード ※画像の中の文字を半角で入力してください。

この記事へのトラックバック

×

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