วิธีเปลี่ยนสีและแบบอักษรในเทมเพลต Joomla

เปลี่ยนสีและแบบอักษรได้จากตัวเลือกของ Template Style หากเทมเพลตมีให้ หรือเพิ่ม CSS กำหนดเองในไฟล์ที่เหมาะสม วิธีและชื่อเมนูแตกต่างกันไปตามเทมเพลต ก่อนแก้ไขควรสำรองข้อมูลและตรวจผลบนหน้าเว็บจริงทั้งคอมพิวเตอร์และมือถือ

❶ ตรวจว่ามีตัวเลือกสำเร็จรูปหรือไม่

ใน Joomla 5 ไปที่ System → Templates Panel → Site Templates Styles แล้วเปิดสไตล์ของเทมเพลตที่ใช้อยู่ มองหาตัวเลือกด้านสี แบบอักษร หรือรูปแบบการแสดงผล โดยมักอยู่ในแท็บ Advanced หรือแท็บที่ผู้พัฒนาเทมเพลตจัดไว้

① เปลี่ยนสีจากตัวเลือกของเทมเพลต

หากมีตัวเลือก Color Theme, Colour Scheme หรือชื่อใกล้เคียง ให้เลือกสีที่ต้องการแล้วบันทึก จากนั้นเปิดหน้าเว็บไซต์เพื่อตรวจสีพื้นหลัง เมนู ลิงก์ และปุ่ม

② เปลี่ยนแบบอักษรจากตัวเลือกของเทมเพลต

หากมีตัวเลือก Fonts Scheme ให้เลือกชุดแบบอักษรที่ต้องการ ตัวเลือกอาจมีเฉพาะบางเทมเพลต เช่น Cassiopeia มีการตั้งค่าสีและชุดแบบอักษรในหน้าแก้ไข Template Style

③ บันทึกและตรวจผล

กด Save หรือ Save & Close แล้วรีเฟรชหน้าเว็บไซต์ หากยังเห็นค่าเดิม ให้ตรวจว่าแก้ Template Style ที่หน้าเว็บใช้อยู่ และตรวจแคชของเว็บไซต์หรือเบราว์เซอร์

❷ เปลี่ยนสีด้วย CSS เมื่อไม่มีตัวเลือก

หากเทมเพลตไม่มีตัวเลือกสีที่ต้องการ อาจเพิ่ม CSS แบบกำหนดเอง วิธีวางไฟล์ขึ้นอยู่กับเทมเพลตและเวอร์ชันที่ใช้อยู่

① สำรองข้อมูลก่อนแก้ไข

สำรองไฟล์ที่จะแก้ก่อนทุกครั้ง และตรวจคู่มือเทมเพลตว่ามีพื้นที่สำหรับ CSS เพิ่มเติม เช่น user.css หรือไม่ หลีกเลี่ยงการแก้ไฟล์หลักของเทมเพลตโดยตรง เพราะการอัปเดตอาจเขียนทับการเปลี่ยนแปลง

② เพิ่ม CSS สีตัวอย่าง

ตัวอย่างด้านล่างใช้เปลี่ยนสีตัวอักษรหัวข้อและสีพื้นหลังส่วนหัวในเทมเพลตที่มีชื่อคลาสตรงกัน:

h1,
h2,
h3 {
  color: #174a7e;
}

.container-header {
  background-color: #17324d;
  background-image: none;
}

ชื่อคลาสอย่าง .container-header เป็นตัวอย่างจาก Cassiopeia อาจใช้ไม่ได้กับเทมเพลตอื่น หากเพิ่มแล้วไม่เห็นผล ให้ตรวจโครงสร้างและชื่อคลาสของเทมเพลตที่ใช้อยู่

③ บันทึกแล้วตรวจสีจริง

ตรวจว่าข้อความยังอ่านง่ายบนพื้นหลัง และสีลิงก์หรือปุ่มยังแตกต่างจากข้อความทั่วไป ปรับค่าโค้ดสีจนได้ผลลัพธ์ที่ต้องการ

