Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ลำดับตอนที่ #43 : [my.id] เปลี่ยนกรอบคำพูด

เจ้ากรอบคำพูดที่ว่าก็คือตรงส่วนนี้นะคะ...

 

ก่อนอื่นต้องมีไฟล์ภาพ 2 -3 ไฟล์ด้วยกันนะคะ ได้แก่
ภาพส่วนหัวกรอบคำพูด -- bubble_head,
ภาพส่วนตัวกรอบคำพูด (หรือจะเปลี่ยนสีไปเลยก็ได้) -- bubble_body,
และ ภาพส่วนท้ายกรอบคำพูด -- bubble_foot

ภาพตัวอย่าง...

bubble_head



bubble_body




bubble_foot

 

ความกว้างเป็น 150px ดีที่สุด ส่วนความสูงแล้วแต่เลยค่ะ

เป็นไฟล์ภาพ gif จะที่ดีสุด อย่าลืมตั้งให้ transparent ด้วยนะคะ

ภาพส่วน body สั้นหน่อยก็ได้ ไม่ต้องกลัวว่าภาพจะสั้นไป เพราะมันจะต่อให้เอง

ได้ภาพที่ต้องการเรียบร้อยแล้วก็อัพภาพขึ้นไป จากนั้นก็ใส่โค้ดตามนี้ได้เลย

<style type="text/css">
.bubblebg{
    background-image: url(http://ที่อยู่ส่วน body);
}
.bubble1, .bubble2, .bubblebg{
    width: 150px;
}
.bubble1{
    height: 27px;
    background-image: url(http://ที่อยู่ส่วน head);
}
.bubble2{
    height: 27px;
    background-image: url(http://ที่อยู่ส่วน foot);
}
</style>

แก้ height เป็นความสูงของภาพส่วน head และ foot ตามลำดับนะคะ

เท่านี้ก็เรียบร้อย ดูผลลัพธ์ได้เลย

ถ้าออกมาแล้วยังไม่พอใจ ก็ลองแก้ภาพดูนะ

ตัวอย่างดูได้ที่ my.id ของเคจ เลยค่ะ



ถ้าใครให้เปลี่ยนสีส่วน body เอา ก็ใช้โค้ดนี้แทนนะคะ

<style type="text/css">
.bubblebg{
    background-color: #FFFFFF;
}
.bubble1, .bubble2, .bubblebg{
    width: 150px;
}
.bubble1{
    height: 27px;
    background-image: url(http://ที่อยู่ส่วน head);
}
.bubble2{
    height: 27px;
    background-image: url(http://ที่อยู่ส่วน foot);
}
</style>

เปลี่ยนตรง #FFFFFF เป็นสีที่ต้องการได้เลยค่ะ ส่วนอื่น ๆ ก็เปลี่ยนเหมือนโค้ดก่อนหน้านะคะ