วิธีเปลี่ยนเว็บไซต์ให้เป็นสีขาวดำ สำหรับ Webmaster

เปลี่ยนธีมเว็บไซต์ให้เป็นสีขาวดำ


สำหรับใครที่ต้องการเปลี่ยนหน้าเว็บของตัวเองให้มีลักษณะธีมเป็นสีขาวดำ สามารถปรับแต่งได้ง่ายๆ โดยไม่จำเป็นต้องเข้าไปแก้ทุกรูปภาพหรือข้อความอื่นๆ โดยท่านสามรถเปลี่ยน css เข้าไปเพื่อเปลี่ยนหน้าเว็บให้กลายเป็นสีขาวดำได้ดังต่อไปนี้

ทำเว็บไซต์เป็นสีขาวดำ

ให้ใส่โค้ดด้านล่างนี้ในไฟล์ css ของเว็บไซต์เรา โดยไฟล์ส่วนใหญ่จะเป็น style.css สำหรับใครที่ใช้ CMS ของ WordPress ให้เ้ข้าไปแก้ที่ Theme ที่เราใช้งานอยู่จากนั้นให้เข้าไปที่ style.css ของธีมก็เพิ่มโค้ดด้านล่างนี้ไปได้

img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
html {
-webkit-filter: grayscale(100%);
}

ตัวอย่างการใส่โค้ดลงใน style.css ของ Wrodpress ให้เข้าไปยังธีมที่เราใช้งานอยู่ จากนั้นให้ดาวน์โหลดไฟล์ style.css มา

เพิ่มโค้ดด้านบนไปใส่ด้านล่าง ลักษณะดังดภาพด้านล่าง

โค้ดสีขาวดำเว็บไซต์

สำหรับเว็บไซต์ที่ไม่มีไฟล์ css ให้ใส่ โค้ดด้านล่างนี้ไปก่อน <body> ใน HTML ลักษณะดังต่อไปนี้

<style>
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
html {
-webkit-filter: grayscale(100%);
}
</style>

ตัวอย่างการใส่โค้ดแบบไม่มีไฟล์ CSS

ตัวอย่างใส่ css สีขาวดำในเว็บไซต์ สำหรับไม่มีไฟล์ CSS
ตัวอย่างใส่ css สีขาวดำในเว็บไซต์ สำหรับไม่มีไฟล์ CSS

สำหรับ CMS อื่นๆเราสามารถใส่โค้ดพวกนี้ได้ในแบบ CSS (โค้ดบนสุด) ในส่วนของ .css ของธีมที่เราใช้งานอยู่ ใช้ได้หมดทุก CMS ที่เราใช้งานครับลองนำไปใช้กันดู

เพิ่มเติมรองรับ IE 6-9

img {
-webkit-filter: grayscale(70%);
-moz-filter: grayscale(70%);
-ms-filter: grayscale(70%);
-o-filter: grayscale(70%);
filter: grayscale(70%);
filter: gray;
}
html {
-webkit-filter: grayscale(70%);
-moz-filter: grayscale(70%);
-ms-filter: grayscale(70%);
-o-filter: grayscale(70%);
filter: grayscale(70%);
filter: gray;
}

About modify 3752 Articles
สามารถนำบทความไปเผยแพร่ได้อย่างอิสระ โดยกล่าวถึงแหล่งที่มา เป็นลิงค์กลับมายังบทความนั้นๆ บทความอาจมีการพิมพ์ตกเรื่องภาษาไปบ้าง ต้องขออภัย พยามจะพิมพ์ผิดให้น้อยที่สุด (ทำเว็บคนเดียวไม่มีคนตรวจทาน) บทความที่สอนเรื่องต่างๆ กรุณาอ่านบทความให้เข้าใจก่อนโพสต์ถาม ติดตรงไหนสามารถถามได้ที่โพสต์นั้นๆ

1 Comment

Leave a Reply

Your email address will not be published.




This site uses Akismet to reduce spam. Learn how your comment data is processed.