คุณกำลัง login ด้วย [ เปลี่ยนชื่อ | ออกระบบ ]
 กระทู้ Top5 วันนี้ | นิยาย | ค้นหานิยาย | บอร์ดนักเขียน | บอร์ด AF | บอร์ด TheStar | ของที่ระลึก Dek-D | App อ่านนิยายบนมือถือ New! |
  นิยายรักหวานแหวว | นิยายรักเศร้าๆ | นิยายซึ้งกินใจ | นิยายแฟนตาซี | นิยายผจญภัย | เรื่องสบายๆคลายเครียด | แฟนฟิค | วรรณกรรมเยาวชน |
เข้าสู่ My.iD Control สมัครเป็นนักเขียนใหม่ | วิธีลงบทความ กฏเกณฑ์การใช้งาน | การควบคุมเรตติ้ง

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

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


     อัพเดท 2 ก.ย. 53
กลับไปหน้าหลักของบทความ
แจ้งเนื้อหาในตอนไม่เหมาะสม
นิยาย-เรื่องยาว: ไลฟ์สไตล์/ดีไซน์ กราฟิก
Tags: โค้ด, code, แต่งไอดี, ไอดี, แต่ง id, id, My.iD, My.iD2, ตกแต่ง, นิยาย
ผู้แต่ง : Caje ดูเน็ตเวิร์คอื่นๆ ของ Caje
My.iD: https://my.dek-d.com/Caje
< Review/Vote > Rating : 95% [ 233 mem(s) ]
This month views : 39 Overall : 219,513
4,449 Comment(s), [ แฟนพันธุ์แท้ 5114 คน ]

