ระบบบล็อกของ GotoKnow สามารถตกแต่งรูปลักษณ์ได้สารพัดค่ะ แต่ผู้ใช้ควรจะมีความเข้าใจเรื่อง CSS บ้างนะค่ะ เพราะแก้โน่นแก้นี่อาจจะเกิดข้อผิดพลาดขึ้นมาได้ค่ะ

คราวที่แล้ว ดิฉันแนะนำเรื่อง การเปลี่ยนชุดสีของบล็อก และ การใส่รูปในส่วนหัวของบล็อกไปแล้ว

วันนี้ก็มีมาให้สนุกกันอีกค่ะด้วยการใส่รูปพื้นหลังของบล็อก

ผลลัพธ์ที่ได้จะมีหน้าตาดังนี้นะค่ะ ดูตัวอย่างที่ http://Cat.GotoKnow.org นะค่ะ

ขั้นตอน 1 ดิฉันทำรูปเท้าแมวขนาดเล็กมาก  ประมาณ 15 x 15 pixels แล้วนำขึ้นไปไว้ในไฟล์อัลบั้ม แล้ว copy ลิงค์ที่อยู่ของรูป (http://gotoknow.org/file/jantawan/catfoot.gif) มาใส่ใน CSS

ขั้นตอน 2 ดิฉันต้องปรับขนาดหน้าต่างให้เล็กลงหน่อยค่ะ เดิมเราตั้งไว้ที่ 970 pixels ดิฉันปรับลดมาเป็น 810 px และต้องลดขนาด sidebar ด้านข้างด้วยค่ะ เป็น 221 px และลดขนาดพื้นที่บันทึกเป็น 579 px นะค่ะ การลดขนาดต้องให้ได้อัตราส่วนนะค่ะ ไม่อย่างนั้น จะดูไม่สวยงาม และอาจมีปัญหาในการแสดงกับ browser แต่ละตัวค่ะ

CSS สำหรับขั้นตอน 2 คือ

div#container {width: 810px;}
div#content2 {float: right; width: 579px;}
div#sidebar2 {float: left; width: 221px;}

นอกจากนี้ จะสังเกตว่า ดิฉัน เปลี่ยนสลับด้านระหว่างส่วน sidebar กับส่วน contents นะค่ะ แต่คุณไม่อยากสลับ ก็ไม่ต้องใส่ float: right; กับ float: left; ลงไปนะค่ะ

ซึ่งก็เช่นเดิม CSS ที่ตกแต่งเองนี้จะนำไปใส่ไว้ที่ แผงควบคุม > บล็อกที่เลือก > แก้ไข > CSS ที่ตกแต่งเอง

ขั้นตอน 3 มาดู CSS สำหรับการใส่รูปพื้นหลัง

body
{
background: #ffffff;
background-image:
url("/file/jantawan/catfoot.gif");
background-repeat: repeat;
}

ศึกษาเพิ่มเติม option ของ CSS สำหรับการทำ background (http://www.w3schools.com/css/css_background.asp) 

เอาละค่ะ ลองลับสมองศิลปินในตัวกันออกมาหน่อยนะค่ะ และ ขอเชิญทุกท่านช่วยร่วมเล่าแลกเปลี่ยนเรียนรู้ประสบการณ์ของท่านในการฝีกทำรูปพื้นหลังกันหน่อยนะค่ะ หรือ ทำ CSS เพื่อให้สมาชิกท่านอื่น copy ไปใช้ได้เลย แล้วติดป้ายคำหลักของบันทึกว่า css และ รูปพื้นหลัง นะค่ะ

และติดตามประสบการณ์การใส่รูปพื้นหลังของสมาชิก GotoKnow กันได้ที่ลิงค์รวมป้ายเหล่านี้ค่ะ

http://gotoknow.org/post/tag/รูปพื้นหลัง

http://gotoknow.org/post/tag/css

ขอบคุณค่ะ

ปล. สำหรับท่านที่ยังไม่มั่นใจเรื่อง CSS และอาจจะทำรูปไม่เก่ง ก็ไม่เป็นไรค่ะ เรากำลังสมัครประกวดทำ theme ของ บล็อก ค่ะ แต่อาจต้องรออีกนิดนะค่ะ