การตกแต่งบล็อกส่วน header ใน gotoknow/learners


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

สวัสดีค่ะ _/\_ ห่างหายหน้าหายตาไปนานเลย วันนี้ได้ฤกษ์มาเขียนบันทึก จะเขียนทั้งทีก็เลยมีความคิดว่า อยากสอนพี่ๆ เพื่อนๆ น้องๆ ตกแต่งบล็อกของตนเองได้ตามต้องการ (แต่จริงๆ ในระบบก็มี 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 ค่ะ

คำสำคัญ (Tags): #css#gotoknow#ตกแต่ง gotoknow
หมายเลขบันทึก: 374647เขียนเมื่อ 13 กรกฎาคม 2010 15:11 น. ()แก้ไขเมื่อ 6 กันยายน 2013 23:12 น. ()สัญญาอนุญาต: ครีเอทีฟคอมมอนส์แบบ แสดงที่มาจำนวนที่อ่านจำนวนที่อ่าน:


ความเห็น (24)

ขอบคุณสำหรับความรู้ดีๆ ครับ ^-^

โหน้องสองคนนานๆๆๆมากๆๆมาที ฮาเลย แต่งนานแล้ว ฮ่าๆๆ (หมายถึงหัวบล็อก ) น้องสองคนว่าพอดูได้ไหม

http://gotoknow.org/profile/khajitfoythong

สวัสดีค่ะอาจารย์ขจิต

ระดับอาจารย์ชิวว่าคงเก่งกว่าชิวไปเยอะแล้วเป็นแน่ อิอิ

งั้นชิวขอบันทึกนี้ไว้ให้กลุ่มมือใหม่ดีกว่านะคะ แหะๆ ^ ^

ขอบคุณค่ะ..รอหา background ดีๆก่อนนะคะ..จะpost รูปตัวเองเรียงๆอย่างท่านเบอร์ 3. ก็เขินน่ะค่ะ...

A168af2ba0b5c0ff3802b83fffafc085 

สวัสดีค่ะ

เรื่องเหล่านี้ไม่รู้เลยค่ะ ดีใจค่ะที่มีผู้แนะนำ

จะรออ่านตอนต่อไปนะคะ

สวัสดีค่ะ คุณนาง นงนาท สนธิสุวรรณ

หลังจากที่หา background ได้แล้ว ก็สามารถลองทำตามดูได้นะคะ

เป็นกำลังใจให้ค่ะ ^ ^

 

สวัสดีค่ะ คุณณัฐรดา ยินดีค่ะที่ได้เป็นส่วนหนึ่งในการแนะนำสิ่งดีๆ

แล้วจะนำมาแชร์อีกนะค่ะ ^ ^

ดีจังเลยค่ะ....ที่ได้รับคำแนะนำ

เอ...เมื่อคืนก็เมนท์เข้ามาครั้งหนึ่งแล้วแต่ไม่รู้หายไปไหน

จะลองทำดูนะคะ  เพราะตอนนี้ก็แอบๆมองดูของคนอื่นอยู่

สวัสดีค่ะ คุณ krugui Chutima ยินดีค่า ^ ^

แล้วลองทำดูนะคะ ติดอะไรถามเข้ามาได้เลยค่ะ

เยี่ยมมากครับ ความรู้เรื่องนี้ ... ขออีก ;)

สวัสดีครับ

  • สุดยอด...
  • ขอบพระคุณครับ

ขอบคุณค่ะที่นำเรื่องที่มือใหม่หัดเขียนดีใจที่ได้รู้ จะติดตามต่อไปค่ะ

ขอบคุณค่าอาจารย์ Wasawat Deemarn คุณไทบ้านผำ คุณครูแมว อักษรา

แล้วหนูจะนำมาแชร์อีกนะค่ะ ^ ^

  • ขอบคุณครับ
  • เป็นประโยชน์อย่างยิ่ง

ขอบคุณนะคะ

ดาวจะลองหารูปสวยๆ มาทำ heading ดูค่ะ

แต่ยังไม่กล้าเอารูปตัวเองลงมาเรียงๆลง เหมือนใครบางคน ฮ่าๆ

ยินดีค่ะ คุณนายก้ามกุ้ง

คุณ blue_star คนนั้นเขาเทพแล้วก็มั่นด้วยค่ะ อิอิ

ขอบคุณค่ะ กำลังหาพอดีเลย

จะลองทำดูนะคะ....มือใหม่ค่ะ

หวังว่าคงเกิดประโยชน์กับคุณ วรรณภา บ้างไม่มากก็น้อยนะคะ ^ ^

ดีจัง เป็นบุญกุศลนะเนี่ยหาซื้อกันไม่ได้ ขอชื่นชมครับ

(ขอให้ทำดีแบบนี้ต่อไปนะครับ เป็นกำลังใจให้ครับ)

จากคนที่ผ่านมาและสนใจ

น่าสนใจจริง ๆ ครับ กำลังอยากทำรูป header พอดี

ขอบคุณทุกๆ ความเห็นมากเลยค่ะ ^ ^

พบปัญหาการใช้งานกรุณาแจ้ง LINE ID @gotoknow
ClassStart
ระบบจัดการการเรียนการสอนผ่านอินเทอร์เน็ต
ทั้งเว็บทั้งแอปใช้งานฟรี
ClassStart Books
โครงการหนังสือจากคลาสสตาร์ท