• [ MIHAYASHI ] • ‼ Blog นี้มีแต่ทูน่า ‼

อนึ่ง... เอนทรี่นี้เกิดจากคำถามของซึนซัง ใน faq เมื่อเอนทรี่ก่อหน้านู้นนนน...

อสอง(?)... นี่เป็นฮาวทูแรกที่ จขบ. เขียนขึ้น... ไม่มั่นใจว่ามันจะถูกตามหลักมาตรฐาน ISO 1827  รึเปล่า...(??)

อสาม(??)... เอนทรี่ยาว โหลดนรก...จขบ.ใช้เวลาในการเขียนเอนทรี่นี้ 1 เดือนเต็มๆ =A="

อสี่(???)... เอนทรี่นี้เป็นฮาวทูที่พูดถึงตั้งแต่วิธีการคิด + ไอเดีย ซึ่งมาจากสมองน้อยๆ ขอบ จขบ. นี้ ผิดพลาดประการใด ก็ขออภัยไว้ ณ ที่นี้...

อห้า...ไม่ใช่คิเคียว วิธีเขียนโค้ดในฮาวทูนี้ใช้สำหรับ V.4 ถ้าท่านมาสเตอร์เปลี่ยนเมื่อไหร่ ฮาวทูนี้คงใช้ได้แค่ครึ่งเดียว (ฮา..)

และสุดท้าย...

เอนทรี่นี้ตัวหนังสือเยอะก็จริงๆ แต่ถ้าขี้เกียจอ่าน ดูแต่รูปก็รู้เรื่องค่ะ!

 

 [How to] Make a Stylish Theme blog
     ทำธีมยังไง ให้บล็อกออกมาดู"เริ่ด"

ไม่รู้ว่ามันจะออกมา "เริ่ด" แค่ไหน.. แต่ขอใส่ให้มันหรูๆหน่อยเหอะ!

ก่อนอื่นก็มาดูตัวอย่างกันก่อน~~~!!
(เครดิตภาพโดย...บล็อกนี้เอง =w=!!)

จะทำธีมออกมาประมาณนี้นะคะ =w=!!! 

 

ก่อนอื่นก็ต้องมาอธิบายกันก่อน.... ว่า ส่วนประกอบของธีมบล็อกจะแบ่งออกเป็น 2 ส่วนใหญ่ๆ  คือ ส่วนตกแต่ง (พวกรูป / สี / โมเดล อะไรต่างๆ นานา) กับส่วนที่เป็นโค้ด CSS

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

ส่วนที่เป็น รูป ก็เหมือนกันเสื้อผ้าที่เรามาให้ จะทำให้น้องบล็อกเริ่ดแค่ไหน ก็ต้องมาทำกันตรงนี้

ส่วนโค้ด CSS ก็เหมือนกับเวลาที่จะเอาเสื้อผ้าไปใส่ให้น้องบล็อก เช่นหมวกต้องใส่ไว้บนหัว... รองเท้าก็ใส่ไว้ที่เท้า... ถ้าเขียนโค้ดผิด ก็เหมือนกับการเอารองเท้าไปใส่บนหัวนั่นแล...

 

ถ้าเข้าใจตัวงานแล้วก็เริ่มลงมือทำกันเลย!!

 

Part 1 : เตรียมวัตถุดิบ

     ก่อนจะทำอะไร เราก็ต้องมาตั้งจุดหมายกันก่อน...  ซึ่งจุดหมายของเราในครั้งนี้ก็คือ... ทำธีมบล็อกให้เริ่ด!!
แต่อะไรที่มีผลแต่ความ "เริ่ด" ของธีมล่ะ?? ก็ขอให้ท่านผู้อ่าน เลื่อนกลับขึ้นไปดูรูปตัวอย่างกันก่อน... เห็นอะไรป่าว!?!

จะว่าเพราะ คนทำธีมหน้าตาดี...ก็ไม่ใช่
หรือจะเพราะ! มีทูน่าเป็นโมเดล?? ก็รู้สึกว่าจะมีโมเดลคนอื่นด้วยนี่หว่า??...

