About MeAll Entries

 
 
สวัสดีครับ 
 
ก่อนอื่นก็ขอบคุณทุกท่านที่ตอบแบบสอบถามในเอนทรี่ที่แล้วนะครับ ตอนนี้ปิดโพลแล้ว
 
 
 
 
ไม่ได้เขียน howto ตั้งนาน แถมไม่ได้แตะ CSS นานเหมือนกัน คราวนี้ได้ไอเดียเลยเขียนซะเลย ถือว่าเป็นการทบทวนด้วย 
 
แต่ทำไมต้องกล่องคอมเม้นต์? อย่างอื่นในบล็อกก็มีตั้งเยอะแยะทำไมต้องเป็นฮาวทูเกี่ยวกับกล่องคอมเม้นต์โดยเฉพาะด้วย? กล่องคอมเม้นต์เป็นลูกเจ้าพ่อเหรอ? ที่เขียนเรื่องนี้เพราะรับเงินหรือเกรงอิทธิพลหรือเปล่า?
 
ไม่ใช่เลยครับ เจ้ากล่องนี่ไม่ได้มีอำนาจมากไปกว่าส่วนอื่นในบล็อกเลย มันออกจะเป็นเด็กไร้เพื่อนด้วยซ้ำ ไม่มีใครสนใจใยดี ถูกทอดทิ้งให้นั่งกอดเข่าเศร้าอยู่กลางสายฝนตลอดเวลา... *เพลงดราม่าๆ เริ่มบรรเลง*
 
ไม่ใช่แล้ว 
 
ความจริงคือกล่องคอมเม้นต์มักเป็นสิ่งที่เจ้าของบล็อกไม่ค่อยให้ความสนใจ ส่วนใหญ่พอแต่งบล็อกเสร็จนึกได้ว่าลืมแต่งมัน และปล่อยเลยตามเลย กล่องคอมเม้นต์ส่วนมากจึงหน้าตาเหมือนกันอย่างกับตะเกียบ
 
อีกอย่างคือ การใช้ CSS แต่งกล่องคอมเม้นต์ค่อนข้างแตกต่างกับการแต่งส่วนอื่นๆ ในบล็อก
 
เริ่มเลยดีกว่า
 
 
เก็บเกี่ยว
 
CSS พื้นฐานทั่วไป ถ้าแต่งส่วนอื่นของบล็อกได้ก็ไม่ยากครับ
 
สองอย่างที่สำคัญมากเวลาจะแต่งกล่องฯ คือ background และ border ซึ่งจะอธิบายคร่าวๆ ละกัน (ใครรู้แล้วก็ข้ามได้เลยครับ)
 
 
background หรือพื้นหลัง ชื่อก็ตรงตัวอยู่
เราสามารถแบ่งพื้นหลังได้เป็นหลักๆ สามประเภทด้วยกัน
 
1. สีพื้น
 
เป็นสีๆ เดียว ลักษณะจะประมาณนี้
 
#selector{
background: #โค้ดสี;
}
 
2. รูปภาพ
 
ใช้รูปภาพเป็นพื้นหลัง ลักษณะประมาณนี้
 
#selector{
background: url(url ของรูป) repeat-none #โค้ดสี;
}
 
สังเกตว่าถึงเราจะใส่รูป และรูปนั้นก็พอดีกับสิ่งที่เราต้องการใส่อยู่แล้ว เราก็ใส่โค้ดสีไปอีกชั้น เผื่อเวลารูปไม่โหลด โค้ดสีนั้นก็จะโผล่มาแทน ถ้าไม่เข้าใจดูตัวอย่างในรูปครับ
 
 
3. พื้นหลังแบบแพทเทิร์น
 
เป็นรูปเล็กๆ ซ้ำๆ กัน ลักษณะประมาณนี้
 
#selector{
background: url(url ของรูป) repeat #โค้ดสี;
}
 
เช่นเคย เรามีสีพื้นไว้รองรับ แต่คำว่า repeat จะทำให้รูปที่ใช้ทำพื้นหลังต่อตัวกันไปเรื่อยๆ
นอกจากนั้นยังมี repeat-x และ repeat-y เพื่อให้ต่อกันในเฉพาะแกน x และแกน y แต่ตอนนี้ขอข้ามไปละกันครับ
 
 
border หรือกรอบ ลักษณะประมาณนี้
 
#selector{
border: 1px #000000 solid;
}
 
