๏ palermos cafe ๏

เกิดอยากเขียนเอนทรี่สอนแต่งบล็อกขึ้นมา ผมก็คิดว่าสอนตรงนี้อาจจะมีประโยชน์ต่อบล็อกเกอร์หลายๆท่านนะครับ ที่ผมจะสอนคือการกำหนดสีข้อความ ทั้งในส่วนลิงค์ และข้อความธรรมดา อ่อ มันไม่ใช่เทคนิคพิศดารอะไรหรอก ก็แค่พิมพ์ลงไปใหม่ ลองดูเลยแล้วกันครับ เอนทรี่นี้เหมาะสำหรับพวกมือไม้อยุ่ไม่สุข

บล็อกตัวอย่าง เหมือนเดิม คือ บล็อกของน้องวา น้องเขาวาดรูปเก่งนะ ชอบแอบเข้าไปดู ผมจะออกแบบหน้าบล็อกให้มีพื้นสีดำ แน่นอนครับว่าตัวหนังสือจะต้องตัดกับสีพื้นหลัง มีวิธีในการกำหนดสีตัวอักษรโดยที่เราไม่ต้องเข้าไปแก้ในทุกๆเอนทรี นั่นคือการกำหนดสีฟอนท์จาก css

นี่เป็นไฟล์รูปที่ใช้ประกอบการแต่งบล็อกนะครับ จะมี 3ไฟล์ คล้ายๆธีม Apollo ที่ทาง exteen ให้มา

ของ exteen จะสีขาว แต่เพื่อความแนว เราทำสีดำ..

1. blackhead ไม่ใช่ชื่อวงดนตรีแต่ผมตั้งชื่อให้มันรู้ไปเลยว่าใส่ตรง #head

#header{
background:url()

2. blackbelly ใส่ตรง #neck, #bellyและ#leg

#neck{
background:url()

#belly{
background:url()

#leg{
background:url()

ที่ belly ต้องมีขนาดยาว 9000+px เพราะว่ามันคือการแก้ไขเหตุการณ์เฉพาะหน้าครับ เนื่องจาก ie6 มันห่วยจัด มันจะไม่ยอม repeat-y พื้นหลังไฟล์รูปภาพสกุล png แบบ24บิท ดังนั้นเลยต้องทำเผื่อไว้ ie6ด้วย ซึ่งถ้าทุกคนหันมาใช้เวบบราวเซอร์ที่ไม่ใช่ ie6 อย่างเช่น firefox opera ie7 คนทำเวบจะแฮปปี้มากเลยครับ เพราะไม่ต้องโกงอะไรมากมาย และจะแสดงแสงเงาของรูปภาพได้ถูกต้องด้วย

3. blackfooter ใส่ตรง #footer

#footer{
background:url()

ถ้าใช้ธีมนี้ท่านต้องปรับmargin ตรงfooter เป็น

#footer{

margin:40px 25px 0px 25px;
}

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

เราสามารถกำหนดสีตัวอักษรได้ดั่งใจนึกครับ ก่อนอื่นจะสอนตรงนี้ ยกตัวอย่างของการแต่งสีตัวอักษรตรง #neck

ในส่วนนี้หลายๆบล็อกอาจจะใช้สีที่ตัดกับพื้นหลังเดิมโดยสิ้นเชิงเช่น พื้นหลังขาว และ neck ใส่สีดำลงไป แน่นอนว่า ถ้าเราไม่ได้กำหนดค่า properties เฉพาะลงไป มันก็จะไปใช้ค่า

a:link, a:visited{
color:#;
text-decoration:none;
}

a:hover, a:active{
color:#;
}

แต่เรามีวิธีทำให้บล็อกมีสีตัวอักษรดั่งใจได้ อธิบายรอบเดียวนะไม่ยาก

ในส่วนของ #neck คลาสที่มีผลต่อสีฟอนท์ คือ บรรทัดนี้

#neck .module ul{

}

 

