Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

สวัสดีค่ะ บลอคนี้เป็นตอนที่ 2 ของการใส่ลูกเล่นให้ช่อง comment นะคะ ซึ่งในตอนที่ 1 ได้อธิบายเกี่ยวกับการใส่ background ให้กับช่องใส่ comment สามารถดูได้ที่นี่ค่ะ Click

กรอบของช่องใส่ comment จาก default theme ของ exteen ส่วนใหญ่จะเป็นรูปสี่เหลี่ยม กรอบเป็นเส้นประ หรือเส้นทึบ แล้วแต่ theme ที่เลือก แต่วันนี้เราจะมาเดินออกนอกกรอบกันค่ะ :D

วิธีทำค่ะ

1. เตรียมรูป BG ที่จะนำมาทำเป็นกรอบก่อนนะคะ ซึ่งจะเป็นรูปใหญ่รูปเดียว ตัวอย่างรูปที่เจนเนสซ่าเตรียมไว้ ดังข้างล่างค่ะ

รูปขนาด 400 x 200 pixelsโดย Jennessa

.

2. นำรูปไปฝากไว้ที่เวบรับฝากไฟล์ เพื่อให้ได้ URL ของรูปมาก่อนนะคะ หรือจะเก็บไว้ที่ exteen ก็ได้ค่ะ ดูวิธีการ upload รูปขึ้น exteen ได้ที่นี่ค่ะ Click ตัวอย่าง URL ของรูป

http://jennessa.exteen.com/images/commentbg7.gif

.

3. ไปที่ แก้ไข CSS ด้วยตัวเอง แล้วหาคำว่า form ค่ะ จากนั้นให้ คอมเมนต์ส่วนที่เป็น border ออก หรือจะลบออกไปเลยก็ได้ค่ะ แต่คอมเมนต์ไว้ดีกว่า เผื่อเปลี่ยนใจกลับมาแก้นะคะ คอมเมนต์โดยใส่ /* */ ปิดหัวท้ายค่ะ ทำแบบนี้เพื่อเอากรอบเดิมของช่องใส่ comment ออกดังตัวอย่างข้างล่างค่ะ

form {
padding:6px 5px 2px 20px;
margin:10px;
/*border:1px dotted #CCCCCC;*/
/*border-left:10px solid #CCCCCC;*/
font:11px Tahoma,"MS Sans Serif";
background-image: url(http://jennessa.exteen.com/images/commentbg7.gif);
background-repeat: no-repeat;
width: 400px;
height: 200px;
}

มาดู attribute ที่เราจะเซตค่ากันค่ะ

• background-image: ใส่ URL ของรูป BG
• background-repeat: ใส่ no-repeat เพื่อให้พื้นหลังเป็นรูปใหญ่รูปเดียว
• width: ใส่ความกว้างของรูป BG หรือมากกว่า
• height: ใส่ความสูงของรูป BG หรือมากกว่า

ค่า width และ height ถ้าใส่น้อยกว่าความกว้างและสูงของรูป BG จะทำให้เวลาแสดงผลจะเห็นรูป BG ไม่เต็มรูปค่ะ ดังนั้น จึงควรใส่ให้เท่ากับหรือมากกว่า

.

4. ถ้าตัวอักษรอยู่ชิดกรอบมากเกินไป ให้ลองปรับค่าที่ padding: ดูค่ะ

เสร็จแล้วค่ะ เพียงแค่นี้ ช่องใส่ comment ก็สามารถมีกรอบได้หลากหลายแบบ ทีนี้ก็ขึ้นอยู่กับการออกแบบกรอบของแต่ละคนแล้วล่ะค่ะ เจนเนสซ่าไม่ค่อยมีหัวด้านดีไซน์เท่าไหร่ เลยไม่รู้จะแนะนำยังไง ตัวอย่างเลยทำได้แค่อันเดียวดังข้างล่างค่ะ (^ ^)"