ในที่นี้ 1px คือความหนาของขอบ
#000000 คือสีของขอบ
solid คือประเภทของขอบ
 
ประเภทของขอบ มีหลายประเภทตามรูปข้างล่าง
 
 
ส่วนมากจะใช้ solid แต่แบบอื่นก็อาจจะใช้เพื่อความแปลกตา
 
นอกจากขอบเหมือนกันสี่ด้านแล้ว เรายังแต่งขอบแต่ละด้านแยกกันได้ด้วย โดยใช้คำสั่งนี้
 
border-left: --- ;
border-right: --- ;
border-top: --- ;
border-bottom: --- ;
 
ซึ่งจะเป็นขอบเฉพาะ ซ้าย ขวา บน ล่าง
 
ถ้าใครอยากรู้เรื่อง CSS พื้นฐานเพิ่มดูได้ที่ Howto CSS ของผมนะครับ
 
 
*ชำแหละ*
 
(โปรดทำหน้าจิตๆ ระหว่างอ่านหัวข้อ ใครมีมีดประกอบฉากด้วยยิ่งดี)
 
ก่อนที่เราจะเริ่มแต่งกล่องคอมเม้นต์เราก็ต้องรู้โครงสร้างของมันก่อน
ซึ่งโครงสร้างของกล่องคอมเม้นต์อาจจะดูสับสนเมื่อเทียบกับส่วนอื่นๆ ในบล็อก
 
ด้านล่างเป็นโครงสร้างแบบกล่อง (น่าจะ) ทำให้ดูง่ายขึ้น
 
 
 
มาแยกกันทีละส่วน ตามสีเลยดีกว่า
 
สีแดง คือ #commentform เป็นกล่องครอบทุกอย่าง
 
สีม่วง (บนสุดเลย มองยากหน่อย) คือ h3 เป็นหัวข้อที่เขียนว่า "Comment" นั่นละ
 
สีฟ้าอ่อน คือ .formrow เอาไว้แยกแต่ละส่วนของกล่อง
 
สีฟ้าเข้ม คือ label (ไม่ต้องมี . หรือ # นำหน้าเวลาใช้ใน CSS) เอาไว้เก็บคำว่า name: หรือ website: พวกนั้น
ส่วนนี้สังเกตว่ามี label เปล่าๆ สองอัน ข้างล่างคำว่า comment: อันนึง และหน้าปุ่ม submit อีกอัน ไม่ได้มีไว้ประดับ แต่มีไว้เป็นที่กั้นไม่ให้ส่วนที่พิมพ์คอมเม้นต์เบี้ยวมาด้านซ้าย
 
สีเขียว คือ .textbox ช่องใส่ชื่อ url อะไรเทือกนั้น
 
สีส้ม คือ input (ไม่ต้องมี . หรือ # นำหน้า) คือปุ่มทั้งหลาย รวมถึงปุ่ม submit ด้วย
 
สีเหลือง คือ textarea (ไม่ต้องมี . หรือ # นำหน้า) คือที่พิมพ์คอมเม้นต์
 
ส่วนอีโม่ ดาวแดง และรูป captcha ใช้ชื่อเดียวกันคือ img
 
 
ตกแต่ง~
 
 
เริ่มกันจริงๆ ซักที 
 
ในฮาวทูนี้ผมจะไม่พูดถึงการตกแต่งพวก h3 หรือตัว #commentform แต่จะเน้นเรื่องการแต่งพวกปุ่มหรือกล่องใส่ชื่อมากกว่า
 
เราควรจะเริ่มจากปุ่มก่อน
ทำไมต้องเริ่มจากปุ่ม? เดี๋ยวก็รู้ครับ 
 
ถ้าเราดูใน CSS ที่มากับธีม apollo จะพบว่าไม่มี selector ของปุ่มเลย เราก็สร้างมันขึ้นมาใหม่ โดยใส่นี่เข้าไป
 
#commentform input{
 
}
 
อย่างที่เขียนไว้ด้านบน พวกปุ่มจะใช้ชื่อว่า input
 
ปุ่มนี่มันดูเป็นอะไรที่ไม่น่าจะแต่งได้ เพราะมันเป็นปุ่มของมันอยู่แล้ว แต่เราจะใส่ CSS เพื่อไปทับมันอีกที (อธิบายไม่ถูกแฮะ)
 
หลักๆ ก็ใส่ background กับ border เข้าไป จากปุ่มจืดๆ มันก็จะกลายเป็นอะไรประมาณนี้:
 
 
 
โอเคมันไม่ใช่ปุ่มที่สวยที่สุดในโลก แต่คุณทำได้ดีกว่านี้ใช่มั้ย...?
 
(ตัวอย่างข้างบนก็แค่ใส่ background สีเทาอ่อน border สีเข้มขึ้นมาหน่อย ปรับสีตัวหนังสือเป็นสีขาว ทำให้เป็นตัวหนา)
 
แต่สังเกตว่านอกจากปุ่มจะเปลี่ยนแล้ว ตัว textbox ก็ยังเปลี่ยนเป็นแบบเดียวกันเป๊ะ!?
แต่ตอนนี้ลืมมันไปก่อน เพราะปุ่มของเรายังดูเรียบๆ แบนๆ
ตอนนี้ถ้าเอาเม้าส์ไปวางไว้ หรือไปกดมัน มันก็ยังเป็นปุ่มสีเทา ขอบสีเข้มเหมือนเดิม
ต่างกับปุ่มแบบเดิม ที่เอาเม้าส์ไปวางแล้วจะมีสีฟ้าๆ กดแล้วจะดูยุบลงไป
 
เราจึงต้องใส่ :hover และ :active
 
ใส่โค้ดนี้เข้าไป:
 
#commentform input:hover{
 
}
 
และ
 
#commentform input:active{
 
}
 
