foto1
Internet & Security
foto1
Learn to build your website
foto1
Try to our Goal!
foto1
Tip & Tricks to use Computer
foto1
Operating System


Our Sponsor

mod templates

Fonts Header & Contents.

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

mod template 35

ปกติการแสดงผลในส่วนนี้จะถูกควบคุมด้วยไฟล์ชื่อ Template.css กัน (โชคดีที่เทมเพลต Protostar นี้มีไฟล์ *.css เพียง 2 ไฟล์) แต่ก็ไม่ง่ายเลยนะขอบอกไว้ก่อน การแก้ไขจริงๆ ทำได้โดยตรงที่ไฟล์ในการจัดการเทมเพลตที่เมนู Extension > Templates > Templates > Mytemplate Detail and Files ดังภาพนี้ แต่ก็ไม่สะดวกเพราะมีหลายบรรทัด และค้นหาไม่สะดวกนัก

mod template 36

ในการแก้ไขนี้ผมจึงใช้ Dreamweaver มาทำการแก้ไขไฟล์บันทึกทับไฟล์เดิมแล้วแสดงผลสะดวกกว่าเยอะ

mod template 37

การใช้ฟอนต์ภาษาไทยก็ใช้ฟอนต์จาก Google ที่มีฟอนต์สวยๆ ให้เรานำมาใช้ฟรีๆ มากมาย ด้วยการ Embed ฟอนต์ด้วยคำสั่งข้างล่างนี้ในหัวไฟล์ Template.css ได้เลย ตัวอย่างผมเลือกเอาฟอนต์ Sarabun, Kanit, Mitr, Fahkwang มาใช้งานในส่วนต่างๆ (ในเทมเพลตนี้ใช้แค่สองตัวแรกเท่านั้นครับ ที่เหลื่อเผื่อไว้เฉยๆ)

mod template 38

@import url('https://fonts.googleapis.com/css?family=Sarabun|Kanit|Mitr|Fahkwang&display=swap');

จากนั้นค้นหาคำสั่ง font-family: ในส่วน Body และส่วนอื่นๆ ให้พบด้วยการกดปุ่ม Ctrl + F บนคีย์บอร์ด

mod template 39

แล้วเพิ่มฟอนต์ Sarabun ลงไปเพื่อให้เนื้อหาทั้งหมดแสดงภาษาไทยด้วยฟอนต์นี้ เนื่องจากฟอนต์ Sarabun มีขนาดค่อนข้างเล็กมากจึงเพิ่มขนาดจากเดิม font-size: 13px มาเป็น 16px พอเพิ่มขนาดแล้วก็เพิ่มระยะห่างระหว่างบรรทัดด้วย (ภาษาไทยมีทั้งสระบน-ล่างและวรรณยุกต์จึงต้องห่างนิด) line-height: 24px ดังภาพล่างนี้

mod template 40

เมื่อบันทึกไฟล์นี้ทับไฟล์เดิม แล้วไปดูผลในหน้าเว็บไซต์ด้วยการรีเฟรชบราวเซอร์ได้เลย

mod template 41

เป็นอันว่าการแสดงผลในส่วนเนื้อหาของเราสำเร็จแล้ว ต่อไปเป็นการแก้ที่ส่วนหัวข้อหลัก ตามปกติเราสามารถค้นหาได้ด้วยการคลิกเมาส์ขวาบริเวณหัวข้อนั้น เพื่อเลือก Inspect Element ดังภาพด้านล่าง

mod template 42

จะพบกับกรอบแสดงผลของโค๊ดในตำแหน่งนั้นว่า มีคำสั่งที่เกี่ยวข้องในส่วนนี้อะไรบ้าง ดังภาพ เราก็เอาโค้ดในส่วนนั้นไปค้นหาในไฟล์ template.css เพื่อแก้ไขการแสดงฟอนต์ดังกล่าว

mod template 43

โค๊ดในส่วนนี้คือ ที่วงรอบกรอบสี่เหลี่ยมสีเขียว ที่มีฟอนต์ Open Sans, sans-serif ซึ่งเมื่อแสดงเป็นฟอนต์ภาษาไทย คือ Tahoma ที่ผมก็อบปี้ไปค้นหาในไฟล์ template.css อยู่ตั้งนานก็ไม่เจอในส่วน body เลย เจอคำสั่ง h1, h2, h3, h4, h5, h6 ก็จัดการแก้ให้เป็นฟอนต์ Kanit แล้วก็ไม่แสดงผล งงสิครับ ไม่เคยเจอในเทมเพลตอื่นๆ เท่าที่เคยดัดแปลงแก้ไขมา

mod template 44

แล้วก็ถึงบางอ้อ! หลังผ่านไป 2 ชั่วโมงเมื่อสงสัยคำว่า Inherited from h1 เอ... มันสืบทอดมาจากคำสั่งนี้ที่ไหนหนอ... เพราะตัวเราได้แก้บรรทัดที่มีหัวเรื่องในไฟล์ template.css มาทั้งหมดแล้วนี่นา ก็เลยนึกได้ว่า มันน่าจะมาจากไฟล์ index.php ของเทมเพลตนี้แน่ๆ และแล้วก็หาเจอจริงๆ ครับ

