[แต่งบล้อกด้วย css]ปรับแต่งส่วน comment #2
posted on 01 Nov 2009 21:37 by itbasicปรับแก้ส่วน comment ได้ดั่งใจ
โดนทวงว่าแต่งกล่อง comment เสร็จแล้ว ให้รีบลงวิธีแต่งส่วน comment ที่คนโพสไว้หน่อย
วิธีการแต่งส่วนเมนท์มีหลากหลายซับซ้อนพอสมควร จึงขอแยกเป็น workshop นะครับ ใครจะใช้ส่วนไหนก็หยิบจับไปผสมกัน ^^
โดยลักษณะงานเมื่อทำเสร็จแล้ว จะเป็นแบบนี้นะครับ เอาไปดัดแปลงยำใหญ่กันเน้อ
workshop 1
workshop 2
workshop 3
ขอขอบคุณทุกท่านที่มาเมนท์ และ ขออนุญาตแคปรูปมาเป็นตัวอย่างในนี้นะครับ
workshop แบบที่ 1
Step 1.1:
ไปที่ .comment ใส่ background เข้าไปก่อนเลย เลือกสีตามใจชอบ
.comment {
. <<< จุด หมายถึง ส่วนที่มีอยู่แล้วนะครับ อย่า copy แปะเด็ดขาด !
.
background:#999;
}
Step 1.2
เพื่อความสวยงามเพิ่มแถบขอบด้านข้างโดยใช้ border โดยผมใช้ border-left:10px solid #333;
.comment{
.
background:#999;
border-left:10px solid #333
}
border-left คือ เส้นขอบทางด้านซ้าย ถ้าจะใส่ด้านอื่นก็มี border-right,border-top และ border-bottom
10 px คือขนาดของเส้น, solid คือ ลักษะณขอบแบบเส้นตรง , #333 คือโค้ดสี หาโค้ดสีได้จากที่นี่ http://www.colorschemer.com/online.html
step 1.3
ตอนนี้ส่วนเนื้อหามันติดขอบดูไม่สวยงามเราต้องใส่ padding เข้าไปเพื่อให้มีย่อหน้าที่สวยงาม
ผมจะทำย่อหน้าจากด้านซ้าย และด้านบน ก็จะใช้ padding-top:5px; และ padding-left:5px;
.comment{
.
.
border:10px solid #333;
padding-top:5px;
padding-left:5px;
}
padding อธิบายง่ายๆ คือการสร้าง "ย่อหน้า" ตามขนาดที่เรากำหนดนั่นเอง มีสีด้านเหมือนกันนั่นคือ padding-top,padding-right,padding-bottom,padding-left ซึ่งเราอาจใส่ให้ครบ 4 ด้านเพื่อความสวยงามเลยก็ได้
จะเห็นว่าตัวหนังสือขยับเข้ามาจากขอบแล้ว
Step 1.4
ประดับด้วยรูปสักหน่อยดีกว่า โดยให้เติมในส่วนของ background อันเดิมน่ะแหล่ะด้วยรูปที่เตรียมมา
ตัวผมเตรียมรูป อาหมวยแฟนอาร์ท จาก น้องนุ่น มาใส่นะครับ โดยทำพื้นหลังให้เป็นสีเดียวกับ bg เดิมแล้วเซพเป็นไฟล์ png ตัวอย่างรูป 
.comment{
.
background:#999 url(ลิงค์รูป) no-repeat top right;
.
}
url(ลิงค์รูป) ชัดเจนนะครับคือรูปที่เราเอามาใส่ background
no-repeat ไม่ให้รูปทำซ้ำ ให้โชว์แค่โดดๆ เดี่ยวๆ
top right จัดตำแหน่งให้อยู่ด้านขวาบน เพื่อให้หลบข้อความที่อยู่ด้านซ้าย สามารถเปลี่ยนแปลงได้หลายอย่างเช่น top left,top center เป็นต้น (ดูได้จากเอนทรี่มือใหม่บทที่ 1)
เสร็จแล้ว! ใครโพสสั้นๆ จะไม่เห็นหมวยเต็มตัวนะจ้ะ เอิ้กๆๆๆๆ
workshop แบบที่ 2
step 2.1
ไปที่ .comment .post เปลี่ยน float:right; ให้เป็น float:left;
แล้วไปที่ .comment .info เปลี่ยน float:left; ให้เป็น float:right;
.comment .post{
float:left;
.
}
.
.
.comment .info{
float:right;
.
}
จะสลับด้านกันเป็นแบบนี้
Step 2.2
คราวนี้มาใส่ background กันไปที่ .comment แล้วใส่ background ตามรูปที่เตรียมมาแบบนี้
จะเห็นว่าเป็น backgroud 2 สี ทางซ้ายคือส่วนเมนท์ ทางขวาคือส่วน info ซึ่งต้องกำหนดขนาดของพื้นที่ให้ดีๆ
รูปนี้แถบสีเทาผมกำหนดความกว้างไว้ที่ 160 px เพื่อให้พอดีกับขนาดของ .comment .info ซึ่งเราสามารถดูได้ที่ ค่า width + ค่า margin-right
เมื่อใส่ลงไปจะได้โค้ดแบบนี้
.comment {
.
.
backgrounnd:url(ลิงค์รูป) repeat-y top right;
}
repeat-y คือทำให้รูปทำซ้ำในแนวตั้ง เพื่อให้ภาพ bg ขยายไปในแนวตั้งตามขนาดข้อความที่สูงขึ้นหากมีคนมาเมนท์ยาวๆ
top right ทำให้ภาพอยู่มุมขวาบนเพื่อให้พอดีกับช่อง info
step 2.3
ดูเหมือนว่า info จะชิดขอบมากไป เราก็ต้องทำย่อหน้าโดยใช้ padding เช่นเคยโดยไปแก้ไขที่ .comment .info
ผมจะทำย่อหน้าจากซ้ายขนาด 5px เช่นเดิมนนะครับ โดยใช้ padding-left:5px;
.comment .info{
.
padding-left:5px;
}
อ่าว เหมือนเมนท์จะแหก ตรงนี้เพราะขนาดมันไม่พอดีจากที่เราเพิ่ม padding-left เข้าไป 5px ครับ เราต้องไปปรับลดส่วนของ width ลงอีก 5px เช่นกัน
ตอนนี้ส่วน .comment .info มี width:150px; เราปรับลง 5px ก็เหลือ 145px;
.comment .info{
.
width:145px;
.
padding-left:5px;
}
Step 2.4
ใส่กรอบเข้าไปหน่อยเพื่อความสวยงาม โดยไปที่ .comment อีกครั้งแล้วเติมส่วน border ให้เรียบร้อย โดยลบบรรทัด border-bottom ออกไปด้วย
ผมเลือก border:5px ridge #999; และใส่ padding-left:5px; กับ padding-top:5px; เพื่อทำย่อหน้าให้เมนท์ด้วย
.comment{
border-bottom:1px solid #DDD; <<<ลบออกไป
.
.
border:5px ridge #999;
padding-left:5px;
padding-top:5px;
}
เสร็จแล้ว!
workshop แบบที่ 3
แบบนี้เห็นคนใช้กันเยอะ
Step 3.1
ไปที่ .comment .post ลบบรรทัด float:right; ออก แล้วปรับค่า width ให้เป็น 100% (width:100%) หรือปรับให้มีขนาดตามขนาดของ #content
ผมเลือกปรับขนาดตาม width ของ #content ของผมคือ 490px เพื่อให้ปรับแก้ได้ง่ายขึ้น (แต่ละคนอาจไม่เท่ากันลองดูของตัวเองก่อนนะครับ)
.comment .post {
float:right; <<< ลบออกเลย
width:490px;
}
แล้วไปที่ .comment .info ลบบรรทัด float:left; ออกปรับแก้ width ให้เท่ากับ .comment .post เลยครับ
.comment .info{
float:left; <<< ลบออก
width:490px;
.
}
Step 3.2
ใส่สี background ให้ .comment .post แล้วใส่ค่า padding เพื่อสร้างย่อหน้าด้านละ 5px;
.comment .post{
.
.
background:#999;
padding:5px;
}
padding:5px; คือสร้างย่อหน้าทุกด้าน ด้านละ 5px
Step 3.3
ใส่กรอบให้ .comment เพื่อความสวยงามผมใช้ border:5px double #000;
.comment{
border-bottom:1px solid #DDD;
.
.
border:5px double #000;
}
แต่ border จะทำให้ background ล้นออกไปดังภาพ
เราต้องไปปรับลดขนาดที่เกินออกไปของ .comment .post ลงอีก 10px (คิดจาก border ซ้าย ขวา ข้างละ 5px)
โดยจากเดิน width:490px; ก็ปรับลดเป็น width:480px;
แล้วขนาดของกล่องก็จะพอดี
Step 3.4
คราวนี้เราจะเลื่อนรูป avatar เพื่อนๆ ไปทางขวาให้ไปที่ .comment .info img เติม float:right; ลงไป
.comment .info img{
.
float:right;
}
แล้วก็เลื่อนตัวอักษรตามมาบ้างโดยไปที่ .comment .info แล้วใส่โค้ด text-align:right; ใส่เพิ่มเข้าไป
.comment .info{
.
.
text-align:right;
}
Step 3.5
คราวนี้เรามาแต่ง background ก่อนอื่นใส่ตัวนี้ลงไป
ใน .comment .post เป็นไฟล์ gif ช่วยเพิ่มบล้อกให้มีสีสัน อิอิ
.comment .post{
.
background:#999 url(ลิงค์รูป) no-repeat bottom right;
.
}
no-repeat ทำให้ภาพไม่แสดงซ้ำ
bottom right คือจัดภาพให้อยู่ขวาล่างเพื่อหลบตัวอักษร
จากนั้นไปที่ .comment .info บ้างใส่รูปนี้เข้าไป 
เพื่อทำให้เป็นช่องคำพูด ขนาดรูปนี้มีความสูง 25 px ทำให้เราต้องสร้าง padding จากด้านบนให้พอดีขนาดรูปนะครับ เพื่อที่รูป bg ไม่ซ้อนตัวหนังสือ
.comment .info{
.
.
background:url(ลิงค์รูป) no-repeat top right;
padding-top:25px;
}
padding-top เพื่อขยายพื้นที่ระหว่างตัวหนังสือและขอบให้พอดีกับ bg ที่เราเพิ่มเข้ามา
Step 3.6
รูป avatar มันติดขอบเราก็ไปแก้ซะหน่อยพองามโดยเพิ่มค่า padding ให้ .comment .info img
.comment .info img{
.
padding-right:10px;
padding-left:10px;
}
ผมเลือกเพิ่มข้างซ้ายและขวาอย่างละ 10px นะครับ
โอเค avatar ออกห่างจากขอบแล้ว
Step 3.7
เราจะย้าย #หมายเลข ไปฝั่งขวานะครับ ให้เพิ่มส่วนนี้ลงไปเลย .commentno โดยให้ใส่ float:left; เข้าไปโยกหมายเลขไปด้ายซ้าย
.commentno{
float:left;
font-size:2.0em;
font-weight:bold;
color:#00c;
}
font-size เป็นการปรับขนาดให้เพิ่มขึ้นโดยผมใช้หน่วย 2.0em หรือขนาด 2.0 เท่าของขนาดปกติ
font-weight ใส่ค่า bold เพื่อให้ตัวเลขหนาขึ้น
color ใส่สีของตัวเลข
จากนั้นก็ปรับชื่อคนมาเมนท์เราบ้างโดยเติมส่วนนี้ลงไป .commentator แล้วปรับ font ได้ตามใจเรา
.commentator {
font-size:2.0em;
font-weight:bold;
color:#00c;
}
เสร็จแล้ววว!
===============
การทำส่วนเมนท์นี่พลิกแพลงได้ 108 อย่างจริงๆ หากมีเวลาจะมาเพิ่มเติมให้นะครับ ^ ^
ช่วงนี้ว่างๆ เดี๋ยวจะอัพบ่อยๆ จ้า
ขอบคุณมากๆเลยค่ะ
กำลังจะเปลี่ยนธีมอยู่พอดีเลยค่ะ
ขอบคุณจริงๆค่ะ
แอดนะคะ ^^
#1 By kumapanda on 2009-11-01 21:45