[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 43 : [my.id] เปลี่ยนกรอบคำพูด , ผู้เข้าชมตอนนี้ : 5541 , โพส : 17 , Rating : 100% / 1 vote(s)

ขนาดตัวอักษร : เพิ่มขนาด | ลดขนาด



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

 

ก่อนอื่นต้องมีไฟล์ภาพ 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 เป็นสีที่ต้องการได้เลยค่ะ ส่วนอื่น ๆ ก็เปลี่ยนเหมือนโค้ดก่อนหน้านะคะ





Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 43 : [my.id] เปลี่ยนกรอบคำพูด , ผู้เข้าชมตอนนี้ : 5541 , โพส : 17 , Rating : 100% / 1 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 17 : ความคิดเห็นที่ 4162
อลังการแท้ ขอบคุณค่ะ
PS.  ...สิ่งที่เราไม่เข้าใจ ก็คือสิ่งที่เรามองข้ามมันไป...
Name : mina.mimi < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ mina.mimi [ IP : 171.99.73.137 ]
ส่งข้อความลับ
วันที่: 14 มกราคม 2557 / 22:53
# 16 : ความคิดเห็นที่ 3997
ขอบคุณค่า
PS.  สวัสดี...ยินดีที่ได้รู้จักค่ะ
Name : Flora-Night < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Flora-Night [ IP : 223.205.105.251 ]
ส่งข้อความลับ
วันที่: 25 พฤษภาคม 2556 / 22:30
# 15 : ความคิดเห็นที่ 3606
 Thz
PS.  Wow!ว้าว!
Name : Chalee_Zaa < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Chalee_Zaa [ IP : 113.53.218.44 ]
ส่งข้อความลับ
วันที่: 27 กันยายน 2555 / 14:29
# 14 : ความคิดเห็นที่ 3536
ขอบคุณฮะ 
PS.  私は日本から来た ❤ [ ピン ] 星空!!
Name : p l i n ' ๒๒ . u o n < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ p l i n ' ๒๒ . u o n [ IP : 223.207.39.44 ]
ส่งข้อความลับ
วันที่: 13 สิงหาคม 2555 / 17:02
ความเห็นนี้ถูกลบแล้ว :(
# 12 : ความคิดเห็นที่ 2356
ขอบคุณมากค่า ~ >w<

PS.  Fuck - -
Name : { Princess } H a k k i e < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ { Princess } H a k k i e [ IP : 223.205.112.186 ]
ส่งข้อความลับ
วันที่: 16 สิงหาคม 2554 / 16:03
# 11 : ความคิดเห็นที่ 1612
ขอบคุณค่ะ  >_<

PS.  ลองเข้ามาอ่านนิยายที่อิ๊ฟแต่งกันเยอะๆนะคะ นามปากกา Angel_Aif
Name : Oop!Aif < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Oop!Aif [ IP : 125.24.213.88 ]
ส่งข้อความลับ
วันที่: 5 มีนาคม 2554 / 13:08
# 10 : ความคิดเห็นที่ 1529
ทำไมของเราภาพมันไม่ขึ้นอ่า TT
PS.  แอค เซ รา เร เตอร์ ฉัน หลง เธอ <3 na [ haha ]
Name : {Miura} < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ {Miura} [ IP : 223.207.22.198 ]
ส่งข้อความลับ
วันที่: 18 กุมภาพันธ์ 2554 / 13:25
# 9 : ความคิดเห็นที่ 1317
โอ้ ขอบคุณมากครับ

PS.  ...อย่ามองผมแบบนั้นสิครับ...รู้ครับว่าเท่ห์...แต่จ้องกันด้วยสายตาแบบนั้น...มันก็....ขนลุกสิครับป้า...
Name : XZ.hunteR < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ XZ.hunteR [ IP : 125.26.72.231 ]
ส่งข้อความลับ
วันที่: 4 ธันวาคม 2553 / 19:15
# 8 : ความคิดเห็นที่ 903

ขอโทษนะค่ะ แต่กรอบพูดคืออะไรอ่ะ แบบเราเป็นคนขี้เกียจแต่งไอดีสุดๆ เพิ่งเริ่มแต่งเอง ยังไม่รู่เลยว่าอะไรคืออะไรบอกด้วยนะค่ะ ขอบคุณจ้า:)


PS.  คนที่เรารัก...........เขารักเราด้วยเหรอ......?
Name : เซ็งไก่...ต้องกินแพนด้า < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ เซ็งไก่...ต้องกินแพนด้า [ IP : 110.49.193.38 ]
ส่งข้อความลับ
วันที่: 1 กันยายน 2553 / 21:43
# 7 : ความคิดเห็นที่ 602
แบบเดียวกับคห.482เลยค่ะ

แต่ยังๆก็ขอบคุณมากมายค่ะ>/\<
PS.  เราสงวนยามาโมโตะซังไว้เพื่อฮิบาริซัง และ!...เราสงวนฮิบาริซังไว้เพื่อยามาโมโตะซังเท่านั่น!! โน่เคะเท่านั้นที่บันไซ!! ทูน่าเมะเท่านั้นที่เราชอบ Normalฉันไม่สนใจ Yเท่านั้นที่ฉันรัก!!!
Name : PMD_OongFong < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ PMD_OongFong [ IP : 125.26.39.106 ]
ส่งข้อความลับ
วันที่: 16 เมษายน 2553 / 20:17
# 6 : ความคิดเห็นที่ 477
.. คือ มีปัญหานิดหน่อยอะค่ะ ^^"
พอดีทำบับเบิลแบบใส่กรอบข้างนอก

แล้วมันมีปัญหาตรง bg ค่ะ
คือส่วนขอบซ้าย ส่วนข้อความกับขอบขวามันไม่ประกบกันเป็นกรอบ
ช็อกมาก =[]=


ยังไงก็ ., ขอคำแนะนำด้วยนะคะ
ขอบคุณจริง ๆ ค่ะ (:

PS.  [ ผลิตภัณฑ์นี้ ‘รับประกันร้อยปี (( ; ]
Name : .iNerdzchie,}' < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ .iNerdzchie,}' [ IP : 112.142.226.249 ]
ส่งข้อความลับ
วันที่: 20 ตุลาคม 2552 / 14:47
# 5 : ความคิดเห็นที่ 246
ขอบคุณค่าา
เอาไปใช้นะคะ ^^
PS.  Blue field .. ; Green Sky .. = WonKyu 4 ever =
Name : NanZ ; < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ NanZ ; [ IP : 114.128.59.209 ]
ส่งข้อความลับ
วันที่: 11 พฤษภาคม 2552 / 14:01
# 4 : ความคิดเห็นที่ 245
ขอบคุณค่ะ ^^
PS.  ฝั น ไ ก ล ต้ อ ง ไ ป ใ ห้ ถึ ง
Name : *:.+ZiG->ZaG+.:* CD44 < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ *:.+ZiG->ZaG+.:* CD44 [ IP : 125.25.119.211 ]
ส่งข้อความลับ
วันที่: 16 เมษายน 2552 / 17:05
# 3 : ความคิดเห็นที่ 244

คราวนี้ bubble bg ซ้อนกันอะคับ

ไปลองidคนอื่นก้เปน

เพราะผมทำตรงกลางสั้นไปเรอะคับ

Name : :+:+neonoto+:+: < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ :+:+neonoto+:+: [ IP : 125.26.107.178 ]
ส่งข้อความลับ
วันที่: 15 เมษายน 2552 / 19:21
# 2 : ความคิดเห็นที่ 243

:+:+neonoto+:+: ๑ ตอบให้ในหน้าไอดีแล้วนะคะ ^^


Name : Caje < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Caje [ IP : 222.123.244.43 ]
ส่งข้อความลับ
วันที่: 14 เมษายน 2552 / 17:05
# 1 : ความคิดเห็นที่ 242
เอาไปใช้แล้ว มันติดแต่ตรงส่วนหัวอะค้าบ ที่เปน body ก่า bubble2 ไม่เปลี่ยน ต้องทำไงอีกรึป่าวอ่า? ตอบทีนะ
Name : :+:+neonoto+:+: < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ :+:+neonoto+:+: [ IP : 125.26.109.43 ]
ส่งข้อความลับ
วันที่: 14 เมษายน 2552 / 14:31
หน้าที่ 1
Post your comment : แสดงความคิดเห็น
ส่วนที่ 1: Message ข้อความ

ส่วนที่ 2 : Name ลงชื่อ
  โพสความเห็นด้วย member Login name Password
  โพสความเห็นไม่แสดง member : ชื่อ* email รูปตัวแทน
            พิมพ์เลขที่เห็น

เธซเธ™เธฑเธ‡เธชเธทเธญเนƒเธซเธกเนˆเธ›เธฃเธฐเธˆเธณเน€เธ”เธทเธญเธ™เธžเธคเธฉเธ เธฒเธ„เธก 2561

ข้อตกลง & เงื่อนไขการใช้งาน

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

  • กรณีที่ผลงานชิ้นนี้กระทำการคัดลอก ทำซ้ำ มาจากผลงานของบุคคลอื่นๆ ผู้ลง
    ผลงานจะต้องทำการอ้างอิงอย่างเหมาะสม และต้องรับผิดชอบเรื่องการจัดการ
    ลิขสิทธิ์แต่เพียงผู้เดียว

  • ข้อความและรูปภาพที่ปรากฏอยู่ในผลงานที่ท่านเห็นอยู่นี้ เกิดจากการส่งเข้าระบบ
    โดยอัตโนมัติจากบุคคลทั่วไป ซึ่งเด็กดีดอทคอมมิได้มีส่วนร่วมรู้เห็น ตรวจสอบ
    หรือพิสูจน์ข้อเท็จจริงใดๆ ทั้งสิ้น ผู้ใดพบเห็นการลงผลงานละเมิดลิขสิทธิ์ หรือ
    ไม่เหมาะสมโปรดแจ้งผู้ดูแลระบบเพื่อดำเนินการทันที
    Email: contact(at)dek-d.com ( ทุกวัน 24 ชม ) หรือ
    Tel: 0-2860-1142 ( จ-ศ 0900-1800 )

App อ่านนิยายบน iPad iPhone และ Android