ข้ามไปเนื้อหา

วิธีใช้:แคสเคดดิงสไตล์ชีตส์

จากวิกิพีเดีย สารานุกรมเสรี

สไตล์ผู้ใช้ (อังกฤษ: user style) เป็นการใช้โค้ดภาษาแคสเคดดิงสไตล์ชีตส์ (CSS) เพื่อปรับแต่งรูปลักษณ์การแสดงผลของวิกิพีเดียให้ตรงตามความต้องการของคุณเอง ไม่ว่าจะเป็นการเปลี่ยนฟอนต์ การปรับโทนสี หรือการซ่อนส่วนประกอบต่าง ๆ ที่คุณไม่ใช้งาน โดยโค้ดเหล่านี้จะบันทึกอยู่ในหน้าย่อยส่วนตัว และจะมีผลเฉพาะเมื่อคุณล็อกอินเข้าสู่ระบบเท่านั้น

พื้นฐานการใช้งาน

[แก้]

วิกิพีเดียยอมรับการตกแต่งผ่านสไตล์ชีตในระดับบุคคล โดยคุณต้องสร้างหน้าย่อยภายใต้ชื่อผู้ใช้ของคุณเอง ดังนี้:

วิธีทำให้การเปลี่ยนแปลงมีผล

[แก้]

หลังจากที่คุณกด "บันทึก" โค้ดในหน้า CSS แล้ว คุณต้องทำการ ล้างแคช (Bypass cache) ของเบราว์เซอร์เพื่อให้เห็นการเปลี่ยนแปลงที่เกิดขึ้นทันที:

  • Windows/Linux: กด Ctrl + F5 หรือ Ctrl + Shift + R
  • Mac (Safari/Firefox): กด Command + Shift + R หรือกด Shift ค้างไว้แล้วคลิกปุ่มรีโหลด

ลำดับชั้นของการกำหนดสไตล์

[แก้]

การแสดงผลจะไล่ลำดับการอ่านโค้ดจากระดับโครงสร้างใหญ่มาจนถึงระดับบุคคล ดังนี้:

  1. Site-wide default: สไตล์พื้นฐานจากซอฟต์แวร์ MediaWiki
  2. Site-wide local: สไตล์ที่ผู้ดูแลระบบตั้งไว้สำหรับผู้ใช้ทุกคนในวิกิพีเดียไทยที่ MediaWiki:Common.css
  3. Skin-specific: สไตล์เฉพาะสกินนั้น ๆ เช่น MediaWiki:Vector.css
  4. User-specific (ของคุณ): นี่คือจุดที่คุณเขียนโค้ดทับ (Override) ค่าเดิมได้ หากต้องการบังคับใช้สไตล์ให้มีผลแน่นอน สามารถเติมคำสั่ง !important ไว้ท้ายบรรทัดได้

ตัวอย่างการปรับแต่งที่น่าสนใจ

[แก้]

1. การปรับแต่งข้อความและฟอนต์

[แก้]
/* เปลี่ยนฟอนต์ภาษาไทยทั้งเว็บให้เป็นฟอนต์ที่อ่านง่ายขึ้น */
body { font-family: "Sarabun", "Tahoma", sans-serif !important; }

/* ขยายขนาดตัวอักษรในส่วนเนื้อหาให้ใหญ่ขึ้นเล็กน้อย */
#bodyContent { font-size: 110%; }

/* เปลี่ยนสีลิงก์ที่ยังไม่ได้คลิกและลิงก์ที่คลิกแล้ว */
a { color: #0044bb !important; }
a:visited { color: #551a8b !important; }

2. การตกแต่งและปรับโทนสีหน้าเว็บ

[แก้]
/* ทำมุมโค้งมนให้กับส่วนกรอบเนื้อหาหลัก */
#content { border-radius: 12px; border: 1px solid #dcdcdc; }

/* เปลี่ยนสีพื้นหลังภายนอกเพื่อถนอมสายตา */
body { background-color: #f5f5f5 !important; }

/* เน้นพื้นหลังกล่องข้อความอ้างอิงให้ชัดเจนขึ้น */
blockquote { background: #f9f9f9; border-left: 5px solid #ccc; padding: 10px; }

3. การซ่อนส่วนประกอบต่าง ๆ ที่ไม่จำเป็น

[แก้]
/* ซ่อนโลโก้วิกิพีเดียบริเวณมุมซ้ายบน */
#p-logo { display: none; }
#mw-panel { padding-top: 0; }

/* ซ่อนคำเตือนเรื่องการประกาศลิขสิทธิ์ใต้กล่องแก้ไข */
#editpage-copywarn { display: none; }

/* ซ่อนข้อความแจ้งเตือนจากระบบ (Site Notice) */
#siteNotice { display: none; }

4. การจัดการเมนูส่วนตัวและแถบข้าง

[แก้]
/* เปลี่ยนสีแถบนำทางด้านข้าง (Sidebar) */
.mw-panel { background-color: #f0f8ff; }

/* ตกแต่งชื่อผู้ใช้ด้านบนให้เด่นชัด */
#pt-userpage a { color: #d45d00 !important; font-weight: bold; }

ข้อควรระวัง

[แก้]
  • ความเป็นส่วนตัว: หน้า CSS ของคุณเป็นหน้าสาธารณะที่ผู้อื่นสามารถเข้ามาดูได้ โค้ดทั้งหมดจะเผยแพร่ภายใต้สัญญาอนุญาต CC-BY-SA
  • ความปลอดภัย: หลีกเลี่ยงการคัดลอกโค้ดสคริปต์หรือสไตล์จากแหล่งที่ไม่รู้จัก เพราะอาจส่งผลต่อการแสดงผลที่ผิดเพี้ยนไป
  • การแก้ไข: หากบันทึกแล้วหน้าเว็บมีปัญหา คุณสามารถกลับไปที่หน้า CSS และลบโค้ดส่วนที่ผิดพลาดออกเพื่อคืนค่าเดิม

ข้อมูลเพิ่มเติม

[แก้]
เข้าถึงจาก "https://th.wikipedia.org/w/index.php?title=วิธีใช้:แคสเคดดิงสไตล์ชีตส์&oldid=12962854"