Thiti Phikuntong

หลังจากที่เมื่อวานอู้ไป 1 วัน วันนี้ เอาวิธีการออกแบบ Theme พื้นหลังแบบมาม่า มาให้ดูครับ

 

 

นี่คือ ภาพพื้นฐานของ Theme ที่ทาง Exteen ทำมาให้ คราวนี้ หากเรามีภาพเล็กๆ ที่ต้องการเรียงแบบกระจาย (เหมือนพื้นปูกระเบื้อง) แบบนี้ 

 

 

วิธีที่ 1 แบบเทน้ำร้อน รอ 3 นาที

 เราสามารถแก้ CSS Style Sheet ได้ง่ายๆ ตามนี้ครับ

body {
    background: url(images/test02.jpg) ;

(หากใครยังไม่อ่านตอนที่ 1 กับ ตอนที่ 2 ขอให้ย้อนไปอ่านนิดหนึ่งก่อนนะครับ จะได้เข้าใจได้ง่ายมากขึ้น)

 จริงๆ แล้ว ภาพที่นำมาทำเป็น Background เป็นเพียงภาพเล็กๆ เท่านั้นครับ แต่การเขียน Code CSS แบบนี้ ทำให้ภาพเล็กๆ นั้น มาเรียงตัวกันเต็มพื้นหลัง

ข้อดีของการทำ Wall Paper ของ Theme แบบนี้ คือ ทำให้ Blog ของเรา Load ได้เร็วขึ้น เพราะไฟล์ภาพที่ทำ Background มีขนาดเล็กมากๆ นั่นเอง นอกจากนั้น ยังสามารถหา Download จากพวก Web แจก Background เยอะแยะมากมาย

 

 

 ลองเล่นอีกซักแบบเพื่อความเข้าใจเพิ่มขึ้นครับ

 

 

 ง่ายไหมครับ เพียงเท่านี้ เราก็มี Blog สวยๆ ใสๆ แล้วละ

 

วิธีที่ 2 มาม่าใส่ไข่ เน้นสำหรับคนที่มีฝีมือในการออกแบบหน่อยครับ

 

 

 วิธีที่ 2 นี้ เหมาะกับคนที่ชอบออกแบบงาน Graphics อยู่บ้าง เทคนิดอย่างง่ายคือ ออกแบบภาพ ให้มีความกว้าง 1920 Pixel สูง 1080 Pixel (มันคือความกว้างความสูงของจอ HD นะครับ) แล้วออกแบบภาพให้มีช่องว่างตรงกลาง 800 Pixel (จริงๆ แล้ว 780 Pixel ครับ แต่ควรเผื่อๆ ไว้หน่อยก็ดีนะ) โดยตรงกลาง จะเป็นเนื้อหาของ Blog เราครับ

การออกแบบภาพ จะให้ลาย หรือรูปภาพ อยู่กึ่งกลาง และชิดด้านบนครับ เมื่อเสร็จแล้ว Upload ไว้ จากนั้น มาแก้ Code CSS จะได้แบบนี้ครับ

body {
    background: url(images/bg_fix.jpg) fixed top center ;

 หมายถึง ให้ภาพพื้นหลังที่เราออกแบบมานั้น ยึดอยู่กับที่ ชิดด้านบน และจัดกึ่งกลาง ทั้งนี้ เพราะ Blog ของ Exteen มีการกำหนด CSS เบื้องต้น ให้อยู่กลางหน้า Web เมื่อทำแบบนี้ จะทำให้เราได้ Theme ที่ยึดอยู่กับที่ไม่ไปไหนครับ

 

 

 จะเห็นว่า แม้ว่า เราขยับหน้า Web ขึ้นไปแล้ว พื้นหลังที่เราออกแบบไว้ ก็จะยังอยู่เหมือนเดิม

 

 วิธีที่ 3 มาม่า ทรงเครื่อง

 

 

อาศัยเทคนิคการออกแบบนิดหน่อยครับ เพราะพื้นหลังที่เราออกแบบต้องหาจุดจบด้านล่างให้ได้  เนื่องจากแบบที่ 3 นี้ พื้นหลังที่เราออกแบบ จะเคลื่อนตัวไปกับ Blog ของเราด้วย ซึ่ง หากไปทำภาพให้ความสูง สูงมากเกินไป จะทำให้ไฟล์ภาพใหญ่เกินควร และ ทำให้ Blog ของเราเปิดช้ามากด้วยครับ

ดังนั้น ปกติ การออกแบบ Theme ลักษณะนี้ จะออกแบบความกว้าง 1920 Pixel ส่วนความสูง จะอยู่ที่การออกแบบของเราีครับ

 

 

เทคนิคการเขียน CSS ของพื้นหลังเขียนได้ดังนี้ครับ

body {
    background:#000000 url(images/bg_top.jpg) top center ;

 วิธีนี้ จะใช้สีพื้นเข้าช่วยด้วยครับ โดยจะเห็นว่ามี #000000 เพิ่มขึ้นมา ซึ่ง #000000 คือสีดำครับ ตัวอย่างภาพที่ผมนำมาทำ Theme จะทำให้พื้นหลังค่อยๆ จางลงเป็นสีดำ แล้วใช้พื้นหลังสีดำ เป็นตัวที่ทำหน้าที่ต่อครับ

จะเห็นว่า แตกต่างจากแบบที่ 2 ตรงที่ เมื่อเลื่อน Blog ลงมา พื้นหลังก็จะตามลงมาด้วยครับ ความหมายของบรรทัดนี้ คือ ให้พื้นหลังปกติเป็นสีดำ ใช้ภาพพื้นหลัง ติดด้านบน และจัดกึ่งกลาง (จะเห็นว่าคำว่า Fix หายไป เพื่อให้มันเคลื่อนที่ไปด้านบนได้ครับ)

เอาละ ต้ม มาม่า 3 ถ้วย น่าจะทำให้คุณมี Blog ที่สวยขึ้นนะ