mod template 45

แก้มันเสียเลย ด้วยการก็อบปี้คำสั่งมาไว้แล้วมาร์คไม่ให้แสดงผลในกรอบสี่เหลี่ยมสีเขียว แล้วไปแก้ในส่วน font-family: '" . $fontStyle . "'. ออกเป็น Kanit ที่ขีดเส้นใต้สีฟ้านั่นแหละครับ บันทึกไฟล์แล้วดูหน้าเว็บหลักด้วยการรีเฟรชทีหนึ่ง

mod template 46

เว็บไซต์ส่วนใหญ่เขาทำเมนูกันทางฝั่งซ้ายกัน เราอยากแปลกและแตกต่างเลยย้ายมาทางขวาเหมือนตอนเริ่มต้นดูดีกว่า (มั๊ง) ก็จัดไปเลยสิครับ รอช้าอยู่ใย (คงจำได้นะ ทำมาในตอนก่อนไง ย้อนกลับไปอ่านอีกรอบนะ)

mod template 47

เพื่อให้แตกต่างไปอีกก็อยากเปลี่ยนพื้นหลังที่อักษร A-B เป็นรูปภาพแบบลายไม้สวยๆ ส่วนในกรอบ C ก็อยากใส่สีไล่ระดับเฉดสี (Gradiant) คงจะสวยงามขึ้นมาลองดูกันหน่อยสิ เผื่อใครคิดเหมือนผู้เขียน ขั้นแรกก็ไปหาภาพพื้นหลังลายไม้สวยๆ จากเพื่อนกู (Google) มาเสียก่อน แล้วบันทึกเก็บไว้ในโฟลเดอร์เก็บภาพในเทมเพลตของเรา ในที่นี้คือ mytemplate/images/plywood.jpg (ตัวอย่างผู้เขียนบันทึกไว้ในชื่อ plywood.jpg)

จากนั้นไปที่ไฟล์ template.css ที่เราเคยแก้ฟอนต์ให้แสดงผลด้วยฟอนต์ Sarabun นั่นแหละครับ เพิ่มคำสั่งเรียกภาพพื้นหลังขึ้นมาแสดงแทนสีด้วยคำสั่ง background-image: url(/new/../images/plywood.jpg); ดังภาพ

mod template 48

 บันทึกไฟล์ แล้วแสดงผลได้ตามภาพล่างนี้ เย้!!! สำเร็จแล้ว ชอบภาพอะไรก็ไปหามาให้เหมาะกับเรื่องราวของเว็บเรานะ

mod template 49

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

mod template 50

จะพบว่าในบล็อกนี้มีชื่อคลาสว่า well มีสีพื้นหลัง background-color: #f5f5f5 เราก็ไปค้นหาและแก้ตรงนี้แหละ เพื่อทำการแก้ไขให้ได้ตามใจเรา แล้วสีแบบไล่เฉด (Gradiant) จะเขียนอย่างไร ไม่ยากไปที่เว็บเขามีให้บริการสิครับชื่อว่า Ultimate CSS Gradient Generator ดังรูปล่างนี่แหละ

mod template 52

เลือกเฉดสีที่ต้องการในกรอบแดงบน เอาสีใด แบบไหน ปรับค่าที่ต้องการตามความเหมาะสม ทิศทางการเกลี่ยสี พอใจแล้วก็อบปี้โค๊ดในกรอบแดงขวามือไปวางในไฟล์ template.css ได้ดังภาพล่างนี้

mod template 51

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

mod template 53

ดูเว็บไซต์ Demo for Joomla! คลิกเลยครับ

เรียบร้อยแล้วนะครับ ขอย้ำว่า "ถ้าคุณอยากมีความสามารถในการแก้ไขเทมเพลต การตกแต่งเว็บไซต์ จัดการความสวยงามต่างๆ ผู้ทำควรศึกษาพื้นฐานคำสั่งภาษา HTML, CSS, PHP ให้มีพื้นฐานพอสมควรบ้างนะครับ รวมทั้งความสามารถในการตกแต่งภาพกราฟิกต่างๆ พวกหัวเรื่อง ภาพประกอบต่างๆ จึงจะประสบผลสำเร็จครับ" เอากันพอหอมปากหอมคอกันเพียงเท่านี้นะครับ ค้นหาความรู้จากเว็บไซต์ อ่านหนังสือคู่มือต่างๆ ให้มาก ขอให้สนุกกับการทำงานนะครับ

สนับสนุนให้ Easyhome อยู่รับใช้ท่านตลอดไป ด้วยการคลิกแบนเนอร์ไปเยี่ยมผู้สนับสนุนของเราด้วยครับ
นโยบายความเป็นส่วนตัว Our Policy

ยินดีต้อนรับทุกท่านสู่เว็บไซต์ Easyhome in Thailand เว็บไซต์ของเรา ใช้คุกกี้ (Cookies) เพื่อให้ท่านได้รับประสบการณ์การใช้งานที่ดียิ่งขึ้น อ่านนโยบายคุ้มครองข้อมูลส่วนบุคคล (Privacy Policy) และนโยบายคุกกี้ (Cookie Policy)