การติด “โบว์ดำ” บนเว็บไซต์ถือเป็นหนึ่งในวิธีแสดงความอาลัยอย่างสุภาพและเรียบง่าย โดยไม่กระทบต่อประสบการณ์การใช้งานของผู้เข้าชมเว็บไซต์ ที่เปลี่ยนการเปลี่ยนเป็นขาวดำ
ในบทความนี้ เราจะมาแนะนำ วิธีติดตั้ง Black Ribbon (โบว์ดำ) แบบง่าย ๆ ผ่าน CSS พร้อมตัวอย่างโค้ดที่สามารถใช้ได้ทั้งบนเว็บไซต์ HTML ธรรมดา และบน WordPress
วิธีติดตั้งบนเว็บไซต์ HTML
หากคุณมีเว็บไซต์แบบเขียนโค้ดเอง (เช่น index.html)
สามารถทำได้ง่าย ๆ ดังนี้:
-
ดาวน์โหลดหรือคัดลอก URL รูปโบว์ดำไปไว้ในโค้ด CSS
-
วางโค้ด CSS ด้านบนใน
<style>ภายใน<head>ของเว็บไซต์ เช่น
<head>
<meta charset=”utf-8″>
<title>เว็บไซต์ของฉัน</title>
<style>
/* —- Black Ribbon (Top-Right) —- */
:root{
–bow-size: 120px; /* ปรับขนาดโบว์ */
–bow-offset: 16px; /* ระยะห่างจากขอบ */
}
/* แสดงโบว์เป็นตกแต่ง ไม่บังการคลิก */
body::after{
content: “”;
position: fixed;
top: var(–bow-offset);
right: var(–bow-offset);
width: var(–bow-size);
height: var(–bow-size);
background: url(“https://storage.googleapis.com/media.nconnect.co.th/Black-bow.png”) no-repeat center / contain;
z-index: 9999;
pointer-events: none; /* ให้คลิกสิ่งที่อยู่ข้างใต้ได้ */
}
/* สำหรับตอนล็อกอินมีแถบ Admin Bar ของ WordPress */
body.admin-bar::after{
top: calc(var(–bow-offset) + 32px);
}
@media (max-width: 782px){
body.admin-bar::after{
top: calc(var(–bow-offset) + 46px);
}
}
/* ปรับขนาดบนหน้าจอมือถือ */
@media (max-width: 480px){
:root{ –bow-size: 80px; –bow-offset: 10px; }
}</style>
</head>
วิธีติดตั้งบน WordPress ผ่าน Customize
-
ข้าสู่ระบบหลังบ้าน WordPress
-
ไปที่เมนู Appearance (รูปลักษณ์) → Customize (ปรับแต่ง)
-
เลือก Additional CSS (CSS เพิ่มเติม)
-
วางโค้ดทั้งหมดด้านบนลงไป
-
คลิก Publish (เผยแพร่)
Code CSS ที่วางใน Customize ของ WordPress
/* —- Black Ribbon (Top-Right) —- */
:root{
–bow-size: 120px; /* ปรับขนาดโบว์ */
–bow-offset: 16px; /* ระยะห่างจากขอบ */
}
/* แสดงโบว์เป็นตกแต่ง ไม่บังการคลิก */
body::after{
content: “”;
position: fixed;
top: var(–bow-offset);
right: var(–bow-offset);
width: var(–bow-size);
height: var(–bow-size);
background: url(“https://storage.googleapis.com/media.nconnect.co.th/Black-bow.png”) no-repeat center / contain;
z-index: 9999;
pointer-events: none; /* ให้คลิกสิ่งที่อยู่ข้างใต้ได้ */
}
/* เผื่อเปิดใช้งานตอนล็อกอินมีแถบ Admin Bar ของ WP */
body.admin-bar::after{
top: calc(var(–bow-offset) + 32px); /* Desktop admin bar ~32px */
}
@media (max-width: 782px){
body.admin-bar::after{
top: calc(var(–bow-offset) + 46px); /* Mobile admin bar ~46px */
}
}
/* ปรับขนาดบนจอเล็ก */
@media (max-width: 480px){
:root{ –bow-size: 80px; –bow-offset: 10px; }
}
