ＣＳＳ コメント欄をなんとかしちゃおう 4
いよいよつまんないコメント欄のカスタマイズの説明も最後です
コメント欄の画像のサイズ説明です
画像ソフトで下のような画像を作り
上・中・下の画像と３つに切り取ります
横のサイズはコメント部分のサイズ以内でしたら適当でかまいません
ＣＳＳでコメント文の表示位置は調整できます
縦のサイズはチョットだけ重要です
※コメント部分を反転させてわかりやすくしてあります
Ａ 上の画像・・・・
縦のサイズは1～4の合計より大きくないと中の画像との間に隙間ができます
余分な部分は中の画像の下になりますので表示されません
ですので余裕をもって作ってください
1～4のサイズは前の説明を参考にしてください・・・・
※実際は画像に合わせてコメントタイトルの表示位置を調整しますので気にしなくても・・・・
中の画像とうまくつながるように（縦を）大きめに作るといいです
Ｂ 中の画像・・・・
中の画像はコメントの分だけ縦に繰り返して表示されますので縦のサイズは適当で
ただ1pxの繰り返しはただの直線になりますので今回のような模様みたいな線の場合は
ある程度の長さがないとうまくいきません
※実際にやってみてうまくつながるか確認しながら調整します
上の画像、下の画像とも自然につながるか確認ください
Ｃ 下の画像・・・・
下の画像は全部が表示されます
Ｃの高さが下の画像の高さになります
完成した画像が・・・・
上の画像 374px × 40px
中の画像 374px × 40px
下の画像 374px × 40px
※横のサイズはそろえる必要がありますが縦のサイズはそろえる必要はありません
ＣＳＳを見てもどこにも縦のサイズは出てきません・・・・
中の画像をでこぼこにしたいって方・・・
オリジナルスキンCSSの編集 コメント欄4
http://ameblo.jp/exlink/entry-10083815640.html
を、参考にしてください
中の画像はコメントの長さによってどの位置で下の画像とつながるかわかりません
どの位置でつながってもごまかせる処理が必要となります
うめぽこ。 さま らくがきんちょっ。 で工夫されて使っていただいています
いちいち画像なんて作ってられね～ょ・・ って～方、
次回より素材画像を紹介しますのでお待ちくださいな・・・
PS.
素材画像・・・
20パターン以上作ったのですが・・・・色が違うだけですけどね・・・・
全滅でした・・・・
中の画像が上と下にうまくつながりませんでした
たった1pxですが目立ってしまうので作り直しです・・・・ （ｉДｉ）