อันแรกคือเวลาเราเอาเมาส์ไปวางทับ จะกำหนดให้มันเปลี่ยนสีก็ได้ เปลี่ยนอะไรก็ได้ตามใจ
อันที่สองคือตอนเรากด เหมือนกันเราจะเปลี่ยนสีเปลี่ยนอะไรก็ได้
 
 
เช่น:
 
 
นอกจากเปลี่ยนสี พื้นหลัง ขอบแล้ว เราก็สามารถเปลี่ยนพวก margin หรือ padding เพื่อให้ได้ผลที่แปลกตา
 
สังเกตว่าตรง :hover ผมไม่ได้กำหนดค่า border ให้มัน มันก็จะเอาค่า border นั้นมาจากสถานะแรกนั่นเอง
 
 
ตกแต่ง (ต่อ)~
 
 
อันที่จริง :hover นั้นเราสามารถนำไปใส่ให้อะไรก็ได้ รวมถึง textbox ด้วย
 
#commentform input.textbox{
 
}
 
โค้ดข้างบนจะเลือกเอาเฉพาะ textbox อย่างเดียว ซึ่งถ้าเรากำหนดอะไรให้ปุ่ม เราก็ต้องกำหนดค่าเดียวกันนั้นทับไป อย่างข้างบนผมกำหนด background, border, color และ font-weight ให้กับปุ่ม ซึ่งถ้าเรากำหนดแค่ background และ border ทับไป พอพิมพ์เข้าไปใน textbox ตัวหนังสือก็จะเป็นสีขาวและหนา
 
หลักๆ ก็วิธีเดียวกับปุ่ม
 
พวก textarea ก็เหมือนกัน แต่สิ่งที่จะทำให้มันดูดีคือการใส่ :hover และ :active นี่แหละ
ไม่ต้องให้เปลี่ยนมาก เปลี่ยนสีพื้นหลังนิดหน่อยหรือสีขอบ มันทำให้บล็อกดูโปรฯ ขึ้นเยอะ 
 
ที่สำคัญคือใช้สีชุดเดียวกับธีมที่เหลือ เท่านี้เราก็จะได้อะไรโปรฯๆ มาแล้ว
 
เพราะฉะนั้น สรุปง่ายๆ เป็นข้อๆ คือ:
 
1. ใส่ :hover และ :active ให้หลายๆ ส่วน (textbox, textarea, ปุ่ม) แต่ระวังอย่าให้เปลี่ยนหวือหวาเกินไป
2. ปรับพื้นหลังและขอบให้เข้ากับธีมโดยรวม
3. ไม่ต้องให้อัดกันแน่นจนเกินไป (ที่มีมากับธีมผมรู้สึกว่ามันแคบไปหน่อย) แต่ก็อย่ากว้างเกินเช่นกัน
4. ถ้าใช้รูปภาพเป็นพื้นหลังก็อย่าให้รูปมันบังตัวหนังสือ (หลายบล็อกเป็นแบบนี้ พิมพ์แล้วอ่านไม่ออก)
5. อย่าลืม save แล้ว refresh บ่อยๆ (ถ้าจะทดสอบ textbox ก็เปิดอีกเบราเซอร์นึงเลย) ถ้าใช้ preview บางทีบล็อกจะดูเบี้ยวๆ
6. บี ครีเอทีฟ 
 
 
หาไอเดีย
 