และตรงนั้นมันเป็นลิงค์ใช่ไหมครับ การเขียน css เพื่อบังคับลิงค์ืำได้หลายแบบ แต่ผมจะชอบที่เขียนใน2รูปแบบคือ

แบบแรก ง่ายหน่อย

a ที่พิมพ์เพิ่งลงไป คือ ลิงค์

#neck .module ul a{

color:#ใส่ค่าสี;

}

a:hover ที่พิมพ์เพิ่มลงไปมีความหมายว่า เรากำหนดสีของตัวอักษรขณะเอาเมาส์ไปวางบนข้อความ

และอีกชุดนึงคือ

#neck .module ul a:hover{

color:#ใส่ค่าสี;

}

ภายในกรอบปีกกา เราสามารถเพิ่ม properties ต่างๆลงไปได้ เช่น border-bottom(ขีดเส้นใต้ข้อความ), font-weight: strong; ทำให้เป็นตัวเข้ม

ตัวอย่างนะครับ

#neck .module ul{
display:inline;

margin:0px;

padding: 0px;

font-size:11px;

}

#neck .module ul a{

color:#f00;

}

#neck .module ul a:hover{

color:#fff;

}

จากในกรอบข้างบน เราจะได้ตัวอักษรลิงค์บนแถบ #neck ที่มีสีแดง เมื่อเอาเมาส์ไปวางจะได้ตัวอักษรสีขาว ไม่ยากนะ

และแบบที่สองละเอียดขึ้นมาอีกนิด

a:link คือสีตัวอักษรลิงค์

a:visted คือ สีตัวอักษรลิงค์ที่เราเคยอ่านหน้านั้นมาแล้ว

#neck .module ul a:link, a:visited{

color:#ใส่ค่าสี;

}

a:hover คือสีตัวอักษรลิงค์ขณะเอาเมาส์วางบนข้อความ

a:active คือ สีตัวอักษรลิงค์ขณะกำลังกดเมาส์

#neck .module ul a:hover, a:active{

color:#ใส่ค่าสี;

}

ตัวอย่างโค้ดนะครับ

#neck .module ul{
display:inline;

margin:0px;

padding: 0px;

font-size:11px;

}

#neck .module ul a:link, a:visited{

color:#f00;

}

#neck .module ul a:hover, a:active{

color:#fff;

border-bottom:1px dashed #fff;

}

คำอธิบายโค้ดข้างบน เราจะได้สีตัวอักษรลิงค์บน #neck ที่มีสีลิงค์ สีแดง แล้วเมื่อเราเอาเมาส์ไปวางบนข้อความลิงค์จะได้ตัวอักษรสีขาว และเส้นใต้แบบประสีขาวด้วยครับ

ไม่ยากนะ

ในส่วนอื่นๆ เราก้สามารถกำหนดสีเพิ่มเติมได้เช่นกันครับ เช่น ตรง sidebar

#sidebar .module ul, #sidebar2 .module ul {

}

รูปแบบเดียวกัน คือ พิมพ์เพิ่มตามตัวอย่างข้างบย เพิ่ม selector aเข้าไปเท่านั้นเอง

ตรง leg

#leg .module ul{

}

ตรงfooter

#footer p{

}

ในส่วนของcommetarea เป็นส่วนที่ผมชอบมาก แต่งได้เยอะ

.comment .info{

}

ตรง profile ก็ปรับได้

#profile{

}

นอกจากนั้นเราสามารถกำหนดสีฟอนท์ตรง #content ได้เหมือนกันก็พิมพ์ color:#fff; ลงไปในบรรทัดต่อมาในคลาสเดียวกันกับของเก่า

ต้องพิมพ์เพิ่มเข้าไปนะครับ ไม่ใช่ทับของเก่าไม่งั้นบล็อกเอ๋อนะ ไปแระฟี้วว

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

สุดท้ายขอให้แมวจงสถิตอยู่กับคุณๆผู้ที่เข้ามาอ่านบล็อกนี้

May the cat be with you