オリジナルスキンCSSの編集 コメント欄
ココのサイトもコメントの表示部分を飾ってみました・・・・
興味がある方は記事のURLをクリックしてみてください
見本サイト 下の画像からチョットカスタマイズしています
まずは画像を用意します
横の幅だけ注意すれば縦はとりあえず気にしなくてかまいません
この画像を３つにスライスします
each_comment 395×40
※コメントの上からコメント本文までカバーするように少し大きめで
comment_body 395×35
※ココの縦は3px～40px程度でrepeat-yで繰り返しますのであまり気にしません
comment_footer 395×27
ＣＳＳの最後にコピペしてください
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 10px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:0 15px;/*コメント分の左右の余裕*/
background: url(画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding-top: 28px;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 10px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:30px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
コメント1つ1つに「コメント記入欄を表示」は必要ありませんので表示しない場合は加えてください
.comment_gotoform{
display:none;
}
↑上の緑の画像を含めて私が作った画像ですから自由にダウンロードして使ってください
横幅は395pxで３カラムでしたらそのまま使える場合があります
※画像の上で右クリック、名前をつけて画像を保存 (WINの場合)、
保存した画像をブログの画像フォルダーにアップしてから使ってください
※再配布はやめてくださいな
※この画像でよければ横サイズの変更、この色でなんてリク受けますよ（先着何人か・・）
ＣＳＳが使えないスキンの場合は
こちらをフリープラグインに貼ってみてください
<style type="text/css">
<!--
#comment_module .each_comment{/*コメント背景画像上*/
margin: 0;
padding:0 0 10px 0;
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .comment_body{/*コメント背景画像中*/
margin: 0;
padding:0 15px;/*コメント分の左右の余裕*/
background: url(画像のURL) ;
background-repeat : repeat-y;
}
#comment_module .comment_footer{/*コメント背景画像下*/
margin:0;
padding-top: 28px;/*画像の高さが目安*/
background: url(画像のURL) ;
background-repeat : no-repeat;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 10px;/*タイトルの位置*/
}
.comment_footer span.comment_author{/*吹出し部分に合わせるため名前を右に*/
padding-left:30px;
}
.comment_footer span.comment_date{/*名前と日付の間隔*/
padding-left:20px;
}
#comment_module .comment_footer{/*点線消す*/
border-top:none;
}
-->
</style>
横幅520pxと450pxのコメント欄背景画像はこちらにあります
リクエストです・・・ 線が細いのでグレーっぽくなっちゃいました
each_comment 396×40
comment_body 396×35
comment_footer 396×30
ゲストさまと自分のコメントを分けるためには
新・自分のコメントを "もっと"わかりやすく を、フリープラグインに設置する必要があります
ペタキャラ
皆さん新しいペタキャラ見ましたか・・・・？
なんか変わるってアナウンスがあったから
前のペタキャラ公開しちゃったんですけど・・・
変わっていないですよね・・・
楽しみにしていた方おられたのではないでしょうか
>より多くの種類のペタキャラを皆さんに見ていただけるよう設定を見直させていただきました。
見ようと思ったらタレントブログにいってペタしないとだめです・・・
ためしに数えてみたんですけど前日のペタ数が500でも恐竜の次です
まだ上に２つもあるんです・・・
これって普通の人って不可能ですよね
皆さんに見ていただけるよう・・・・タレントブログを見ろ！ってこと？
タレントブログをにぎやかにするための道具にしか見えないのですが
タレントブログに行かなくても見られるよう公開しちゃおうかな？
皆さんはどう思われますか？
追記：
ペタ数の基準も変わりました・・・・
前は100で恐竜でしたが
今度からは100でも羊です・・・・
ペタなんてどうでもいいから付けられないように設定しようかな・・・・
ペガサス
http://stat.ameba.jp/peta/user/swf/11/peta_button1.swf
http://stat.ameba.jp/peta/user/swf/11/peta_button2.swf
竜
http://stat.ameba.jp/peta/user/swf/12/peta_button1.swf
http://stat.ameba.jp/peta/user/swf/12/peta_button2.swf
不死鳥
http://stat.ameba.jp/peta/user/swf/13/peta_button1.swf
http://stat.ameba.jp/peta/user/swf/13/peta_button2.swf
CSS リストマーク 2
今度は・・・・
このサイトみたいに
未訪問のリンクと訪問済みのリンクでリストマークを変えます
もしサイドのリストマークが 
ばかりでしたら
どこかクリックしてみてください
訪問済みとなりリストマークが 
に変わるはずです
最新の記事 の場合 ＣＳＳの最後にコピペ
#recent_entries li a:link {/*recent_entries : 最新の記事*/
margin: 0;
padding-left: 14px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
#recent_entries li a:visited {/*訪問済み*/
margin: 0;
padding-left: 14px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
2つの画像の大きさは同じくらいの画像を選んでください
訪問前 
訪問後 ・・・・ドキドキ から ラブラブ へ
訪問前 
訪問後 ・・・おにぎり から ・・・っん？
・・・こうするとマウスが乗った時だけ変ります
#recent_entries li a:hover {/*ポイント時*/
margin: 0;
padding-left: 14px;/*画像横+α*/
background: url(画像のURL) no-repeat;
background-position:0px 0px;/*画像位置 横 上*/
}
※記入の順番があります
a:link a:visited a:hover の順番で記入しないとうまくいかない場合があります
※この方法ですと２行にわたる場合マークに下に文字が入り込みます
綺麗に揃えたいって方はameba-customのハチ さま の記事を参考にしてください