การตกแต่งบล็อก

สวัสดีค่ะ _/\_ ห่างหายหน้าหายตาไปนานเลย วันนี้ได้ฤกษ์มาเขียนบันทึก จะเขียนทั้งทีก็เลยมีความคิดว่า อยากสอนพี่ๆ เพื่อนๆ น้องๆ ตกแต่งบล็อกของตนเองได้ตามต้องการ (แต่จริงๆ ในระบบก็มี Theme ให้เลือกเยอะแล้วนะ) โดยใช้ CSS มาทำให้บล็อกของเราดูแปลกแหวกแนวจากคนอื่น ไม่พูดพล่ามทำเพลงแล้ว เราไปเริ่มกันเลยดีกว่าค่ะ

ในคลาสนี้จะเริ่มต้นการใส่ header และพื้นหลัง กันก่อนนะคะ

 การใส่ header 

คำถาม header คือส่วนไหน??

คำตอบ ดูได้ในภาพเลยค่ะ

คำถาม แล้วถ้าเราอยากเปลี่ยนรูปในส่วน header เราจะทำอย่างไร??

คำตอบ ดูได้ในภาพเลยค่ะ

  • คลิกไปยังหน้าตกแต่งบล็อก
  • คลิก Tab แก้ไข CSS ที่ตกแต่งมาเอง

  • ในส่วนช่องว่างนั้น ให้ใส่โค้ดดังนี้ค่ะ
#title {
  background : url("URL ของภาพที่จะมาใส่ไว้ใน header");
}

Ex

#title {
  background : url("http://gotoknow.org/file/sukanya_panya/1118a1tg7.png");
}
  • สามารถปรับความสูงของ header ได้ตามต้องการ เพื่อให้มีขนาดพอเหมาะกับภาพ header ใหม่ของเรา โดยเพิ่มโค้ดเข้าไปดังนี้
#title {
  background : url("http://gotoknow.org/file/sukanya_panya/1118a1tg7.png")
  height: 208px;
}
  • ค่าความสูงสามารถปรับได้ตามต้องการค่ะ แต่ขนาดภาพมาตรฐานของ header ที่ใช้อยู่ในเว็บไซต์จะเป็นขนาด 960X200px ค่ะ
  • เมื่อใส่พื้นหลัง ความสูงเรียบร้อยแล้ว และกด บันทึก ภาพก็จะแสดงขึ้นมาแทนที่ในส่วนของ header พร้อมทั้งความสูงที่เปลี่ยนไปค่ะ

ใส่ header เสร็จไปเรียบร้อยแล้ว พี่ เพื่อนๆ จะสังเกตเป็นว่า มีพื้นหลัง(background) ของTheme เก่าอยู่ เรามีวิธีเอาพื้นหลังออก โดยเขียนโค้ดนี้ใส่เข้าไปจ้า

#screen-wrapper {
  background: none;
}

เมื่อใส่โค้ดนี้และกด บันทึก เรียบร้อยแล้ว พื้นหลังของ Theme เก่า ก็จะหายไปแล้วค่ะ

 การเปลี่ยนสีพื้นหลัง (background) 

ถ้าเราต้องการจะเปลี่ยนสีพื้นหลังให้เข้ากับสี header ก็สามารถเขียนโค้ดเพิ่มได้ ดังนี้ค่ะ

body {
  background-color: สีที่ต้องการเปลี่ยน;
}

Ex

body {
  background-color: #F3D6D6;
}

เมื่อใส่โค้ดนี้และกด บันทึก เรียบร้อยแล้ว จะเห็นว่าสีพื้นหลังได้เปลี่ยนไปตามสีที่เราต้องการเรียบร้อยแล้ว

      เป็นอย่างไรบ้างคะ เทคนิคการตกแต่งบล็อกฉบับเริ่มต้น หวังว่าคงไม่ยากเกินไปนะคะ ต่อไปเราจะได้มีอิสระในการตกแต่งบล็อกได้ตามใจเราด้วยค่ะ  คราวหน้ามีเทคนิคอะไรมาแชร์กันอีก ต้องติดตามชมค่ะ

หมายเหตุ ภาพที่พี่ๆ เพื่อน จะนำมาใช้ตกแต่ง ควรจะเป็นภาพที่ทำขึ้นมาเอง หรือภาพที่ได้รับการอนุญาตจากเจ้าของ หรือภาพจากเว็บไซต์ที่อนุญาตให้ดาวน์โหลดภาพได้ฟรี เช่น http://www.flickr.com ค่ะ