<IT> Basic

Step 2

โค้ดที่เราจะแก้นี้เป็น background ของตัว body ซึ่งก็คือพื้นหลังทั้งหมดของหน้าบล็อกเรานั่นเอง

ก่อนอื่นเรามาแยกส่วนโค้ดของ background ก่อนว่ามีอะไรบ้าง โดยดูง่ายๆ หากมีการเว้นบรรทัดนั่นคือคนละส่วนกันแล้ว ดังนี้

#c7e1e9 url(http://g.exteen.com/t/apollo/bck.gif) repeat-x top left;

1. สี :#c7e1e9 หมายถึงสีพื้นหลังของ bg ในที่นี้ใส่เป็นโค้ดสี (HEX)
2. รูป : url(http.......) รูปที่เราใช้เป็น bg จะอยู่เหนือส่วน "สี" เสมอ
3. repeat : repeat-x ถ้ารูปที่เอาลงมันเล็กกว่าจอคำสั่ง repeat จะสร้างรูปต่อๆ กันให้เต็มจอ
4. ระบุตำแหน่ง : top left ระบุว่าจะให้รูปที่ใส่มาอยู่ตรงไหน
5. ยังมีอีกตัวที่ไม่ได้แสดงในบรรทัดนี้คือส่วน attachment ซึ่งอีกเดี๋ยวจะกล่าวถึง

Step 3

เริ่มต้นเราจะแก้ "สี" ก่อนโดยให้เราลบโค้ดเฉพาะบรรทัดของ background ออกให้เหลือแค่นี้

background:

เมื่อลองกด preview ดูจะเห็นเป็นดังนี้

อืม...พื้นหลังขาวโล่งกันไปเลยทีเดียว ทีนี้เราต้องใส่โค้ดสี(HEX) ลงไปเพื่อระบุสี โดยอาจหาได้จาก photoshop หรือ โปรแกรมวาดรูปอื่นๆ แต่ถ้าไม่มีที่ไปสามารถหาโค้ดต่างๆ ได้จากที่นี่ http://www.drpeterjones.com/colorcalc/

เมื่อได้โค้ดสีแล้วก็ใส่ลงไปได้เลย ตรงนี้ผมเลือก #5f9ea0  เราก็ใส่เข้าไปแบบนี้