ถ้าคิดอะไรไม่ออกก็ลองไปหาแรงบันดาลใจแล้วเอามาประยุกต์ใช้ ง่ายๆ เลยก็ในเอ็กซ์ทีนนี่แหละ ดูใน favourites ผมก็ได้ หลายบล็อกก็มีกล่องคอมเม้นต์ที่ตกแต่งสวยงาม (favourites กดตรงรูปหัวใจที่เมนูข้างขวา ->)
 
หรือดูตามลิ้งค์พวกนี้ก็ได้:
 
 
 
 
ขอให้สนุกกับการแต่งบล็อกครับ 
 
 
 
 
ตอบคอมเม้นต์ (ไม่ได้ตอบนานนะเนี่ย) ตอบของเอนทรี่ [Theme] Elegance II นะครับ
 
 

#6 [LeaderDevil]: "ทำในอาฟเตอร์เอฟเฟคแน่เลย ^^ ตอนนี้กำลังศึกษาอยู่ แต่ก็ไม่มีเวลาโหลดโปรแกรมมาติดตั้งซะที"

หามาเลย สนุกมาก XD

 

#7 [RacheOh]: "อะฮะ ดูคลิปล่างแล้ว มีเสียงล่ะ 0.0"

อ่ะใช่ อันล่างใส่เสียงลงไปหน่อยนึง

 

#10 [มกจัง]: "สงสัยว่าใช้โปรแกรมอะไร~~~"

After Effects เน่อ ใช้แล้วมันมือดี

 

#11 [Critical Zeed]: "อยากทำวีดีโอแบบนี้บ้าง ถ้ามีโอกาสอยากให้สอนครับ"

ตอนนี้เพิ่งหัดใช้ครับ = =" ยังไม่มีอะไรไปสอนใครได้

 

 
 
เอาจริงๆ ก็ตอบได้นิดเดียว 
 
 
เจอกันเอนทรี่หน้าครับ 
 
 
ปล. ทำไมเขียนออกมาแล้วดูยาวจัง... หวังว่าจะเป็นเพราะมันละเอียดนะ ฮ่าา
ปล 2. ถ้าอ่านแล้วงง ก็จงคิดไว้เถิดว่า คนเขียนก็เขียนแล้วงงเหมือนกัน +_+
ปล 3. ไม่ได้ตอบเม้นต์มาหลายเอนทรี่มากอะ ที่ตอบไปนี่ก็ของเอนทรี่ก่อนนู้นนน
ปล 4. นี่มันพื้นที่บ่นรึไงนะ...
ปล 5. หมดมุกจะเล่นแล้ว...
ปล 7. อ้อ สุขสันต์วันสงกรานต์ครับ
ปล 8. ไม่มีปล 6!! (ไหนบอกหมดมุก!?)
 

Comment

Comment:

Tweet

embarassed

#40 By joop (122.155.45.119) on 2016-02-26 20:30

เจ๋งอ๊ะ! เด๋วมาแต่งมั้ง!

#39 By ✦blackninja on 2012-07-09 09:38

Thanks for the article. I read the above post.

#38 By Chicgraphic on 2012-03-30 19:55

#37 By Fuyu [ KI ] on 2011-12-26 12:58

มีประโยชน์มากๆ confused smile confused smile confused smile Hot! Hot! Hot! Hot! Hot!

#36 By kidsnovel on 2011-09-25 20:24

ทำความเข้าใจอยู่ อิอิ

#35 By orbiter on 2011-07-15 00:40

อธิบายละเอียดมากเลยค่ะ big smile Hot! Hot!

#34 By pangnim on 2011-04-23 12:53

ลึกซึ้งมากครัฟฟ ;w; wink

Hot!

#33 By Fantasier CS4 on 2011-04-15 21:23

Hot! Hot!
สุขสันต์วันสงกรานต์เช่นกันค่าาา >.<
ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ ดอกมะลิ ดอกมะลิ ดอกมะลิ ดอกมะลิ ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ
ขันน้ำ ขันน้ำ ขันน้ำ ขันน้ำ ดอกมะลิ ดอกมะลิ ดอกมะลิ ดอกมะลิ ปืนฉีดน้ำ ปืนฉีดน้ำ ปืนฉีดน้ำ