จัดการตกแต่ง Astroid Framework ตอนที่ 3
มาปรับแต่งหัวเว็บกันต่อครับ หลังจากที่เราได้ใช้รูปแบบข้อความหัวเว็บจนถูกใจในรูปแบบฟัอนต์และสีสันแล้ว เรายังสามารถเพิ่ม Tag Line (คำอธิบายสั้นๆ ที่สื่อถึงเว็บไซต์เรา) ดังภาพตัวอย่างนี้ JoomlaTest คือ หัวเว็บ (Header) ส่วน "เรียนรู้การใช้ Joomla CMS" คือ Tag Line นะครับ
- เราสามารถจัดการเพิ่มเติมในส่วนนี้ได้ ณ จุดเดียวกันกับการปรับรูปแบบใช้ฟ้อนต์ (Text) แทนรูปภาพนั่นเอง โดยการป้อนข้อความที่เราต้องการลงในช่อง Tag Line ได้เลยทั้งภาษาไทยอังกฤษ โดยมีเงื่อนไขว่า ถ้าเป็นภาษาไทยจะต้องไปแก้ไขรูปแบบฟ้อนต์ที่รองรับภาษาไทยด้วยนะ ดังภาพ
- เมื่อเราป้อนข้อความแล้ว ก็สามารถปรับเลือกฟ้อนต์และสีสันได้ ในตัวอย่างเนื่องจากมีภาษาไทย จึงได้กำหนดฟ้อนต์เป็น Google Fonts โดยเลือกฟ้อนต์ชื่อ K2D จัดการเปลี่ยนสีตามต้องการ ปัญหาที่เกิด คือ Header กับ Tag Line มักจะซ้อนทับกัน (จากรูปแบบตัวอักษรที่แตกต่างกันมาก) วิธีแก้คือการไปปรับระยะห่างระหว่างแถว (Line Height) ให้มีระยะมากน้อยจนบรรทัดทั้งสองข้อความมีความห่างกันตามต้องการ (อาจจะปรับระยะทั้ง Haeder และ Tag Line เพื่อความสมดุลย์เหมาะสมตามต้องการ) ดังภาพ
- ต่อไปเราจะเลือกใช้หัวเว็บแบบเป็นรูปภาพ (Image) บ้าง เมื่อคลิกที่ปุ่ม Image ของ Logo Type ก็จะได้หน้าตาแบบภาพข้างล่างนี้ หัวข้อ Logo Link เลือกเป็น Default (คือเมื่อผู้ชมคลิกที่ Logo Image จะกลับมาหน้าแรกของเว็บไซต์เสมอ) หากต้องการให้ไปที่หน้าอื่นก็เลือก Custom แล้วจะมีช่องให้ใส่ลิงก์ url ที่ต้องการ ถ้าเลือก None ก็จะเป็นการคลิกแล้วอยู่หน้าเดิม
- ในส่วน Default Logo จะเห็นรูปของ astroid เราจะเปลี่ยนรูปด้วยการคลิกที่ Change Image ให้เราไปเลือกรูปที่ได้ตระเตรียมไว้ (ในขนาดความกว้างxสูง = 200x60px จะเหมาะที่สุด ถ้าโตกว่านั้นรูปภาพจะถูกย่อลงมาให้ความกว้างเท่ากับ 200px อัตโนมัติ) เลือกเลยสิ
- จะเห็นว่ามี Mobile Logo (โลโก้ที่แสดงในอุปกรณ์ประเภทโทรศัพท์ แท็ปเล็ต) ก็เลือกได้เลย เขาจะไปบีบย่อแสดงให้อัตโนมัติ ข้อสำคัญคือ ไม่มีช่อง Tag Line ให้กำหนดเพิ่มเติมนะ ถ้าต้องการให้มีก็ใส่ในรูปภาพไว้เลยทีเดียว จบ ทำการบันทึกแล้วไปดูการแสดงผลกัน
- สำเร็จแล้วตามใจนึก แต่พอเลื่อนหน้าลงไปดูข้างล่าง พลันปรากฏ...
- Logo หัวเว็บใยไม่เปลี่ยนล่ะ! ยังจำได้ไหมว่า Astroid framework เขามีหัวเว็บหลักและหัวเว็บรองแบบคงที่อยู่ Sticky Header นั่นไง เราต้องเข้าไปจัดการแก้ไขด้วยว่า อยากให้แสดงหรือไม่ ถ้าแสดงก็ต้องเปลี่ยน Logo Image ให้เขาด้วยตามภาพ
- เลือกเปลี่ยน Sticky Header Logo ใช้รูปเดิมได้เลย ทำการบันทึก ก็จะได้หัวเว็บที่เหมือนกัน สำหรับสีพื้นหลัง สีอักษรเมนูด้านบน เราจะบอกอีกทีภายหลังนะ ไปเรื่องอื่นก่อน เราเริ่มต้นที่ฟ้อนต์แสดงผลหน้าเว็บในตำแหน่งต่างๆ ซึ่งมี 3 ส่วนสำคัญ คือ ฟ้อนต์สำหรับเนื้อหาทั้งหมด Body ฟ้อนต์สำหรับเมนู Menu และฟ้อนต์สำหรับหัวเรื่อง (H1, H2, H3, H4, H5, H6) ดังภาพ
- เราจะกำหนดฟ้อนต์เป็นแบบ Custom เลือกฟ้อนต์ Google ในส่วน Body เราจะใช้ฟ้อนต์ Sarabun ที่มีหัวกลมเพื่อให้อ่านง่ายๆ ในทุกหน้า ส่วนเมนูผมจะใช้ฟ้อนต์ Mitr และ ส่วนหัวเรื่อง (H1-6) จะใช้ฟ้อนต์ Kanit ทั้งหมด
- เสร็จทุกหัวข้อแล้วให้ทำการบันทึก (Save) ไปดูผลลัพธ์ในหน้าหลักกัน จะเห็นว่าฟ้อนต์ที่แสดงผลเปลี่ยนไปแล้ว กรอบสีเขียวคือ เมนู Menu กรอบสีน้ำเงินคือ หัวเรื่อง (H1-6) และกรอบสีม่วงอ่อนคือ ส่วนเนื้อหา (Body) ได้เปลี่ยนไปแล้วตามต้องการ (ส่วนใครจะชอบฟ้อนต์ไหนในเว็บของท่านก็ไปลองเลือกสรรกันดูนะครับ)
ปรับแต่งเทมเพลต Astroid Framework ตอนที่ 1 | ตอนที่ 2 | ตอนที่ 3 | ตอนที่ 4 | ตอนที่ 5