สั่งซื้อเทมเพลต
คลิปวิดีโอนี้เป็นคู่มือสอน "การจัดการรูปแบบ CSS เพิ่มเติม" (Custom CSS) สำหรับเว็บไซต์ที่ใช้ Template จาก Hitztheme ครับ ซึ่งเป็นการเปิดโอกาสให้ผู้ใช้งานสามารถปรับแต่งหน้าตาเว็บไซต์ได้ละเอียดกว่า Option มาตรฐานที่มีมาให้ใน Template ครับ [00:13]
สรุปเนื้อหาและขั้นตอนการปรับแต่งมีดังนี้:
1. ทำไมต้องใช้ CSS เพิ่มเติม? [00:18]
- แม้ Template จะมี Option การตั้งค่าพื้นฐานมาให้ (เช่น ปรับขนาดฟอนต์ H2 ทั่วทั้งเว็บ) แต่บางครั้งเราต้องการให้แต่ละส่วนมีขนาดไม่เท่ากัน (เช่น H2 ใน Content 1 เล็กกว่า H2 ใน Content 2) [02:50]
- การใช้ CSS เพิ่มเติมจะช่วยให้เรา "เขียนทับ" (Override) หรือเพิ่มสไตล์เฉพาะเจาะจงลงไปในตำแหน่งที่ต้องการได้ครับ [01:04]
2. การเข้าถึงเมนูตั้งค่า [01:56]
- ไปที่หลังบ้านของเว็บไซต์ เลือกเมนู Extensions > Templates > Styles
- คลิกเลือก Template ที่ใช้งาน และไปที่แถบ "CSS เพิ่มเติม" (Custom CSS) [03:14]
- ระบบจะแยกช่องสำหรับใส่ CSS ตามตำแหน่งต่างๆ ไว้ให้ (เช่น Top, Head, Slide, Content 1, Content 2 ฯลฯ) เพื่อให้ง่ายต่อการจัดการและไล่ตรวจสอบครับ [03:40]
3. วิธีการหาชื่อตำแหน่ง (Selector) [04:32]
- ใช้เครื่องมือ Inspect ของ Google Chrome (กด F12) เพื่อดูว่าส่วนที่เราต้องการปรับแต่งมี ID หรือ Class ชื่อว่าอะไร [05:00]
- ตัวอย่างในคลิป: ต้องการปรับ H2 ในส่วน Content 1 จึงใช้ Selector เป็น #content1 h2 [05:18]
4. ขั้นตอนการเขียนและนำไปใช้ [04:12]
- แนะนำให้ใช้โปรแกรมช่วยเขียน Code (เช่น Dreamweaver) เพื่อหาชื่อคำสั่งได้ง่ายขึ้น (เช่น font-size, padding, color) [08:29]
- เขียนโค้ด CSS ที่ต้องการ แล้วคัดลอกมาวางในช่องตำแหน่งที่สัมพันธ์กันในหลังบ้านเว็บไซต์ [06:10]
- กด Save แล้วรีเฟรชหน้าเว็บเพื่อดูผลลัพธ์ทันที [06:24]
5. การยกเลิกการตั้งค่า [07:46]
- หากไม่ต้องการใช้ CSS ที่เขียนเพิ่มแล้ว เพียงแค่ลบข้อความในช่อง CSS นั้นๆ ออก แล้วกด Save ระบบจะกลับไปใช้ค่ามาตรฐานของ Template ตามเดิมครับ [08:04]
ข้อแนะนำ: การศึกษาพื้นฐานเรื่อง CSS (Selector, Property, Value) จะช่วยให้คุณปรับแต่งเว็บไซต์ได้หลากหลายและสวยงามตามใจชอบมากขึ้นครับ [08:44]