❸ เปลี่ยนแบบอักษร

เทมเพลตบางชุดมีชุดแบบอักษรให้เลือก ส่วนกรณีที่ต้องใช้แบบอักษรเฉพาะ อาจตั้งค่าด้วย CSS หรือใช้วิธีติดตั้งฟอนต์ที่ผู้พัฒนาเทมเพลตรองรับ

① เลือกชุดแบบอักษรที่เทมเพลตเตรียมไว้

เริ่มจากตัวเลือก Fonts Scheme ของ Template Style หากมี การใช้ชุดที่เทมเพลตเตรียมไว้ช่วยลดขั้นตอนและปัญหาการเรียกใช้ฟอนต์ผิดตำแหน่ง

② กำหนดฟอนต์ด้วย CSS

หากต้องการใช้ฟอนต์ที่ติดตั้งหรือโหลดไว้ในเว็บไซต์แล้ว สามารถกำหนดตัวอย่าง CSS ได้ดังนี้:

body {
  font-family: "Noto Sans Thai", sans-serif;
}

ชื่อ "Noto Sans Thai" ต้องตรงกับชื่อฟอนต์ที่เว็บไซต์เรียกใช้งานได้ หากฟอนต์ยังไม่ได้ติดตั้งหรือโหลดไว้ในเว็บ การใส่ชื่อใน CSS อย่างเดียวอาจไม่ทำให้ฟอนต์ปรากฏ

③ ตรวจการอ่านภาษาไทยและการแสดงผล

เปิดหน้าเว็บหลายประเภทและตรวจอักษรไทย สระ วรรณยุกต์ ระยะบรรทัด และความหนาของตัวอักษร หากข้อความแน่นหรืออ่านยาก ให้เลือกฟอนต์ที่อ่านง่ายและปรับขนาดหรือระยะบรรทัดให้เหมาะสม

❹ ตรวจสอบก่อนเผยแพร่

① ตรวจความคมชัดของสี

ตัวอักษรกับพื้นหลังควรมีความต่างมากพอให้อ่านง่าย ตรวจเมนู ปุ่ม ลิงก์ และข้อความเล็กเป็นพิเศษ

② ตรวจหน้าจอหลายขนาด

ทดสอบบนมือถือ แท็บเล็ต และคอมพิวเตอร์ เพราะสีหรือขนาดตัวอักษรที่ดูพอดีบนจอใหญ่ อาจแสดงไม่เหมาะบนจอเล็ก

③ ตรวจหลังอัปเดตหรือเปลี่ยนสไตล์

หากสีหรือแบบอักษรกลับไปเป็นค่าเดิม ให้ตรวจว่า CSS กำหนดไว้ในไฟล์ที่เหมาะสมหรือไม่ และตรวจว่า Template Style ที่แก้เป็นสไตล์ที่หน้าเว็บใช้อยู่

สำหรับเว็บไซต์ที่ ComSiam ดูแล ควรเปลี่ยนสีและแบบอักษรบนเว็บทดสอบก่อน แล้วตรวจความอ่านง่ายและความสม่ำเสมอของทุกหน้า

❺ สรุป

เริ่มเปลี่ยนสีและแบบอักษรจากตัวเลือกของ Template Style ก่อน หากไม่มีตัวเลือกที่ต้องการ ให้ใช้ CSS ในไฟล์ที่เทมเพลตรองรับและสำรองข้อมูลก่อนแก้ไข จากนั้นตรวจความคมชัด การอ่านภาษาไทย และการแสดงผลบนมือถือกับคอมพิวเตอร์ให้ครบ

การเลือกฟอนต์ที่อ่านง่ายและใช้สีอย่างสม่ำเสมอช่วยให้เว็บไซต์ดูเป็นระเบียบ โดยทีม ComSiam ควรตรวจทุกหน้าสำคัญหลังบันทึก เพื่อให้แน่ใจว่าการปรับแต่งไม่ทำให้ส่วนอื่นอ่านยากหรือแสดงผลผิดปกติ