ＣＳＳ コメント欄をなんとかしちゃおう 4
いよいよつまんないコメント欄のカスタマイズの説明も最後です
コメント欄の画像のサイズ説明です
画像ソフトで下のような画像を作り
上・中・下の画像と３つに切り取ります
横のサイズはコメント部分のサイズ以内でしたら適当でかまいません
ＣＳＳでコメント文の表示位置は調整できます
縦のサイズはチョットだけ重要です
※コメント部分を反転させてわかりやすくしてあります
Ａ 上の画像・・・・
縦のサイズは1～4の合計より大きくないと中の画像との間に隙間ができます
余分な部分は中の画像の下になりますので表示されません
ですので余裕をもって作ってください
1～4のサイズは前の説明を参考にしてください・・・・
※実際は画像に合わせてコメントタイトルの表示位置を調整しますので気にしなくても・・・・
中の画像とうまくつながるように（縦を）大きめに作るといいです
Ｂ 中の画像・・・・
中の画像はコメントの分だけ縦に繰り返して表示されますので縦のサイズは適当で
ただ1pxの繰り返しはただの直線になりますので今回のような模様みたいな線の場合は
ある程度の長さがないとうまくいきません
※実際にやってみてうまくつながるか確認しながら調整します
上の画像、下の画像とも自然につながるか確認ください
Ｃ 下の画像・・・・
下の画像は全部が表示されます
Ｃの高さが下の画像の高さになります
完成した画像が・・・・
上の画像 374px × 40px
中の画像 374px × 40px
下の画像 374px × 40px
※横のサイズはそろえる必要がありますが縦のサイズはそろえる必要はありません
ＣＳＳを見てもどこにも縦のサイズは出てきません・・・・
中の画像をでこぼこにしたいって方・・・
オリジナルスキンCSSの編集 コメント欄4
http://ameblo.jp/exlink/entry-10083815640.html
を、参考にしてください
中の画像はコメントの長さによってどの位置で下の画像とつながるかわかりません
どの位置でつながってもごまかせる処理が必要となります
うめぽこ。 さま らくがきんちょっ。 で工夫されて使っていただいています
いちいち画像なんて作ってられね～ょ・・ って～方、
次回より素材画像を紹介しますのでお待ちくださいな・・・
PS.
素材画像・・・
20パターン以上作ったのですが・・・・色が違うだけですけどね・・・・
全滅でした・・・・
中の画像が上と下にうまくつながりませんでした
たった1pxですが目立ってしまうので作り直しです・・・・ （ｉДｉ）
ＣＳＳ コメント欄をなんとかしちゃおう 3
名前の前後に ワンポイントの画像をつけてみます
↓これが設定をしていない状態です
/* 名前の右にアイコン */
#comment_module .comment_author a {
padding-right : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : right center ;
background-repeat : no-repeat ;
}
padding-right : 20px; で、名前の右に20pxのスキマを作ります（サンプル画像の横幅16px）
background-position : right center ; 右端に背景画像（アイコン）を配置することで
そのスキマにアイコンが表示されます
※画像の横幅以上のサイズをあけてください・・・
/* 名前の左にアイコン */
#comment_module .comment_author a {
padding-left : 20px;
background-image : url(画像のURL); /* ゲストのアイコン */
background-position : left center ;
background-repeat : no-repeat ;
}
padding-left : 20px; で、名前の左に20pxのスキマを作ります
background-position : left center ; 左端に背景画像（アイコン）を配置することで
そのスキマにアイコンが表示されます
今度は全体を右に移動します
#comment_module .admin_comment .comment_author a {/* 管理人のアイコン */
padding-left : 160px;
background-image : url(画像のURL) ; /* アイコン画像のURL */
background-position : 140px center ;
background-repeat : no-repeat ;
}
padding-left : 160px; で、名前の位置を160px右に移動します※見ながら調整してください
background-position : 140px center ; で左から140pxの位置に背景画像を配置します
※160px-140px が画像の横幅以上になるようにしてください
※全体を右に移動させる方法は名前の文字数が固定されている管理人のコメントでしか使えません
名前の長い方がコメントされますと表示が２行になり、中と下の間に隙間が出来てしまいます
・・・・ text-align:right; を使えば ゲストさもでも可能ではあるのですが
※アイコン画像と名前のずれが気になる場合は center ではなく pxで上からの位置を指定して下さい
今回のサンプルは上、中、下の画像を全部同じ画像を使ってみました
↑これらの画像を使う場合は↓のＣＳＳを使ってください
/*ゲストコメント*/
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間*/
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 30px 10px;/*コメント分の上と左右と下の余裕*/
background: url(画像のURL);/*画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 10px 0 10px;
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/*コメントタイトル*/
font-weight: bold;
font-size:12px;
padding:10px 0 10px 30px;
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px;
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px;
}
#comment_module .comment_footer{/*フッター上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}
#comment_module .comment_author a {/* ゲストのアイコン */
padding-right : 20px;
background-image : url(画像のURL);
background-position : right center ;
background-repeat : no-repeat ;
}
/*管理人コメント*/
#comment_module .admin_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間・・ゲストと同じに*/
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#0000ff;/*←管理人コメント文字色変更の場合*/
}
#comment_module .admin_comment .comment_body{/*コメント文章部分*/
margin: 0;
padding:10px 30px 10px;/*・・ゲストと同じに・・*/
background: url(画像のURL);/*画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .admin_comment .comment_footer{/*コメントフッター部分*/
margin:0; padding: 10px 0 15px; /*・・ゲストと同じに・・*/
background: url(画像のURL);/*画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
.admin_comment .comment_footer span.comment_date{
padding-left:0;
}
#comment_module .admin_comment .comment_author a {/* 管理人のアイコン */
padding-left : 160px;
background-image : url(画像のURL);
background-position : 140px center ;
background-repeat : no-repeat ;
}
※管理人のコメントを分けるには「自分のコメントを ”もっと” わかりやすく
」が必要です
※ＣＳＳの編集が出来ないスキンの方は「CSSの編集が出来ないスキンでCSSを使う
」を参考に
画像はダウンロード後、自分のブログの画像フォルダーにアップしてから使ってください
画像の加工は自由にどうぞ
・・・・次は画像のサイズです
ＣＳＳ コメント欄をなんとかしちゃおう 2
こちらがコメントに背景画像をつけるＣＳＳです
各サイズがどの部分なのかは下の画像と比べて
自分で画像を作った際の参考にして下さい
/*ゲストコメント背景 */
#comment_module .each_comment{/*コメントタイトル部分*/
margin: 0;
padding-bottom:30px;/*コメントとコメントの間*/ ←注１
background: url(上画像のURL);/*上画像のURL*/
background-repeat : no-repeat;
background-position: center top;
color:#333333;/*←ゲストコメント文字色変更の場合*/
}
#comment_module .comment_body{/*コメント文章部分*/
margin: 0;
padding:5px 30px 10px;/*コメント分の上と左右と下の余裕*/ ← １、２、３
background: url(中画像のURL);/*中画像のURL*/
background-repeat : repeat-y;
background-position: center top;
}
#comment_module .comment_footer{/*コメントフッター部分*/
margin:0;
padding: 5px 0 15px; ← ４、５
background: url(下画像のURL);/*下画像のURL*/
background-repeat : no-repeat;
background-position: center bottom;
}
#comment_module .label{/* コメントタイトル */
font-weight: bold;
font-size:12px;
padding:15px 0 10px 50px; ← Ａ、Ｂ、Ｃ
}
.comment_footer span.comment_author{/*名前*/
padding-left:40px; ← Ｄ
}
.comment_footer span.comment_date{/*日付*/
padding-left:20px; ← Ｅ
}
#comment_module .comment_footer{/*フッター上の点線を消す*/
border-top:none;
}
.comment_gotoform{/*[コメント記入欄を表示]を消す*/
display:none;
}
※後日、画像の素材と一緒にその画像に合ったCSSも紹介しますので今回は参考程度で・・・・
わかりやすくするため反転させてあります・・・・
注１ コメントとコメントの間隔
注２ のコメントの文章と文章のスキマは・・・・・・
.entry .contents{
line-height:1.5;
}
と、ＣＳＳの最初の方で行間設定がされています
line-height: は行間の値（フォントサイズとスキマの合計）のことで
line-height:1.5; という事は スキマは 0.5
このコメント部分の場合、フォントサイズが 12px ですので スキマは 6px になります
次は名前の前後にワンポイント画像をつけてみます