แต่ง blog แก้ theme ด้วย CSS ฉบับมือใหม่#2
posted on 09 Oct 2009 22:56 by itbasicปรับขนาดหน้า page ให้ได้ดังใจ...ง่ายนิดเดียว
*เปลี่ยนธีมเป็นสีดำจ้า กด F5 ด้วยเน้อ
สวัสดีครับ จากบทที่ 1 เราจะรู้ลักษณะการแก้ไขโค้ดแล้ว แต่คงรู้กันดีว่า การแก้ไขเพียงแค่นั้นมีข้อจำกัดมาก ปรับแต่งได้นิดหน่อยเท่านั้น ดังนั้น บทที่ 2 เราจะมาพูดถึงโค้ดตัวอื่นๆ กัน
หากยังไม่มีพื้นฐานควรกลับไปอ่านบทที่1 นะครับ ฝึกแก้ไขโค้ดง่ายๆ เพียงบรรทัดเดียวก่อน
ข้อควรปฎิบัติสำหรับการศึกษาวิธีแก้ไขโค้ดแบบมือใหม่
อ่านไปด้วยทำตามไปด้วย โดยใช้ theme "apollo" (ยังไม่ต้องลองกับ theme จริง หัดทำให้เป็นก่อน)
=================
STEP 1
เปิด CSS Editor ขึ้นมาแล้วเลื่อนลงมาช้าๆ หา #page 
ซึ่งเราจะเจอโค้ดดังนี้
#page{
margin:auto;
padding-top:15px;
text-align:left;
width:780px;
}
ตอนนี้เรามาดูที่ตัว width:780px; กันก่อน
width:780px; นี่คือความกว้างของหน้า page เรา เอาล่ะมาปรับขนาดตามใจเรากันเลย โดยผมจะใช้ความกว้างที่ 1000px (เพื่อนๆ เลือกขนาดตามความพอใจได้เลย)พอดี จะแก้ได้เป็น
width:1000px;
Note:ปัจจุบันผู้ใช้อินเตอร์เนตใช้ขนาดความกว้างของหน้าจอเกิน 1024px แทบทั้งหมด โดยมีแค่ 3-4% โดยประมาณเท่านั้นที่ยังใช้ขนาด 800*600
เสร็จแล้วกด preview ดูผลจะเป็นเช่นนี้! (คลิ้กดูรูปใหญ่)
...ไม่มีอะไรเปลี่ยนเลยยยย แต่ไม่ต้องตกใจครับ เพราะที่เราแก้ไปคือ เราปรับให้ความกว้างของหน้า page มีค่า defualt เป็น 1000px นั่นเอง แต่ส่วนอื่นๆ เรายังไม่ได้ไปแตะ
ซึ่งหากจะแก้ขนาดจริงๆ ของโครงสร้างเวบล่ะก็ต้องแก้โค้ดในส่วนต่อไปครับ....
STEP 2
เลื่อนลงมาดูโค้ดส่วนถัดไปจะเจอโค้ดนี้
#header, #neck, #belly, #leg, #footer{
float:left;
width:780px;
}
นี่คือองค์ประกอบของ blog ที่เราต้องแก้ไขขนาดให้ตรงกัน ให้เราสังเกตตรงนี้นะครับ
#header, #neck, #belly, #leg, #footer จะเห็นว่าส่วนหัวนี่ถูกแบ่งออกเป็น 5 ส่วนโดยคั่นด้วยเครื่องหมาย , นั่นหมายความว่าหากเราแก้อะไรภายใน {..} นี้จะส่งผลไปถึง 5 ส่วนข้างต้นนั่นเอง
ดูใน {...} ให้ส่วน width นั้นจะมีขนาด 780px (เท่ากับส่วน #page ก่อนที่เราจะแก้ไขใน step 1) ดังนั้นเราต้องแก้ส่วนนี้ให้มีขนาด 1000px เท่ากัน
แต่เดี๋ยวก่อน! คราวนี้เราจะไม่ใส่เลข 1000px เข้าไปตรงๆ แต่จะเปลี่ยนเป็น width:100% แทน
ค่า % ที่เราใส่นี้จะคิดค่าความกว้าง defualt ที่เรากำหนดไว้ใน step 1 การที่เราใช้หน่วย % แทนการระบุเป็น px ตรงๆ จะทำให้เราปรับแก้ส่วนต่างๆ ได้ง่ายขึ้น
เมื่อแก้ไขแล้วจะเป็นแบบนี้
#header, #neck, #belly, #leg, #footer{
float:left;
width:100%;
}
note:ค่า % จะแปรเปลี่ยนไปตามค่าความกว้างที่เราใส่ไว้ใน #page
ลอง preview ดูอีกครั้ง (คลิ้กเพื่อดูภาพใหญ่)
เหมือนจะไม่มีอะไรเกิดขึ้น? แถม profile เราทะลุออกนอกกรอบอีก ? ไม่ต้องตกใจครับ นั่นเพราะ background ตอนนี้ยังใช้ขนาดเดิมอยู่นั่นเอง
*หากใครไม่เห็นแถบโปรไฟล์ด้านขวาเหมือนในรูป ให้หาโค้ดนี้ใน CSS Editor แล้วลบทิ้ง หรือ แก้ไข
sidebar2{
display:none;
}
ลบทิ้งหรือแก้ไขเป็น(ตัวผมเลือกแก้ไข)
sidebar{
display:none;
}
*display:none คือโค้ดที่ทำให้ส่วนนั้นไม่แสดงผลออกมา sidebar2 คือแถบบาร์ด้านขวา , sidebar คือแถบบาร์ด้านซ้าย
STEP 3
เพื่อให้เห็นภาพชัดเจนขึ้นเราต้องปรับ background ให้เหมาะสมกับขนาด โดยจะใช้รูป หรือ สีก็ได้
เลื่อนลงมาหน่อยจะเจอโค้ดในส่วนของ header ซึ่งคือ 1 ใน 5 ส่วนที่เราปรับขนาดไปใน step 2
#header{
background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;
padding:32px 0px 0px 25px;
}
ยังจำวิธีแก้ไข bg จากบทที่ 1 ได้มั้ยครับ? ถ้าจำไม่ได้กลับไปอ่านบทที่ 1 ด่วน
ผมเตรียมรูปขนาด กว้าง 1000px(พอดีหน้า page) สูง 400 px ไว้ทำ header 
เมื่อใส่โค้ดเข้าไปแบบนี้
#header{
background:url(http://www.pocketonline.net/g2engine/d/32110-1/heading.jpg) ;
padding:32px 0px 0px 25px;
}
แต่พอกด preview ดูแล้ว... (คลิ้กเพื่อดูภาพใหญ่)
สังเกตดูจะเห็นว่าขอบซ้ายของรูปมีการ repeat (ทำซ้ำ) รูป bg ขึ้นมาอีกนิดหน่อย ทั้งๆ ที่เราใช้ภาพขนาด 1000px พอดีกับความกว้างที่เรากำหนดไว้พอดี?
*จากบทที่ 1 จำได้ไหมว่าหากไม่ใส่ค่ากำกับการ repeat รูปของ bg ไว้ ค่า defualt จะทำให้รูป repeat อัตโนมัติ
กรณีนี้เกิดขึ้นจาก รูปมีขนาดหน้าเล็กกว่าความกว้างของ #header ครับ ซึ่งเรากำกับความกว้างไว้ที่ 100%(1000px) ก็จริงแต่มีค่าอื่นมาทำให้ความกว้างของ header เพิ่มขึ้นครับ นั่นคือ....padding นั่นเอง
STEP 4
ค่า padding ของ #header อยู่ในบรรทัดนี้
padding:32px 0px 0px 25px;
อืม..มือใหม่งงแน่ๆ ครับ งั้นมาทำความเข้าใจกันก่อนว่า padding คืออะไร
padding คือระยะห่างจากขอบมาถึงองค์ประกอบภายในเนื้อหา หรือ คิดง่ายๆ คือการทำย่อหน้านั่นแหล่ะ
โดยย่อหน้าจะมี 4 ทิศ ซึ่งเราสามารถกำหนดระยะห่างจากขอบได้ตามใจ
โดยใส่ค่าดังนี้ padding: บน ขวา ล่าง ซ้าย;
ลองศึกษาจากรูปตัวอย่างนะครับ (คลิ้กเพื่อดูภาพใหญ่)
น่าจะพอเข้าใจแล้วนะครับใครยังงงๆ ลองแก้ค่า padding ของตัวเองดูแล้วกด preview ได้เลยจ้า
STEP 5
ด้วย padding เป็นส่วนทำให้หน้าเวบเราสวยงาม ดูเรียบร้อยดังนั้นเราจะไม่ถอดค่านี้ออก
แต่ค่า padding จะมารวมกับค่า width(ความกว้าง) ที่เรากำหนดไว้ทำให้ค่าความกว้างขยายเพิ่มขึ้นจากเดิมที่เราตั้งไว้
เราเลยต้องปรับไม่ให้ความกว้างของ #header เกิน 1000px ครับ โดยเราจะต้องหักค่า width ออกตามค่า padding ในด้านซ้าย และ ด้านขวา
เช่นกรณีของเราค่า padding คือ padding:32px 0px 0px 25px; นั่นก็คือต้องหักค่า width ออกไป 25px
ดังนั้นเราจะใส่ค่า width ลงใน #header ดังนี้
#header{
background:url(http://www.pocketonline.net/g2engine/d/32110-1/heading.jpg) ;
padding:32px 0px 0px 25px;
width:975px;
}
เมื่อแก้ตามนี้รูป header จะพอดีกับความกว้างเป้ะๆ กด preview ดูได้เลย
note:โปรแกรมจะอ่านค่าจากบนลงล่าง ดังนั้นถึงแม้เราจะมีค่า width ค่าแรกของ header ไว้ที่ 100% แล้ว แต่โปรแกรมจะแสดงผลค่า width ที่ 975px ตามค่าสุดท้ายที่อ่านเจอ
STEP 6
ความกว้างได้ที่แล้ว ...แต่จะเห็นว่าเราใส่รูป header ความสูง 400px แต่แสดงผลออกมาไม่ถึง 400px
นั่นก็เพราะเราไม่ได้กำกับความสูงของ #header ไว้ครับ ซึ่งหากไม่กำกับระบบจะทำให้ความสูงเป็นค่า auto (ปรับให้เหมาะสมตาม browser ที่ใช้)
แต่หากเราอยากได้ความสูง 400px พอดีล่ะก็เราต้องเติมคำสั่ง height กำกับความสูงเข้าไป
*อย่าลืม! หักค่า padding ในด้านบนและล่างออกด้วย!
ค่าที่จะใส่เข้าไปคือ height:368px; (หักค่า padding ออก 32px) เมื่อใส่ไปแล้วจะเป็นเช่นนี้
#header{
background:url(http://www.pocketonline.net/g2engine/d/32110-1/heading.jpg) ;
padding:32px 0px 0px 25px;
width:975px;
height:368px;
}
กด preview ดูจะเห็นว่าความสูงของ header เป็น 400px แล้ว (คลิ้กดูภาพใหญ่)
STEP 7
คราวนี้มาดูส่วน neck กันนะครับ 
เลื่อนลงมาด้านล่างอีกหน่อยที่โค้ดนี้
#neck{
background:url(http://g.exteen.com/t/apollo/belly.png) top left;
}
ที่ส่วน neck ดูขาดๆ เกินๆ นั่นเพราะรูป bg ขนาดไม่ถึง 1000px ครับ ดังนั้นเราต้องหารูปใหม่ หรือ หา bg ใหม่ โดยผมจะใช้ bg เป็นสีขาวจึงเปลี่ยนโค้ดเป็นเช่นนี้
#neck{
background:#fff;
}
กด preview ดูส่วน neck จะเต็ม 1000px พอดี (ใครไม่เข้าใจเรื่องการแก้ bg กลับไปอ่าน #1 ด่วน!)
STEP 8
คราวนี้เลื่อนลงมาหาส่วนของ #belly นะครับ
belly เป็นส่วนเนื้อหาใหญ่กินพื้นที่แทบทั้งหน้า รวมส่วน comment ด้วย โดยโค้ดปกติจะมีแค่ bg เท่านั้นครับ แบบนี้
#belly{
background:url(http://g.exteen.com/t/apollo/belly.png) repeat-y;
}
เนื่องจากเราปรับความกว้างไปตั้งแต่ step 2 เราก็แค่เลือก bg ที่ให้เหมาะสมกับความต้องการมาใส่แทน ซึ่งผมจะเลือกใช้สีขาว(#fff)นะครับเมื่อใส่โค้ดแล้วจะออกมาเป็นแบบนี้
คราวนี้เราจะปรับส่วนของเนื้อหา entry กันโดยเราต้องเปลี่ยน bg โดยเลื่อนลงมาอีกหน่อยหาส่วน .entry นะครับ จะเจอโค้ดดังนี้
.entry{
float:left;
margin-bottom:15px;
}
ผมได้เตรียมรูปความกว้าง 800px ความสูง 319px (800 X 319) ไว้แล้ว 
และเราก็จะใช้ความรู้จากบทที่ 1 เติมคำสั่ง background เข้าไปก็จะได้ออกมาเป็นแบบนี้นะครับ(คลิ้กเพื่อดูภาพใหญ่)
STEP 9
จะเห็นว่าส่วนของ entry นั้นพื้นที่แคบมาก เราต้องขยายพื้นที่ตรงนี้ออกไปให้เหมาะสม โดยก่อนอื่นต้องแก้ส่วนของ #content ก่อนจากโค้ดนี้
#content{
display:inline;
float:left;
margin:10px 15px 0px 25px;
width:490px;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}
ดูในบรรทัดความกว้าง width:490px; ซึ่งเราสามารถปรับเป็นได้ทั้งแบบ px และ % ในที่นี้ผมเลือก % นะครับเพราะง่ายและไม่ต้องคำนวณเอง
เราต้องลองใส่ค่า width ให้เหมาะสม ไม่ให้มากเกินไปเดี๋ยวไปดันส่วนของ sidebar ด้านข้างตกไป ผมทดลองหลายครั้งจึงลงตัวที่ 70% ดังรูป
#content{
display:inline;
float:left;
margin:10px 15px 0px 25px;
width:70%;
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}
STEP 10
ยังมีส่วนอื่นๆ ที่ต้องเปลี่ยน bg เพื่อให้พอดีกับหน้า page นั่นคือ #leg กับ #footer มองหาล่างๆ เลยครับ เราปรับความกว้างไว้แล้วตั้งแต่ step 2 ซึ่งผมก็เลือก bg เป็นสีขาวเช่นกันทำให้เปลี่ยนออกมาเป็นแบบนี้
#leg{
background:#fff;
}
ส่วนของ footer
#footer{
background:#fff;
height:60px;
}
เท่านี้การขยายหน้า page ของเราก็สำเร็จลงแล้วครับ ที่เหลือก็คือตกแต่งให้สวยงามเท่านั้น (คลิ้กเพื่อดูภาพใหญ่)
STEP 11
นอกจากค่า padding ที่ส่งผลต่อความกว้างและสูงแล้ว ยังมีอีกค่าหนึ่งในลักษณะคล้ายๆ กันนั่นคือ ค่า margin ดังนั้นเราจะมาเรียนรู้ค่านี้กันโดยไปดูในส่วนของ #neck .module 
#neck .module{
background:#F5F5F5;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}
จะเห็นว่าค่า margin มีโครงสร้างเหมือนกับ padding เลยนั่นคือ margin: บน ขวา ล่าง ซ้าย;
margin จะมีโครงสร้างโค้ดเหมือน padding และจะบวกเพิ่มความสูงหรือความกว้างเหมือน padding แต่ลักษณะการทำงานของ margin จะต่างกันนิดหน่อย
จะเห็นว่าค่า margin คือระยะของจากขอบไปสู่ภายนอก ใช้เพื่อทำให้ส่วนต่างๆ ของบล็อกไม่ติดกัน ลองดูตัวอย่างดังนี้ (คลิ้กดูภาพใหญ่)
ดังนั้นหากเราจะปรับขนาดความกว้างของส่วนนี้เราต้องคำนวณส่วน margin เข้าๆไปด้วย ซึ่งผมต้องการให้มีการเว้นขอบจากขอบทั้งสองข้าง ข้างละ 25px ก็จะต้องเปลียน margin เป็นดังนี้
margin:0px 25px 0px 25px;
จากนั้นความกว้างของ page อยู่ที่ 1000px หักออกไป 50 px ก็จะได้โค้ดทั้งหมดดังนี้
#neck .module{
background:#F5F5F5;
display:inline;
float:left;
margin:0px 25px 0px 25px;
padding:2px 0px 5px 0px;
width:950px;
}
กด preview ดูจะเห็นว่าส่วนนี้ลงตัวแล้ว
------------------
การปรับขนาดทำได้หลากหลาย แต่จะส่งผลต่อหน้า page ทั้งระบบดังนั้นเราต้องทำเป็นขั้นเป็นตอนจะได้ไม่ลืมนะครับ ยังมีหลายส่วนที่เราสามารถปรับได้ เช่น ส่วนของ comment หรือ ขนาดของ sidebar ซึ่งหากเราปรับแล้วก็ต้องดูว่ามันไปกระทบส่วนไหนบ้าง ก็มาแก้ให้สมดุลกัน ไม่ยากครับ
ตอนนี้เรามีพื้นฐานส่วนใหญ่แล้ว ดังนั้นใน entry ต่อไปมาดูกันว่าเราจะใช้พื้นฐานตรงนี้ทำอะไรได้บ้าง
===========================
entry ที่ 2 เสร็จอย่างทุลักทุเล =..= เนื้อหาจะค่อนข้างไปช้าเพราะเน้นไปที่มือใหม่นะครับ
ส่วน theme ของ blog ตัวเองก็ค่อยๆ ทำไปพร้อมกัน ไม่รู้จะเสร็จเมื่อไหร่ =..=
หากมีข้อสงสัยหรือสอบถามอะไรก็เมนท์ถามได้เลยจะ ems ตอบให้จ้า
เจอกันใหม่ entry หน้า ^ ^
สาระอ้ะ
สาระดี มีประโยชน์
/โยนดาว
#1 By ♦[oka]♦ on 2009-10-12 19:49