Webmaster Another Blog

จากตอนที่แล้วผมได้เกริ่นถึงวิธีการทำธีม คร่าวๆ แล้วนะครับ (เกริ่นไปตรงไหนวะ??) คราวนี้เราจะมาลองปรับเปลี่ยนอะไรกันนิดๆหน่อยๆ เป็นแซมเปิล คนที่ advance แล้วอ่านตอนนี้ก็อย่าอารมณ์เสียนะครับ :D

ภาษาที่เราใช้ทำธีมเนี่ย หรือที่เรียกว่าภาษา css มีส่วนประกอบดังนี้

.name {
property : value;
...
}

เช่น

.red{
color:#FF0000;
font-weight:bold;
}

เมื่อเรียกใช้ก็เรียกใช้ได้โดยกำหนด class ในภาษา html เช่น

<div class="red">This message should be red and bold.</div>

เมื่อแสดงผลก็จะเป็น

This message should be red and bold.

สำหรับรายละเอียดต่างๆ เช่นว่าชื่อคุณสมบัติแต่ละตัวเรียกว่าอะไร และเราสามารถเซ็ตเป็นอะไรได้บ้าง จะกล่าวถึงโดยละเอียดในตอนหน้าครับ

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



ภาพนี้แสดงไม่หมดทุกส่วนนะครับ แสดงเฉพาะส่วนหลักๆ เท่านั้น

สมมติ ว่าเราทำภาพ header มา (ขนาด 780xความสูงที่ต้องการ) ต้องการจะเปลี่ยนให้ภาพเป็นภาพที่เราทำ แล้วเราใส่ชื่อของบลอคเรา ลงไปในภาพแล้ว และเราไม่ต้องการให้แสดงชื่อ หรือว่าวันที่ที่อัพเดทอีก (เพราะไม่สวย) ถ้าเป็นแบบนี้ บางคนอาจจะตั้งชื่อเป็นว่างๆ ซึ่งการทำแบบนี้ มีผลเสียมากเลยครับ เวลาเราติดแรงค์ จะทำให้ืชื่อเราไม่มีลิงค์ คลิกไม่ได้ (เพราะว่ามันเป็นว่างๆ ไปแล้ว ถึงทำลิงค์ คนอื่นก็ไม่เห็นอยู่ดี) เรามาศึกษากันดีกว่า ว่า จะแก้ปัญหานี้ยังไง

ตัวอย่างก็อย่างเช่น บลอคของผมนี่แหละครับ สังเกตข้างบนจะไม่มีชื่อบลอคอยู่ (ตัวอักษรที่เห็นเซฟมาเป็นภาพแล้ว) และก็ไม่มีวันที่ที่แก้ไขอยู่ด้วย ซึ่งสามารถทำได้โดย กำหนด title กับ lastwrite ให้ไม่แสดงครับ

ไปแก้ของเดิมให้เป็น

#title {
display:none;
}
#lastwrite{
display:none;
}

และใน #header เราก็เปลี่ยนให้เป็นภาพของเราที่เราเตรียมมาซะ โดยเปลี่ยนที่บรรทัด background-image และเซ็ตความสูงให้พอดีกับความสูง ของภาพที่เราเตรียมมา เช่น ภาพมีขนาด 780x160 เราก็จะต้องเซ็ตความสูง (height) เป็น 160 ด้วย ส่วนอื่นไม่ต้องไปยุ่งกับมัน

#header {
background-image: url(http://...url ที่เตรียมมา);
background-repeat: no-repeat;
width:780px;
height:160px;
text-align:left;
}

ซึ่งวิธีนี้สามารถใช้เลือกเปิด/ปิด ส่วนที่เราต้องการให้แสดง / ไม่แสดงได้ทุกส่วนเลยครับ เช่น เราไม่ต้องการให้แสดง header เราก็ไป display:none; ที่ header ไว้ เป็นต้น ซึ่งธีมที่จะทำในตอนที่แล้ว รู้สึกว่าต้องใช้วิธีการนี้ด้วย โปรดสังเกตว่า ถ้าเราปิด header , ตรง title และ lastwrite ซึ่งเป็นส่วนภายใน header ก็จะถูกปิด (ไม่แสดง) ไปด้วยโดยอัตโนมัติ



ถ้าอ่านไม่เข้าใจก็บอกนะครับ ตอนหน้าเราจะมาทำธีมที่เราพูดถึงไว้ในตอนที่ 1 กันจริงๆ ซะที