การเปลี่ยนเว็บเป็นสีขาวดำ เพื่อ ร่วมไว้อาลัย ด้วยโค้ด 1 บรรทัด
ข่าวสาร | .., 25 ตุลาคม 2568
วิธีเปลี่ยนสีเว็บไซต์เป็นขาวดำด้วยโค้ด 1 บรรทัด เพื่อร่วมไว้อาลัย
สรุปสั้น ๆ ก่อนเริ่ม: ถ้าคุณต้องการทำให้ทั้งหน้าเว็บกลายเป็น “โหมดไว้อาลัย” (โทนขาวดำ) อย่างเร็วที่สุด ให้ใส่เพียงบรรทัดเดียวต่อไปนี้ในหน้าเว็บของคุณ
<style> html { filter: grayscale(1); } </style> โค้ดนี้จะเปลี่ยนผลลัพธ์การแสดงผลทั้งหน้าให้เป็นขาวดำทันที รวมถึงรูปภาพ วิดีโอ พื้นหลัง และองค์ประกอบเกือบทั้งหมด เหมาะมากสำหรับองค์กร/เว็บไซต์ข่าวที่ต้องการแสดงความอาลัยอย่างสุภาพและรวดเร็ว โดยไม่ต้องแก้ไขรูปหรือปรับแต่งไฟล์จำนวนมาก
วัตถุประสงค์และกรณีใช้งาน
- แสดงความอาลัย ในช่วงเหตุการณ์สำคัญระดับประเทศ/องค์กร
วางโค้ดตรงไหนดีที่สุด
- วิธีที่ง่ายสุด: วางภายในไฟล์ HTML หน้าแรก (เช่น
index.html) ก่อนปิดแท็ก</head>หรือในส่วนต้นของ<body> - วิธีที่เป็นระบบ: ใส่ในไฟล์สไตล์หลัก (เช่น
styles.css) เพื่อควบคุมจากส่วนกลาง
เปิด–ปิดโหมดไว้อาลัยแบบคลิกสลับ (แนะนำให้มี)
บางองค์กรต้องการให้ผู้ใช้ “เลือก” ได้ว่าจะดูโหมดปกติหรือไว้อาลัย เราสามารถทำปุ่มสลับง่าย ๆ ได้ดังนี้
<style> /* ปิดค่าเริ่มต้นไว้ก่อน แล้วใช้คลาสบน <html> ควบคุม */ html.mourning { filter: grayscale(1); } .toggle-bar { position:fixed; right:16px; bottom:16px; z-index:9999; } </style> <div class="toggle-bar"> <button id="mourningToggle">สลับโหมดไว้อาลัย</button> </div> <script> const key = 'topvery_mourning_mode'; const root = document.documentElement; // โหลดสถานะเดิม if (localStorage.getItem(key) === 'on') root.classList.add('mourning'); document.getElementById('mourningToggle').addEventListener('click', () => { root.classList.toggle('mourning'); localStorage.setItem(key, root.classList.contains('mourning') ? 'on' : 'off'); }); </script> แนวทางนี้ช่วยให้ผู้ใช้เข้าถึงคอนเทนต์ได้ตามความต้องการ และฝ่ายคอนเทนต์/มาร์เก็ตติ้งสามารถเปิดโหมดไว้อาลัยทั้งไซต์ได้ทันทีเมื่อจำเป็น
เว้นบางรูป “ไม่ให้เป็นขาวดำ” ทำยังไง (สำคัญมาก)
หลักการ: ถ้าใส่ฟิลเตอร์ไว้บนพาเรนต์สูงสุดอย่าง html ผลจะครอบคลุมทั้งหน้า การใส่ filter: none แก้ที่ลูก (เช่น <img>) จะไม่ล้างผลของพาเรนต์ เพราะฟิลเตอร์ทำงานกับ “ผลเรนเดอร์รวม” ของพาเรนต์อยู่แล้ว
วิธีที่ถูกต้อง (ปลอดภัยสุด): ไม่ใส่ฟิลเตอร์ที่ html แต่สร้างคอนเทนเนอร์เฉพาะส่วนที่อยากให้ขาวดำ เช่น .mourning แล้ววางรูปหรือบล็อกที่ต้องคงสี “อยู่นอก” คอนเทนเนอร์นี้
<style> .mourning { filter: grayscale(1); } .keep-color { filter: none; } /* สำหรับส่วนที่ต้องคงสี (อยู่นอก .mourning) */ </style> <header class="keep-color"> <img src="/assets/logo-color.png" alt="Topvery Logo"> </header> <main class="mourning"> <!-- เนื้อหาตรงนี้จะเป็นขาวดำทั้งหมด --> <article>...</article> </main> <section class="keep-color"> <img src="/assets/hero-color.jpg" alt="ภาพโปรโมชันคงสี"> </section> ถ้าปรับโครงสร้าง DOM ไม่สะดวก: ใช้การกำหนดฟิลเตอร์แบบ “คัดเลือกองค์ประกอบ” (ข้อจำกัดคืออาจหลุดบางกรณี)
<style> /* ทำเกือบทุกอย่างให้เป็นขาวดำ แต่ยกเว้น img/video ที่ติด .keep-color */ body *:not(img.keep-color):not(video.keep-color) { filter: grayscale(1); } img.keep-color, video.keep-color { filter: none; } </style> <img src="/assets/special.jpg" class="keep-color" alt="เว้นภาพนี้ให้คงสี"> ทิป: ถ้าต้อง “ซ้อน” รูปคงสีไว้เหนือส่วนที่เป็นขาวดำ ให้ใช้เลย์เอาต์แบบซ้อนเลเยอร์ (เช่น position:absolute) ในคอนเทนเนอร์ที่ไม่ได้ติดฟิลเตอร์
เฉพาะบางหน้า/บางส่วนเท่านั้น (สำหรับเว็บใหญ่)
- โหมดทั้งไซต์ – ใส่/ลบคลาส
.mourningบน <html> ด้วยสคริปต์ส่วนกลาง - เฉพาะบางเพจ – ใส่คลาสบน <body> เมื่อเราทราบว่าเพจนั้นต้องเป็นข่าวดำ เช่น
<body class="page-news mourning"> - เฉพาะบางบล็อก – ครอบเฉพาะบล็อกด้วย
.mourningเพื่อไม่กระทบทั้งหน้า
การเข้าถึง (Accessibility) และภาพลักษณ์แบรนด์
- คอนทราสต์: ขาวดำไม่ได้แปลว่าจะอ่านง่ายเสมอ ตรวจสอบอัตราคอนทราสต์ตัวอักษรกับพื้นหลังเสมอ
- ไอคอน/กราฟ: ถ้ากราฟใช้สีสื่อความหมาย ให้เพิ่มลวดลาย/สัญลักษณ์เพื่อทดแทนสี
- โลโก้: หากโลโก้ต้อง “คงสี” ให้จัดวางโลโก้นอกโซนที่ติดฟิลเตอร์ตามแนวทางด้านบน
ประสิทธิภาพและความเข้ากันได้
- ประสิทธิภาพ: ฟิลเตอร์ระดับทั้งหน้าอาจทำให้เครื่องรุ่นเก่า/มือถือกินพลังงานเพิ่มเล็กน้อย
- เบราว์เซอร์หลัก: สมัยใหม่รองรับดีทั้ง Chrome, Edge, Firefox, Safari
- องค์ประกอบพิเศษ: วิดีโอ/แคนวาส/ไอเฟรมมักถูกฟิลเตอร์ด้วย แต่ถ้าเป็นไอเฟรมข้ามโดเมน บางกรณีอาจขึ้นกับการเรนเดอร์ของเบราว์เซอร์
ตรวจสอบก่อนปล่อยจริง (Checklist)
- อ่านออกชัดในโทนขาวดำทุกหน้าจอ (เดสก์ท็อป/มือถือ)
- โลโก้/รูปพิเศษที่ต้องคงสี แสดงสีถูกต้อง
- กราฟ/อินโฟกราฟิกยังสื่อสารได้แม้ไม่มีสี
- ปุ่ม/ลิงก์ยังมองเห็นและเข้าถึงได้ง่าย
- มีทางสลับกลับโหมดปกติ (เช่น ปุ่ม Toggle หรือกำหนดระยะเวลา)
คำถามที่พบบ่อย (FAQ)
เปิดโหมดไว้อาลัยเฉพาะบางวันอัตโนมัติได้ไหม?
ได้ ใช้สคริปต์เช็ควันที่/ช่วงเวลา แล้วสลับคลาสบน <html> ได้ เช่น .mourning
รูปในแกลเลอรีบางภาพอยากคงสี บางภาพอยากขาวดำ ทำได้หรือไม่?
ได้ สร้างคลาส .keep-color ให้รูปที่ต้องคงสี และปรับเลย์เอาต์ตามแนวทาง “แยกคอนเทนเนอร์” ด้านบน
ถ้าธีมใช้ตัวปรับสี (Color Filters) เดิมอยู่แล้ว จะชนกันไหม?
อาจชนได้ แนะนำให้รวมกฎฟิลเตอร์ไว้จุดเดียว หรือใช้คลาสสถานะเดียวเป็นตัวควบคุม เช่น .mourning เพื่อเลี่ยงกฎซ้อน
สรุป
ถ้าต้องการ “เร็วและเรียบง่าย” ใช้ html { filter: grayscale(1); } ได้เลย แต่หากต้อง “เว้นสีให้บางส่วน” ควรใช้แนวทาง “แยกคอนเทนเนอร์” (.mourning) และย้ายองค์ประกอบที่ต้องคงสีออกมานอกพื้นที่ที่ติดฟิลเตอร์ จะได้ผลแม่นยำและปรับแต่งในอนาคตได้ง่ายกว่า
ตัวอย่างการใช้งานจริงในเว็บไซต์ TopVery