ブログ カスタマイズシリーズ第五弾！

今回は、書いていただいた各人のコメントごとに
区切りを入れるのに、水平線を使ってみました。
過去の
1. 「画像編集ソフト」 は、こちら。
2. 「faviconを設定してみた」 は、こちら。
3. 「iPhone 用アイコンを設定してみた」 は、こちら。
4. 「コメント欄に区切りをつけてみた (背景色)」 は、こちら。

区切りに背景色を設定するよりは、若干難しいかも知れませんが
コメントごとに、水平線を入れる方法です。


最初は HTMLの HRというタグを使う方法です。



管理画面の 「テンプレート」 から、使用中テンプレートの 「カスタマイズ」 を
クリックします。




個別記事欄から ”<CommentsLoop>” を探します。
※ブラウザによっては、Ctrl + F を押すと検索ウィンドウが開いたりします。




”<CommentsLoop>” から ”</CommentsLoop>” までが
コメントを繰り返し表示するよう、書かれています。

従って
各コメントの上部に区切りを入れたい場合は ”<CommentsLoop>” の次に
各コメントの下部に区切りを入れたい場合は ”</CommentsLoop>” の前に
HRタグを入れれば OKです。

例えばこのように設定します。
<CommentsLoop>
　：
　：
<hr size="12" style="background:#444444; border-color:#000000;" noshade></CommentsLoop>

6桁の数字： 色コード
size： 線の高さ
noshade： 平面的に表示させる指定
詳しくは ”HTML HR” で検索してください。
また、使用しているテンプレートによっては枠線の色が有功にならないかも知れません。




個別記事欄のところにある をクリックします。

こんな風に、投稿者の名前の下の行に色がついていれば OKです。





「登録」を押して、編集を終了します。

登録したくない場合 (やりなおしたい、とか、スタイルシートをいじりすぎた)
という場合は、「戻る」を押せば保存されずに終了できます。






画像を使用して、コメントごとに、水平線を入れる方法です。
、 は同じです。
の HRタグの部分を画像の指定にします。



はじめに画像を用意します。

用意する画像の適正なサイズですが、スタイルシート欄から ”.main” を探します。
そこに with が書かれていれば、記事などが表示されている
幅になりますので、画像はそれより少し小さいぐらいが良いと思います。

スタイルシートによっては、”.width” がないかも知れませんので
そのときは、適当に調整してください。

そして、この幅にあうような素材を用意します。
”ライン 無料素材” などで検索すれば、いろいろと出てきます。
もちろん自分で画像を作っても OKです。




HRタグのときと同じように、画像表示の imgタグを指定します。

例えばこのように設定します。
<CommentsLoop>
　：
　：
<div align="center">
<img src="http://xxxxx.naturum.ne.jp/usr/[user名]/xxxxx.jpg" alt="" >
</div></CommentsLoop>




と同じように、個別記事欄のところにある をクリックします。

こんな風に、投稿者の名前の下に、ライン画像が表示されていれば OKです。





と同じように保存してください。



※コメントは質問のある方のみで m(_ _)m
　もしくは、ど～しても一言書きたいと言うならば・・・ （笑）