ปัจจัยหลัก ของการทำธีมให้ "เริ่ด" คือ "ความสามัคคี" ค่ะ

อ่านไม่ผิดหรอก มันคือ "ความสามัคคี" จริงๆ...

อ่าว!! แล้ว ไอ้"ความสามัคคี" เนี่ยมันไปเกี่ยวกับการทำธีมอย่างไรมิทราบ??

ขอบอกเลยว่า เกี่ยวกันสุดๆ ค่ะ

ซึ่ง ไอ้ "ความสามัคคี" ที่พูดถึงเนี่ย คือความสามัคคีกันระหว่างส่วนๆ ของตัวบล๊อก

เช่น...  จากการสังเกตจะเห็นได้ว่า (พูดซะวิชาการเีชียว....)

(ขอแปะรูปเล็ก... งานเก่ามิฮะนี่มันฉ่อยได้ใจ...)

เฮ้ย! นี่มันเอาเพจหลายๆเว็บมาตัดๆ รวมกันรึเปล่าเนี่ย!!

ส่วน บล็อกนี้ ส่วน neckนี่ไม่ได้เข้ากับส่วนอื่นเล๊ยยยย (ขอย่อรูปหน่อยกลัวโดนมันฆ่า )

 

สรุป  :  1. อยากให้บล็อก "เริ่ด" ต้องทำให้ทั้งหน้า ดูเหมือนยังอยู่หน้าเว็บเดิม
              2. ส่วนสำคัญที่ทำให้บล็อก "แตกแยก" ก็คือ "สี"

 

