วิธีติดริบบิ้น ไว้อาลัย ในหน้าเว็บไซต์ แบบง่ายๆ ไม่ต้องเขียนโค้ดเพิ่ม #ริบบิ้น #ไว้อาลัย #ขาวดํา #เว็บไซต์ #โปรแกรมเมอร์
หลายคนเสิร์ชหา “โบว์ไว้อาลัย png” แล้วเอาไปแปะบนเว็บเลย แต่จากที่ลองทำเอง สิ่งที่ช่วยให้ดูเรียบร้อยและ “ถูกต้อง” มากขึ้นคือเลือกไฟล์ให้เหมาะ และวางในตำแหน่งที่ไม่รบกวนการใช้งานของคนอ่าน 1) เลือกโบว์ไว้อาลัย PNG ให้เหมาะกับเว็บ - แนะนำไฟล์ .png พื้นหลังโปร่งใส จะวางบนเว็บสีอะไรก็ดูเนียน - เลือกความละเอียดพอดีๆ (เช่น 200–600px) เพื่อไม่ให้ไฟล์หนักเกินไป หน้าเว็บจะได้ไม่โหลดช้า - ตั้งชื่อไฟล์/alt text ให้สื่อความหมาย เช่น “ริบบิ้นไว้อาลัย” หรือ “black mourning ribbon” ช่วยทั้ง SEO และการเข้าถึง (คนใช้ screen reader) 2) ริบบิ้นไว้อาลัยที่ถูกต้องควรเป็นแบบไหน? โดยทั่วไป “ริบบิ้นไว้อาลัย” นิยมเป็นโทนสีดำหรือขาว-ดำ เรียบ สุภาพ ไม่ใส่เอฟเฟกต์เยอะ และไม่ใหญ่จนเด่นกว่าคอนเทนต์หลัก สิ่งที่ผมเลี่ยงคือภาพที่มีลายน่ารัก/แฟนซีหรือข้อความยาวๆ เพราะอาจดูไม่เหมาะกับบรรยากาศการไว้อาลัย 3) ตำแหน่งการติดบนหน้าเว็บ (บน-ล่าง-ซ้าย-ขวา) จากที่ทดสอบมา ตำแหน่งยอดฮิตคือมุมขวาบนหรือซ้ายบน เพราะคนเห็นทันที แต่ต้องระวังไม่ให้บังเมนู/ปุ่มสำคัญ (เช่น ปุ่มเข้าสู่ระบบ ปุ่มค้นหา) ถ้าเว็บมีแถบนำทางแน่นๆ ผมจะย้ายไปมุมล่างแทน หรือปรับขนาดให้เล็กลง 4) วิธีใช้งานแบบ “คัดลอกแล้ววางโค้ด” ให้ปลอดภัย - วางโค้ดก่อนปิดแท็ก </body> หรือในไฟล์ layout หลัก (เช่น index.html / template ของเว็บ) - ถ้าใช้สคริปต์/โค้ดจากแหล่งภายนอก แนะนำดูว่าเป็นแหล่งที่เชื่อถือได้ (เช่น GitHub repo ที่คนใช้งานจริง) และเปิดดูโค้ดคร่าวๆ ว่าไม่ได้แอบโหลดสคริปต์แปลกๆ - ทดสอบทั้งมือถือและเดสก์ท็อป เพราะบางทีริบบิ้นอาจไปทับปุ่มเมนูบนจอเล็ก 5) ทริคเล็กๆ ให้ดูสุภาพและใช้งานได้จริง - ทำให้คลิกปิดได้ (ถ้าริบบิ้นบังเนื้อหาในบางหน้า) - จำกัดแสดงเฉพาะช่วงเวลาที่ต้องการ (เช่น 7 วัน/30 วัน) เพื่อไม่ให้ค้างบนเว็บโดยลืมถอด สรุปคือ ถ้าอยากให้ได้ทั้งความสุภาพและประสบการณ์ผู้ใช้ที่ดี ให้เริ่มจากเลือกโบว์ไว้อาลัย PNG ที่เรียบคมชัด วางตำแหน่งมุมที่ไม่บังเมนู แล้วค่อยคัดลอกโค้ดไปติดในเว็บ เท่านี้ก็แสดงการไว้อาลัยได้อย่างเหมาะสมครับ