body {

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

Step 4 

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

ใส่ลิ้งของรูปลงไปในโค้ดจะได้ออกมาแบบนี้

อย่าลืมว่าต้องเว้นวรรคระหว่างคำสั่งแรก กับคำสั่งที่สองด้วยนะ!

จะเห็นว่ารูปวอลเลย์บอลของเราจากรูปเดียวกระจายออกมาเต็มหน้าจอเลย  นั่นก็เพราะคำสั่ง "repeat" นั่นเอง

ซึ่งถึงแม้เราจะไม่ได้ใส่คำสั่ง repeat ไว้ ค่าพื้นฐาน(defualt) ของมันจะบังคับให้ repeat อัตโนมัติครับ ดังนั้นถ้าเราอยากให้มีรูปเดียวโดดๆ เราต้องใช้คำสั่ง no-repeat

Step 5 

ค่า repeat ที่ใช้กันก็จะมีดังนี้(เลือกใช้แค่ 1 ตัว)

• repeat : คำสั่งสร้างรูป bg(background) ต่อๆ กันให้เต็มหน้าจอ หากไม่ใส่ค่าใดๆ  bg จะใช้ค่านี้
• no-repeat : คำสั่งไม่ต้องใช้ repeat
• repeat-x : สร้างรูปต่อๆ กันเฉพาะในแนวนอน
• repeat-y : สร้างรูปต่อๆ กันเฉพาะในแนวตั้ง

อีกครั้ง อย่าลืมเว้นวรรคระหว่างคำสั่ง!  ใส่โค้ดลงไปให้เรียบร้อย

ถ้าใช้ no-repeat รูปจะออกมาโดดๆ แบบที่เห็นครับ

ตัวอย่างการใช้แบบอื่นๆ (คลิ้กที่รูปเพื่อดูภาพใหญ่)

Step 6

ตอนนี้ผมใช้ no-repeat ทำให้รูป bg เป็นรูปโดดๆ อยู่แต่จะเห็นว่ารูปจะอยู่ในตำแหน่ง มุมซ้ายบน หรือ แกน x = 0,แกน y = 0 นั่นเอง (เป็นค่า defualt)

เราสามารถกำหนดตำแหน่งได้หลายแบบ โดยจากโค้ดแรกที่เรามีจะเห็นว่าเขาใช้ top left ซึ่งก็คือตำแหน่ง บน+ซ้าย นั่นเอง

คำสั่งกำหนดตำแหน่งแบบนี้เราต้องใช้สองตัว คือกำหนดแกน x (แนวนอน)และ กำหนดแกน y (แนวตั้ง)

คำสั่งกำหนดแกน x มี left,center,right (เลือกอันใดอันหนึ่ง)

คำสั่งกำหนดแกน y มี top,center,bottom (เลือกอันใดอันหนึ่ง ใช้ center ซ้ำกันได้)

เวลาใช้จะเขียนพร้อมกันสองตัวแบบนี้ 

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

*หากใช้คำสั่งกำหนดตำแหน่งแค่ตัวเดียว อีกตัวจะกลายเป็น center โดยอัตโนมัติทันที

ตัวอย่างการใช้คำสั่งกำหนดตำแหน่ง

===============

ในการกำหนดดังกล่าวจะเห็นว่าตำแหน่งของรูปนั้นตายตัวมากๆ ซ้ายสุด ขวาสุดตลอด

บางคนอาจจะอยากให้ขยับมาทางซ้ายนิดๆ ตรงกลางหน่อยๆ ซึ่งก็ทำได้โดยใช้คำสั่งรูปแบบนี้

x% y%

คำสั่งนี้เราจะแทนค่า x(แนวนอน) และ y (แนวตั้ง)ด้วยตัวเลข 0 ถึง 100  เพื่อกำหนดตำแหน่ง

ในแกน x ซ้ายสุดคือ  0%, ขวาสุดคือ 100%

ในแกน y บนสุดคือ 0%,ล่างสุดคือ 100%

ผมเลือกแกน x 10%,แกน y 60% เมื่อเขียนออกมาจะได้แบบนี้

อย่าลืมเว้นวรรคระหว่างคำสั่งด้วย!   จะเห็นว่ารูปจะอยู่ในตำแหน่งที่เรากำหนดแล้ว

*หากเขียนเพียงค่าเดียว ค่านั้นจะเป็นค่า x และค่า y จะถูกกำหนดให้เป็น 50%

Step 7 

เคยเกริ่นไว้ใน step  2 แล้วว่ายังมีเหลืออีกหนึ่งคำสั่งที่ซ่อนอยู่นั่นก็คือคำสั่งกำหนดค่า attachment ซึ่งมีอยู่สองตัวคือ scroll และ fixed

• scroll : แสดงรูป bg เป็นปกติ (เป็นค่า default ถ้าไม่ใส่อะไรจะถูกกำหนดเป็นค่านี้)
• fixed : เมื่อเราเลื่อนหน้าเว็บเพจไปมา รูป bg จะวิ่งตามและอยู่ในตำแหน่งเดิมเสมอ

ค่า fixed ใช้เมื่อหน้าเว็บเพจเรายาว แล้วเราอยากให้รูป bg ของเราตามหลอนเพื่อนๆ ไปตลอด ไม่ว่าจะเลื่อนไปไหน ตัวอย่างการใช้ก็เป็นแบบนี้

คำสั่งนี้ไม่มีรูปตัวอย่างนะครับ ลองทำเองดูได้เลย ถ้าหน้าเพจยาวๆ จะเห็นชัดเจนมาก

Step 8 

มาถึงตรงนี้เราสามารถแก้ไข background ของส่วน body  ได้หมดแล้ว แต่ส่วนอื่นๆ ก็มี background เหมือนกันซึ่งเราก็ใช้คำสั่งเดียวกันนี่แหล่ะในการแก้ไข โดยที่ผมแนะนำให้เข้าไปแก้ไขมีดังนี้

*กดคลิ้กเข้าไปที่ลิงค์ส่วนพื้นที่สีแดงในรูปคือ ส่วนที่จะเปลี่ยนแปลงเมื่อเราเปลี่ยน background

• body
• #coverimage
• #neck .module  
• .entry
• .entry .title
• .entry .title h2
• .entry .title span
• .entry .post
• #sidebar, #sidebar2
• #sidebar #recommend h2, #sidebar2 #recommend h2
• ##sidebar #previous h2,#sidebar2 #previous h2
• ##sidebar #commentalert h2,#sidebar2 #commentalert h2
• ##sidebar #favourites h2,#sidebar2 #favourites h2
• ##sidebar #links h2,#sidebar2 #links h2
• ##sidebar #categories h2,#sidebar2 #categories h2
• ##sidebar #archives h2,#sidebar2 #archives h2
• ##sidebar #tags h2,#sidebar2 #tags h2
• ##sidebar #pagemenu h2,#sidebar2 #pagemenu h2
• #profile
• #profile span
• #profile .info 
• #commentform
• #commentform h3
• #commentform .formrow
• #commentform textarea
• .comment
• .comment .post
• .comment .info
• #footer p

นี่ล่ะครับ เพียงแค่แก้ไขคุณสมบัติ background เพียงแค่บรรทัดเดียว เราก็สามารถแต่งเพิ่มเติมสีได้ทั้งหน้าเลยครับ 

แต่ถ้าใครงงว่าแก้อย่างไรให้ดูตัวอย่างนะครับ

ตัวอย่างที่ 1. แก้ไขโลโก้ blog ที่ #coverimage

ให้เราเลื่อนโค้ดลงมาล่างๆ มองหา #coverimage  เมื่อเจอแล้วจะเจอโค้ดดังนี้

เราจะเห็นว่าจะมีส่วนของ background อยู่ด้วย ซึ่งผมต้องการเปลี่ยนแค่หัว logo ก็แค่ทำการเปลี่ยนลิงค์เป็น logo ที่เตรียมไว้ก็เรียบร้อยดังนี้

ผลที่ได้ (คลิ้กดูภาพใหญ่)

ตัวอย่างที่ 2 ใส่ background ในช่อง comment

หากอยากใส่รูปลงไปในช่องกรอกคอมเมนท์ เมื่อมองหาดูว่าช่องนั้นอยู่ส่วนไหน ก็จะพบว่าอยู่ในส่วน #commentform textarea เมื่อรู้ตำแหน่งแล้วก็เข้าไปดูโค้ดจะเจอโค้ดดังนี้

จะเห็นว่าไม่มีส่วนของ background อยู่ ไม่ต้องตกใจครับ ถ้าไม่มีเราก็เขียนเพิ่มได้ แต่ให้ดูตรงส่วนของโค้ดนะครับ จะเห็นว่า textarea ของเราถูกกำกับขนาดไว้อยู่คือ width(ความกว้าง) height(ความสูง)

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

เห็นมั้ยครับเขียนเพิ่มเติมลงไปไม่ยากเลย  แค่นี้ก็วางรูปในช่อง comment ได้แล้ว แต่ถ้ากลัวเพื่อนๆ ลายตาก็ลดความทึบ(opacity)ของรูปด้วย photoshop ก่อนเอามาใช้ก็ได้

 เอาล่ะครับ บทที่ 1 เรื่องการแก้ไข background ก็จบลงแล้ว หวังว่าพอจะช่วยเพื่อนๆ ได้บ้างนะครับ

====================================

ตั้งใจว่าจะเขียนบล็อกมาตั้งนานนมแล้ว ในที่สุดก็ได้ฤกษ์เปิดตัว

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

...แต่มันก็ต้องมีสิน่าคนอยากแต่งบล็อก พอมาเห็น code  css แล้วเกิดอาการวิงเวียนคล้ายจะเป็นลมทันที!  ดังนั้นผมเลยพยายามร่ายพื้นฐานง่ายๆ ก่อน ให้คนที่ไม่รู้จริงๆ  ซึ่งไม่รู้ว่ายิ่งจะทำให้งงมากกว่าเดิมหรือเปล่า

ไว้เจอกัน entry หน้าครับพี่น้อง มัวแต่เขียนวิธีแก้ theme ลืมแต่ง theme ตัวเองเลย =..=

ป.ล. ขอขอบคุณผู้ที่หลงเข้ามาเมนท์ในบล็อกตอนผมทดสอบ css อยู่นะครับ อิอิ

*ถ้ามีอะไรแนะนำติ-ชมได้ตามสบายเลยนะครับ ไม่ต้องกั้ก