หลังจากที่จับจุดกันได้ ก็ขอเข้าวิธีการร่างแบบซะที (ฝอยมาซะยาวเลย =A=")

เริ่มการร่างแบบ...เราจะร่างแบบกันไว้ก่อนเพื่อที่ตอนทำจะได้ไม่หลง

Note : ธีมบล็อกจะสวยหรือไม่... ก็ขึ้นอยู่กันขั้นตอนนี้ค่ะ การเขียนโค้ด css
เป็นแค่การนำเอา "ผลงาน" ที่เราทำไปจัดเรียงให้อยู่ในที่ของมัน ไม่มั่วซั่ว เท่านั้นค่ะ

 

Step 1 : วางโครงร่าง

ก่อนอื่นเลย ก็ต้องเปิดเจ้า Photoshop ขึ้นมาก่อน แล้วก็ File > New... เอาขนาดซัก 1200*1000 ก็พอกินละ.. (?)  แล้วก็จัดการวางโครงร่างคร่าวๆ

โดยการใช้เจ้าตัวนี่ → Rectangle tool

ในขั้นตอนนี้ยังไม่ต้องเน้นเรื่องสีมาก แต่กำหนดพื้นที่ของแต่ละส่วนก็พอ

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

ตัวช่วยในการกำหนดขนาดก็คือ "ไม้บรรทัด" นั่นเหละค่ะ =w=!!
(ถ้าใครไม่เห็นก็กด ctrl+R นะ)

อีกที่ ก็คือ... ถ้าลากเมาส์ไปๆ มาๆ มันกำหนดขนาดยากนัก ก็ใส่เป็นตัวเลขลงไปเลยซิ!!!
ตอนที่เรา free transfrom มันอยู่ (มี สี่เหลี่ยมโบ๋กลางอยู่รอบๆ 8 อัน) ก็มองขึ้นไปข้างบน

จาก ก็ใส่เป็นตัวเลข แล้วเติ่ม px ต่อท้ายซะ!!
     

เราก็จะได้ขนาดตามที่ต้องการ....  แบบนี้ ↓

ได้ตัวเพจแล้ว!!

 

ทีนี้ก็หาโมเดลมาลง (จริงๆ แล้วโมเดลนั่นเหละที่เป็นจุดเริ่มอยากให้ทำธีมบล็อกใหม่...!)
(รูปใหญ่ จิ้มที่รูปเลย...)

 

จากนั้นก็ใช้  ลากสี่เหลี่ยมขึ้นมาอีกเพื่อกำหนดส่วนของ #content กับ #sidebar, sidebar2

 

Step 2 : ตกแต่ง

พอรู้สึกว่าสีมันไม่ใช่ อ่ะกิ๊ฟ!! ก็เปลี่ยนซะหน่อย...

*หมายเหตุ : รสนิยมของบล็อกนี้คือสีที่มัน "จี๊ดๆ" ก็ปรับได้ที่ Image > Adjustments > Levels

 

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

แต่งซะจนพอใจก็จะได้ออกมาแบบนี้... ↓

TIP : สำหรับมือสมัครเล่นอย่างมิฮะ ก็ไม่มีปัญญาจะทำแพทเทิร์นหรือ อะไรๆขึ้นมาเองค่ะ
ก็เลยต้องใช้อะไรที่มันสำเร็จรูปหน่อย... อย่างพวกบรัช (เวอเตอร์) หาโหลดได้จาก

• http://photoshopdecor.com/
• http://www.brusheezy.com/
• http://fbrushes.com/
• http://www.photoshopbrushes.com/
• ฯลฯ!!!!

 

ทำแถบเมนูอีกซักหน่อย... เพราะรู้สึกไซด์บาร์มันโล่งๆ ...

 

Step 3 : จับมันแยกส่วน!

หลังจากที่คิดว่า...ไม่ลืมอะไรแล้วล่ะ! (แต่คนทำมันลืมส่วนคอมเมนต์ =A=")
ก็จัดการตัดมันซะ!! ใช้คัตเตอร์กรีดๆๆ...

มิฮะไม่ได้จะเล่น S กับธีมบล็อกแต่อย่างใด...ที่บอกว่าจะแยกส่วนมันก็คือใช้ tool ตัวนี้ →   (slice tool)
หั่นๆๆ มันเป็นชิ้นๆซะ...

ขั้นตอนนี้ต้องระวังกันหน่อย... ว่าจะแบ่งส่วนไหน แยกจากส่วนไหน..  แล้วตัดยังไงให้รูปมีขนาดเล็กที่สุด (บล็อกเราจะได้ไม่โหลดโหดเกินไป)  เพราะถ้าเราตัดผิด เวลาเอาไปเขียนโค้ดจะลำบาก...

วิธีตัดรูป ให้คิดถึงโครงสร้างหลักของ exteen คือ..

(รูปนี้แนะนำให้เปิดใน tap หรือ window ใหม่ค้างไว้เลยค่ะ เราต้องใช้กันอีกเยอะ..)

ก็ตัดตามนั้นไป... แต่จะยืดหดส่วนไหน มันก็ตามที่เราออกแบบกันมา...

อย่างธีมนี้ มิฮะจะตัดส่วน #neck ออก ก็จะเหลือส่วน #header ตรงหัวมุคุกับสึนะ แล้วก็จะต่อด้วย #belly เลย   ในส่วนของ #belly ก็จะแบ่งเป็น #sidebar (ตัวมุคุ) #content (ที่สีขาวๆ ว่างๆ) #sidebar2 (ตัวสึนะ)
#leg กับ #footer ไม่ได้ทำ...

 

หลังจากที่เราตัดแบ่งเสร็จก็เซฟ โดยเซฟที่ File > Save for web...  หรือกด Alt + Shift + Ctrl + S

มันก็จะขึ้นมาแบบนี้... ↓

เลือกรูปในแต่ละส่วน...ปรับชนิดของไฟล์ เลือก quality เสร็จก็กด save ได้เลย

ตอนเซฟมันจะถามเราอีกรอบ...
File name : ← ตั้งชื่อไฟล์ (ไม่ต้องไปยุ่งก็ได้ เพราะมันคือชื่อของไฟล์ HTML ที่เราไม่ใช้)
Save as type : ← ให้เลือกว่าจะเซฟแค่รูปที่ตัดออกมา หรือโค้ด HTML (เป็นตารางกำหนดขนาดตามขนาดรูป) หรือว่าจะเอาทั้งคู่ (แยกรูปลงตารางให้เสร็จสรรพ)
Settings : ← เซ็ตค่าของโค้ด HTML (ไม่ต้องไปยุ่งกับมันก็ได้)
Slices : ← เลือกว่าจะเซฟรูปจาก Slice ไหนบ้าง

*หมายเหตุ : เราอาจจะเซฟไฟล์ HTML ออกมาด้วยก็ได้ เพราะเวลาลงโค้ด CSS จะได้รู้ว่าตอนแรกเราเรียงรูปในแต่ละส่วนยังไง

 

พอเซฟเสร็จแล้วเจ้า PS มันก็จะตั้งโฟลเดอร์ใส่รูปให้เราว่า images รูปที่เราตัดไว้ก็จะอยู่ในโฟลเดอร์นั้นเหละ..

หลังจากเตรียมวัตถุดิบเสร็จ ก็เป็นอันจบงานใน part 1 (ซะที)...

 

 

Part 2 : แต่งตัวให้บล็อก

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

 

Step 1 : อัพโหลดรูปทั้งหมด

ขั้นตอนนี้ไม่มีอะไรยากหาโฮสเหมาะๆ ซักคนแล้วไปนั่ง drink... เอ้ยไม่ใช่!! หาโฮสเหมาะๆซักที่ แล้วก็จัดการฝากไฟล์รูปที่เราอุส่าห์ทำกันขึ้นมาไป... (อัพโหลดใน exteen ก็ได้)

Step 2 : เรียง widgets

ขั้นนี้ไม่มีอะไรเลย ก็แค่จับ widgets ย้ายๆไปใส่ในแต่ละส่วน... ตอนแรกวางมั่วๆ ก่อนก็ได้ แล้วค่อยมา แก้อีกที...

Step 3 : แก้โค้ด

มาถึงแล้วขั้นตอนที่ปวดตับที่สุดในการทำธีมบล็อก(สำหรับหลายๆ คน)...

ในขั้นตอนนี้ สำหรับคนขี้เกียจเปลี่ยนหน้าเพจไปๆ มาๆ มิฮะก็ขอแนะนำ Addonของ Firefox ตัวนึงค่ะ..
ซึ่งก็คือ Firebug  โหลดได้จาก → ตรงนี้ ←

ถ้ามี Addon ตัวนี้ รับรองเลยว่า ปัญหาชีวิตของคุณจะน้อยลงเลยทีเดียว!!
วิธีใช้ก็ง่ายแสนง่าย...พอ install เสร็จแล้วก็จะมีไอคอนนี้ ขึ้นมาตรงมุมล่างขวา...
เปิด บล็อกเราขึ้นมา หรือบล็อกคนอื่นที่คิดว่าโครงสร้างบล็อกคล้ายๆ ของตัวเองก็ได้ เวลาแก้โค้ดจะได้ไม่ต้องแก้เยอะ (เลวววว...) แล้วก็คลิกที่ไอคอนแมลง... ก็จะได้แบบนี้ ↓

หลังจากนั้นจะแก้อะไรก็แก้ไป...เป็นอันจบขั้นตอน...
me//โดนถีบ..

 

ก่อนอื่นเลยก็จัดการ Ctrl+A แล้ว Ctrl+C เปิด notepad แล้ว Ctrl+V ซะ... แบ็คอัพของเก่าไว้ปลอดภัยสุด...

 

เทคนิคการแก้โค้ดที่ทำให้ใช้พลังงานสมองน้อยลงคือ การ "แก้โครงร่างใหญ่ๆทั้งหมดก่อน แล้วค่อยมาแก้รายละเอียดทีหลัง "

ขยายความกันนิด... ก็คือการลงรูป BG ในแต่ละส่วนหลักๆ ปรับขนาด แล้วก็จับมันโยกซ้ายโยกขวาให้เรียบร้อยซะก่อน... (โครงสร้างหลักเลื่อนกลับไปดูข้างบนได้เลยค่ะ)

ลำดับของส่วนที่จะแก้ ↓

1. body
2. #page
3. #header
4. #neck
5. #belly
6. #content
7. #sidebar, sidebar2
8. #leg
9. #footer
10. #commentform 

ก็คือแก้จากบนมาล่างนั่นแหล่....  ตัวที่ควรจะแก้ก่อนเลยก็คือ

1. display: (จะให้มันแสดงออกมามั้ย อย่างเช่นถ้าไม่อยากได้ neck ก็ใส่ none ตรงนี้)
2. width: (กำหนดความกว้าง)
3. height: (กำหนดความสูง)
4. float: (จะให้มันเรียงกันยังไงมี left right กับ none แต่ถ้าถามว่าใช้ยังไง จขบ. มันก็ยังไม่รู้... กร๊ากก..)
5. background: (ชื่อก็บอกอยู่แล้ว แบ็กกราวน์นั่นเหละ จะใส่ทั้ง สี รูป กำหนดตำแหน่งได้ตรงนี้เลย)
6. margin: (จะให้ส่วนนั้นเลื่อนลง/ไปซ้าย/ไปขวา เท่าไหร่)
7. padding: (คล้าย margin แต่ตัวนี้จะเลื่อนพวก"ของ"ที่อยู่ในส่วนนั้นๆ..)

อธิบายเพิ่มเติมเรื่อง padding กับ margin นิดๆ... ประมาณนี้.. ↓

TIPS : ถ้าอยากจะกำหนด padding / margin แค่ด้านเดียวก็ใส่ -top / -left / -right /
-bottom ต่อท้ายเข้าไป  แต่ถ้าจะใส่มันทั้ง 4 ด้านเลยแต่อยากให้แต่ละด้านไม่เท่ากันก็
ใส่แบบนี้เลย  ↓
margin:10px 5px 10px 5px;  (เรียง : ห่างจาก บน ขวา ล่าง ซ้าย)

TIPS : ปัญหา sidebar ตกมาอยู่ข้างล่าง.. ส่วนใหญ่จะเกิดจากกำหนดความกว้างของ
content ไม่ก็ sidebar มากเกินไปจนมันเบียดกันตกลงมาอยู่ข้างล่าง

วิธีแก้คือกลับไปดูขนาดรูปที่เราทำไว้ใหม่อีกครั้ง แล้วใส่ความกว้างให้เท่ากับรูปBG เลย...
แต่ถ้ายังไม่ได้อีก ให้ไปดู margin ของแต่ละส่วน แล้วใส่ตัวเลขให้หน่อยลง
หรือไม่ดู padding ในส่วนของ page แล้วปรับลดซะ  

หลังจากที่ปรับส่วนใหญ่ๆ กันเสร็จไปแล้ว ก็ backup อีกที (ระหว่างทำก็ backup ไปด้วยก็ได้ กันพลาด..)

แล้วก็มาเริ่มเจาะรายละเอียดกัน...
(จะอธิบายแ่ค่คร่าวๆ นะคะ เพราะส่วนใหญ่แล้วแค่อ่านดูก็น่าจะรู้ว่ามันหมายถึงอะไร อย่าง font / height / background / border อะไรแบบนี้...)

 

#header : หัวบล็อก

ส่วนนี้จะแยกย่อยๆ ได้อีกเป็น...

h1 → ชื่อของบล็อก ส่วนนี้จะมี link มาที่บล็อกเราด้วย จะเขียนแบบเดียวกับที่ขึ้นที่ title bar นั่นเหละ! (ตรงที่เรากรอกชื่อบล็อกใน setting ) 
ถ้าไม่อยากให้ตัวหนังสือขึ้น ก็ใส่เพิ่มว่า text-indent:-9999px;
หรือถ้าไม่อยากให้มันโผล่หัวมาเลยก็ใส่ display:none;

h2 →  ก็คือ Blog Description จะเซ็ตยังไงก็เหมือนกับ h1 เลย..

coverimage  → รูปแบนเนอร์บนหัวบล็อก ถ้าไม่ใส่ก็ display:none; ไม่ก็ height:0px;

 

#sidebar : แถบเมนูด้านข้าง

 

ทั้งเมนู neck กับ leg ก็เหมือนกันค่ะ...

 

#footer : ท้ายบล็อก

(ของเก่าหากินใหม่...)

 

#commentform : คอมเมนต์

 

 

และก็เป็นอันจบหลักสูตร how to ธีมบล็อกค่ะ...  ยาวเน๊อะ  =w=""

เรื่องของรายละเอียดว่าแต่ละ propertyใช้กำหนดอะไร ขอไม่อธิบายแล้วกันค่ะ เพราะเ็ห็นท่านเทพหลายคนเค้าเคยเขียน how to กันไปแล้ว

ถ้ามีใครติดอะไรหรือสงสัยอะไรก็ ถามเอาไว้ได้นะคะ แล้วจะมา edit เพิ่มเติมค่ะ...

 

แถมท้ายนิด... ดูวันที่ที่เริ่มเขียน.. =A="

(เพราะเอาแต่ดองนะซิ =[]=!!!!)

 

Zone : ตอบคำถาม

@E t e r n a L ★ YOONHOSTAR

เรื่องธีมบล็อกแบบที่มี scroll bar ด้านใน ท่านrije เขียนฮาวทูไว้ในเอนทรี่นี้ค่ะ

 

@Mind

ถ้าอยากให้ดูใน IE ก็งามด้วย... เวลาเขียนโค้ดต้องเปิดพรีวิวดูทั้งใน IE แล้วก็ firefox ด้วยค่ะ (เมื่อก่อนเคยทำอยู่หรอก.. แต่ตอนนี้ไม่เอาแล้ว ขี้เกียจ =A=")
ส่วนใหญ่ที่มันเบี้ยวเพราะ IE ประมวลค่า padding ไม่เท่ากับ firefox ค่ะ
ถ้าไม่อยากให้เบี้ยวก็ใส่ padding ให้ IE กับหมาไฟมาเจอคนละครึ่งทาง...
(มายด์ซังคะ... นี่คำถามซีเรียสรึเปล่าอ่ะค่ะ )

 

@aiwendil

ให้ดูตรง #page ค่ะ แล้วก็หาคำว่า  padding  แล้วแก้ให้เป็น 0px ค่ะ ทีนี้หน้าบล็อกก็จะไม่เว้นแล้วค่ะ

แต่ถ้าใช้ธีม Apollo ของ exteen อยู่... ธีมนี้จะมีลูกเล่นนิดหน่อยค่ะ คือจะตัด BG ในส่วนของตัวบล็อกเว้นออกมา (ส่วนที่เป็นเงา)
ถ้าจะอธิบายแบบละเอียดๆก็คือ ที่เราเห็นว่ามันเว้นออกมาน่ะ..จริงๆแล้วมันไม่ได้เว้น แต่เป็นส่วนของบล็อกที่โปร่งใส ค่ะ...
ถ้าอยากให้หน้าบล็อกชิดขอบทุกด้านก็เปลี่ยน BG ทุกๆ ส่วนของบล็อกค่ะ

เพิ่มเติมค่ะ...
ลืมพูดถึงเรื่องความกว้างของหน้าบล็อกไปค่ะ OTL..
หลังจากลบค่า padding ของ page จนเหลือ 0px แล้ว.. ก็เปลี่ยนความกว้างของ page ด้วยค่ะ
ส่วนจะใส่ความกว้างเป็นเท่าไหร่ถึงจะเต็มหน้าจอนั่นก็แล้วแต่ resolution ของจอแต่ละคนค่ะ
(ถ้าจอขนาด 1024*768 ก็กำหนดค่า width เป็น 1007 ค่ะ)
แต่ถ้าอยากให้หน้าบล็อกขยายเต็มจอตลอดก็ใส่ค่า width:100%; ค่ะ

 

ขอบคุณทุกๆ คอมเมนต์ค่ะ =w=!!!

 

. P S  HOW TO แรกในที่สุดมันก็เสร็จ!!!
. P S  ช่วงนี้อาจจะหายหน้าหายตาไปหน่อย... ใกล้สอบไฟนอลแล้ว...