Welcome to Blog ห้องสมุดความรู้ หากท่านถูกใจ ฝากกดแชร์( Like) (G+) (Tweet) ด้วยนะครับ เพื่อเป็นกำลังใจให้ทีมงานและผู้จัด ขอบคุณทุกท่านที่เข้ามาเยี่ยมชม ขอให้ทุกท่านมีสุขภาพแข็งแรง เฮงๆรวยๆ #4289
แสดงบทความที่มีป้ายกำกับ หน้า แสดงบทความทั้งหมด
แสดงบทความที่มีป้ายกำกับ หน้า แสดงบทความทั้งหมด

ปรับขนาดหน้า page Blog ได้ง่ายๆ


ปรับขนาดหน้า 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 นั่นเอง แต่ส่วนอื่นๆ เรายังไม่ได้ไปแตะ
ซึ่งหากจะแก้ขนาดจริงๆ ของโครงสร้างเวบล่ะก็ต้องแก้โค้ดในส่วนต่อไปครับ....