วิธีปรับความกว้างเนื้อหาและคอลัมน์ในเว็บไซต์ Joomla

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

❶ ตรวจตัวเลือกความกว้างของเทมเพลต

เริ่มจากตรวจว่าเทมเพลตมีตัวเลือกควบคุมความกว้างหรือ Layout ให้ใช้หรือไม่

① เปิด Template Style

ใน Joomla 5 ไปที่ System → Templates Panel → Site Templates Styles แล้วเปิดสไตล์ที่ใช้กับเว็บไซต์ จากนั้นตรวจแท็บ Advanced หรือแท็บที่เกี่ยวกับ Layout

② เลือกแบบ Static หรือ Fluid หากมี

ตัวอย่างเช่น Cassiopeia มีตัวเลือก Layout แบบ Static และ Fluid โดย Static จำกัดความกว้างสูงสุด ส่วน Fluid ขยายพื้นที่ตามหน้าจอ ตัวเลือกและชื่ออาจแตกต่างกันในเทมเพลตอื่น

③ บันทึกและตรวจหน้าเว็บ

กด Save แล้วเปิดหน้าเว็บไซต์ใหม่ เปรียบเทียบหน้าแรก หน้าบทความ และหน้าอื่น ๆ ว่าความกว้างอ่านง่ายและไม่ทำให้เนื้อหาแน่นเกินไป

❷ ปรับคอลัมน์จากตำแหน่งโมดูล

ใน Joomla คอลัมน์ด้านข้างมักแสดงโมดูลใน Position ของเทมเพลต เช่น แถบด้านข้างซ้ายหรือขวา การเพิ่มหรือลบโมดูลจากตำแหน่งเหล่านี้อาจทำให้พื้นที่เนื้อหาหลักเปลี่ยนตามการออกแบบของเทมเพลต

① ตรวจโมดูลในคอลัมน์ด้านข้าง

ไปที่ System → Manage Panel → Site Modules แล้วดูว่าโมดูลใดอยู่ใน Position ด้านข้าง หากมีโมดูลที่ไม่จำเป็น ให้ตรวจว่าปิดหรือกำหนดให้แสดงเฉพาะบางหน้าได้หรือไม่

② ตรวจการกำหนดหน้าที่แสดง

เปิดโมดูลที่เกี่ยวข้อง แล้วตรวจ Menu Assignment หากต้องการให้คอลัมน์ปรากฏเฉพาะบางหน้า ให้กำหนดหน้าแสดงผลให้ตรงกับการใช้งาน

③ ทดสอบหน้าเมื่อไม่มีโมดูลด้านข้าง

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

❸ ใช้ CSS เมื่อเทมเพลตไม่มีตัวเลือกที่ต้องการ

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

① ระบุส่วนเนื้อหาที่ต้องการปรับ

ใช้เครื่องมือ Inspect ในเบราว์เซอร์เลือกพื้นที่เนื้อหาหลัก แล้วตรวจชื่อ class หรือ id ที่เทมเพลตใช้ หลีกเลี่ยงการเดาชื่อ เพราะ CSS อาจไม่ส่งผลกับส่วนที่ต้องการ

② กำหนดความกว้างสูงสุด

ตัวอย่างนี้ใช้ .content-wrapper เป็นชื่อสมมติ ต้องเปลี่ยนให้ตรงกับคลาสจริงของเทมเพลต:

.content-wrapper {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

กำหนด max-width ตามความเหมาะสมของเนื้อหา หากบทความมีบรรทัดยาวเกินไป ให้นำค่าความกว้างลงหรือปรับเฉพาะส่วนบทความแทนทั้งเว็บไซต์

③ ปรับคอลัมน์อย่างระมัดระวัง

โครงสร้างคอลัมน์และชื่อคลาสแตกต่างกันตามเทมเพลต หากต้องปรับสัดส่วนซ้ายขวาด้วย CSS ให้ตรวจโครงสร้างหน้าและกฎเดิมก่อน ทดลองทีละค่า และตรวจผลทั้งมือถือกับคอมพิวเตอร์

❹ ตรวจความกว้างบนอุปกรณ์หลายขนาด

① ตรวจจอคอมพิวเตอร์และแท็บเล็ต

ดูว่าเนื้อหาไม่กว้างเต็มจอจนอ่านยาก และคอลัมน์ด้านข้างไม่เบียดพื้นที่บทความ

② ตรวจมือถือ

ยืนยันว่าเนื้อหาเรียงลงเป็นแนวตั้งตามเหมาะสม ไม่มีการเลื่อนแนวนอน และโมดูลที่ไม่จำเป็นไม่กินพื้นที่มากเกินไป

③ ตรวจหน้าหลายประเภท

เปิดหน้าแรก หน้าบทความ หน้าหมวดหมู่ และหน้าที่ใช้ Extension เพราะแต่ละหน้ามีโครงสร้างและความกว้างต่างกันได้

สำหรับเว็บไซต์ที่ ComSiam ดูแล ควรปรับบนเว็บทดสอบก่อน แล้วตรวจหน้าสำคัญทั้งบนจอใหญ่และมือถือเพื่อป้องกัน CSS กระทบส่วนอื่น

❺ แก้ปัญหาที่พบบ่อย

① เปลี่ยนค่า Layout แล้วไม่เห็นผล

ตรวจว่าแก้ Template Style ที่หน้านั้นใช้อยู่ หากมีการกำหนดสไตล์เฉพาะให้บางเมนู หน้านั้นอาจใช้สไตล์อื่น

② เนื้อหายังแคบแม้ปิดโมดูลด้านข้าง

เทมเพลตอาจกำหนดความกว้างคงที่หรือมี CSS จำกัดไว้ ตรวจตัวเลือก Layout และคลาสของพื้นที่เนื้อหาก่อนเพิ่ม CSS ใหม่

③ หน้าล้นจอหลังปรับความกว้าง

ตรวจตาราง รูปภาพ โมดูล หรือ CSS ที่กำหนดความกว้างตายตัว ปรับองค์ประกอบนั้นให้ยืดหยุ่น แล้วทดสอบหน้าจอเล็กอีกครั้ง

❻ สรุป

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