『コメント欄をなんとかしちゃおう 応用2』

ココのサイトのコメント欄の説明はまだしていませんが・・・

ココの場合は２カラムでスペースに余裕がないと出来ません

ので・・・・

３カラムでも可能なこんなのはいかがでしょう？

なんで・・・・

もっと早く・・・・・

教えなかったんだ！！！！　＼(*｀∧´)／　　　ってみなさまの声が聞こえてきそうですが・・・・

これが種明かしです・・・・

ＣＳＳは基本は変わりません

後ろの画像に合わせてコメントをずらしているだけです

画像の上にコメントがかぶってもよければＣＳＳはそのまま使えます

ようは・・・・

上の画像の下に枠の中に表示される画像も組み込んでしまいます

そして大事なのは中の画像を透過させるということです

透過させないと中の画像で枠内に表示させたい画像が隠れてしまいます

ですので枠内を色で埋める場合は使用できません

ココのブログのコメント欄もノートのような画像を使っていますのでこのようには出来ません

その場合は別の方法で・・・・　次回に説明します（って、もったいつけるほどのことではありませんが）

※３カラムのスキン　main（３カラムの真ん中）の幅が 400px の場合の例です　↑

ゲストさまのコメントを左に寄せる場合は

#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 25px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}

こうなっているのを↓右側のスキマを空けて右側まで文章が来ないようにします

#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:0 120px 10px　25px;/*コメント分の上と右と下と左の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}

復　習　： ********************************************

　　padding:が１個の場合（上下左右）
　　padding:10px; 上下左右全部10pxあける

　　padding:が２個の場合（上下・左右）
　　padding:10px　0; 上下に10pxあける、左右は0

　　padding:が３個の場合（上・左右・下）
　　padding:10px　0　5px; 上に10pxあける、左右は0　下は5pxあける

　　padding:が４個の場合（上・右・下・左）
　　padding:0 100px 10px　30px;　　上は0　右は100px 下は10px 左は30pxあける

　　　　　0 の場合は単位pxをつけなくてもOKです

　　******************************************************

管理人コメントを右に寄せる

#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 25px 10px;/*コメント分の上と左右と下の余裕　ゲストと同じに*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}

こうなっているのを↓左側のスキマを空けて左側まで文章が来ないようにします

#comment_module .admin_comment .comment_body{
margin: 0;
padding:0 25px 10px　100px;/*コメント分の上と右と下と左の余裕*/
background: url(画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}

管理人コメントを右寄せにするためには　応用1 と同様に

管理人のコメントタイトルの位置もずらす必要があります

#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
}

これに位置を変更するためにpaddingを指定します

#comment_module .admin_comment .label{/*コメントタイトル*/
color:#1919b3;/*←管理人コメントタイトル文字色変更の場合*/
padding:15px 0 10px 100px;
}