การเปลี่ยนเว็บเป็นสีขาวดำ เพื่อ ร่วมไว้อาลัย ด้วยโค้ด 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

แท็กคีย์:

#ข่าวสาร

#ข่าวไอที

#ควรรู้

#การเปลี่ยนเว็บเป็นสีขาวดำ เพื่อ ร่วมไว้อาลัย ด้วยโค้ด 1 บรรทัด

แชร์:

สอบถามได้ที่ Line, Topvery Cloud IDC

เมื่อคุณเจอบัญชีนั้น, คลิก "เพิ่มเพื่อน" หรือ "ติดตาม" เปิดแอป LINE บนอุปกรณ์ของคุณ ไปที่แท็บ เพื่อน ที่มุมล่างขวา กดที่ไอคอน เพิ่มเพื่อน ที่อยู่บนขวามือ ในหน้าต่างที่ปรากฏขึ้น, คุณสามารถค้นหาบัญชี LINE Official ที่ต้องการด้วยชื่อ เมื่อคุณเจอบัญชีนั้น, คลิก เพิ่มเพื่อน หรือ ติดตาม

แอดไลน์ ID @topvery
แอดไลน์ ID @topvery คลิก..?