ตั้งค่าแบรนด์เว็บไซต์ (Website Branding)

คำอธิบาย

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

การตั้งค่าแบรนด์เว็บไซต์ประกอบด้วย:

1. โลโก้เว็บไซต์ - อัปโหลดโลโก้ที่แสดงบนเว็บไซต์และแอป PWA
2. Favicon - อัปโหลดไอคอนที่แสดงบนแท็บเบราว์เซอร์
3. CSS แบบกำหนดเอง - ปรับแต่งสี ฟอนต์ และสไตล์ของเว็บไซต์

ผู้ใช้งาน

• แอดมิน: อัปโหลด แก้ไข และจัดการแบรนด์เว็บไซต์ทั้งหมด
• โอเปอเรเตอร์: อัปโหลดและแก้ไขตามสิทธิ์ที่ได้รับ
• นักพัฒนา/ดีไซเนอร์: เขียนและทดสอบโค้ด CSS

ก่อนใช้งาน

สำหรับแอดมิน/โอเปอเรเตอร์:

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

ข้อกำหนดไฟล์:

โลโก้:

• รูปแบบ: PNG เท่านั้น
• ขนาด: 512x512 พิกเซล (บังคับ)
• อัตราส่วนโลโก้: ประมาณ 2:1
• ขนาดไฟล์: ไม่เกิน 10MB
• พื้นหลัง: ควรเป็นโปร่งใส (Transparent PNG)

Favicon:

• รูปแบบ: PNG เท่านั้น
• ขนาดแนะนำ: 512x512 พิกเซล หรือมากกว่า
• ขนาดไฟล์: ไม่เกิน 10MB
• พื้นหลัง: ควรเป็นโปร่งใสหรือสีเดียว

CSS:

• ความรู้พื้นฐาน CSS
• โค้ด CSS ที่ต้องการใช้

วิธีใช้งาน

เข้าสู่หน้าตั้งค่าแบรนด์เว็บไซต์

1. เข้าสู่ระบบแอดมิน
2. คลิกเมนู "ตั้งค่า" ในเมนูด้านซ้าย
3. เลือก "ตั้งค่าแบรนด์เว็บไซต์"
4. จะเห็นหน้าที่มี 3 การ์ดหลัก:
   • ตั้งค่าโลโก้สำหรับเว็บไซต์
   • ตั้งค่า Favicon สำหรับเว็บไซต์
   • ตั้งค่าตีมสีสำหรับเว็บไซต์ (CSS)

---

ส่วนที่ 1: ตั้งค่าโลโก้

คำอธิบาย

โลโก้เว็บไซต์จะแสดงในหลายจุด เช่น แถบนำทาง หน้าแรก หน้าล็อกอิน และเมื่อผู้เล่นติดตั้งเว็บไซต์เป็นแอป (PWA)

หมายเหตุสำคัญ: ถ้ารูปโลโก้ไม่ใช่ขนาด 512x512 พิกเซล ปุ่ม "ติดตั้งแอป" จะไม่แสดงบนเว็บไซต์ผู้เล่น

อัปโหลดโลโก้ใหม่

ขั้นตอนที่ 1: เลือกไฟล์โลโก้

1. ในการ์ด "ตั้งค่าโลโก้สำหรับเว็บไซต์" จะเห็น:

   • โลโก้ปัจจุบัน (ถ้ามี) แสดงอยู่ตรงกลาง
   • ข้อความ "โลโก้ปัจจุบัน" ด้านล่างรูป
   • ปุ่ม "เปลี่ยนโลโก้" หรือ "อัปโหลดโลโก้ใหม่"

2. คลิกปุ่ม "เปลี่ยนโลโก้"

3. เลือกไฟล์ PNG จากเครื่องของคุณ

การตรวจสอบไฟล์:

• ถ้าไฟล์ไม่ใช่ PNG จะขึ้นข้อความ "กรุณาเลือกไฟล์ PNG เท่านั้น"
• ถ้าไฟล์ใหญ่เกิน 10MB จะขึ้นข้อความ "ขนาดไฟล์ใหญ่เกินไป (สูงสุด 10MB)"

ขั้นตอนที่ 2: ดูตัวอย่างและยืนยัน

1. หลังเลือกไฟล์สำเร็จ จะเห็นตัวอย่างโลโก้ใหม่
2. ตรวจสอบตัวอย่างโลโก้อย่างละเอียด
3. คลิกปุ่ม "ยืนยันการอัปโหลด" เพื่อบันทึก
4. หรือคลิก "ยกเลิก" เพื่อเลือกไฟล์ใหม่

---

ส่วนที่ 2: ตั้งค่า Favicon

คำอธิบาย

Favicon คือไอคอนขนาดเล็กที่แสดงบนแท็บเบราว์เซอร์และบุ๊คมาร์ก ช่วยให้ผู้เล่นจำและหาเว็บไซต์ของคุณได้ง่ายขึ้น

เมื่ออัปโหลด Favicon ระบบจะสร้างไฟล์ในหลายขนาดโดยอัตโนมัติ:

• favicon-16x16.png - สำหรับแท็บเบราว์เซอร์
• favicon-32x32.png - สำหรับเบราว์เซอร์บนเดสก์ท็อป
• apple-touch-icon.png (180x180) - สำหรับ iOS Safari
• android-chrome-192x192.png - สำหรับ Android Chrome
• android-chrome-512x512.png - สำหรับ Android Chrome ความละเอียดสูง
• favicon.ico - สำหรับเบราว์เซอร์เก่าๆ

อัปโหลด Favicon ใหม่

ขั้นตอนที่ 1: เลือกไฟล์ Favicon

1. ในการ์ด "ตั้งค่า Favicon สำหรับเว็บไซต์" จะเห็น:

   • Favicon ปัจจุบัน (ถ้ามี) แสดงอยู่ตรงกลาง
   • ข้อความ "Favicon ปัจจุบัน" ด้านล่างรูป
   • ปุ่ม "เปลี่ยน Favicon" หรือ "อัปโหลด Favicon ใหม่"

2. คลิกปุ่ม "เปลี่ยน Favicon"

3. เลือกไฟล์ PNG จากเครื่องของคุณ

ขั้นตอนที่ 2: ดูตัวอย่างและยืนยัน

1. หลังเลือกไฟล์สำเร็จ จะเห็นตัวอย่าง Favicon ใหม่
2. ตรวจสอบว่าไอคอนชัดเจนหรือไม่เมื่อย่อเล็ก
3. คลิกปุ่ม "ยืนยันการอัปโหลด" เพื่อบันทึก
4. ระบบจะสร้างไฟล์ทุกขนาดโดยอัตโนมัติ

---

ส่วนที่ 3: ตั้งค่า CSS แบบกำหนดเอง

คำอธิบาย

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

แก้ไข CSS

ขั้นตอนที่ 1: สำรอง CSS เดิม (สำคัญมาก!)

1. คัดลอกโค้ด CSS เดิมทั้งหมด จากกล่องข้อความ
2. วางลงในโปรแกรมจดบันทึก หรือบันทึกเป็นไฟล์ .css
3. ตั้งชื่อไฟล์ให้เข้าใจ เช่น custom-css-backup-20250219.css

ขั้นตอนที่ 2: เขียนหรือแก้ไขโค้ด CSS

1. คลิกที่กล่องข้อความเพื่อเริ่มแก้ไข
2. เขียนหรือวางโค้ด CSS ที่ต้องการ

ตัวอย่างโค้ด CSS พื้นฐาน:

/* เปลี่ยนสีพื้นหลังหลัก */
:root {
  --primary-color: #FF5733;
  --secondary-color: #3498DB;
  --background-color: #1A1A1A;
}

/* เปลี่ยนสีปุ่มหลัก */
.btn-primary {
  background-color: var(--primary-color);
  color: white;
}

/* เปลี่ยนฟอนต์ */
body {
  font-family: 'Noto Sans Thai', 'Arial', sans-serif;
}

ขั้นตอนที่ 3: ยืนยันการอัปโหลด

1. ตรวจสอบโค้ด CSS อย่างละเอียด
2. คลิกปุ่ม "ยืนยันการอัปโหลด"
3. รีเฟรชหน้าเว็บเพื่อดูผลลัพธ์

ลบ CSS ทั้งหมด

1. สำรอง CSS เดิมไว้ก่อน
2. ลบโค้ด CSS ทั้งหมด จากกล่องข้อความ
3. พิมพ์เว้นวรรค (Space) หนึ่งตัว
4. คลิกปุ่ม "ยืนยันการอัปโหลด"
5. เว็บไซต์จะกลับไปใช้สไตล์เริ่มต้น

---

การตรวจสอบผลลัพธ์

สำหรับโลโก้

1. หน้าแอดมิน: รีเฟรชหน้าเว็บ ดูโลโก้ที่แถบนำทางด้านบน
2. เว็บไซต์ผู้เล่น: เปิดเว็บไซต์ ดูโลโก้ที่หน้าแรกและหน้าล็อกอิน
3. โหมดมือถือ: เปิดเว็บไซต์บนมือถือ
4. ปุ่มติดตั้งแอป: ตรวจสอบว่ามีปุ่มแสดงบนเว็บไซต์ (ถ้ารูปเป็น 512x512)

สำหรับ Favicon

1. แท็บเบราว์เซอร์: เปิดเว็บไซต์ ดู Favicon ที่แท็บ
2. บุ๊คมาร์ก: เพิ่มเว็บไซต์เข้าบุ๊คมาร์ก ดู Favicon
3. iOS Safari: เพิ่มเว็บไซต์ไปที่หน้าจอหลัก ดูไอคอน
4. Android Chrome: เพิ่มเว็บไซต์ไปที่หน้าจอหลัก ดูไอคอน

สำหรับ CSS

1. รีเฟรชหน้าเว็บ: กด F5 หรือ Ctrl+R
2. ตรวจสอบหน้าต่างๆ: ดูว่าสไตล์แสดงผลถูกต้อง
3. ทดสอบบนมือถือ: เปิดเว็บไซต์บนมือถือ
4. ใช้ Developer Tools: กด F12 เพื่อตรวจสอบ CSS

---

การตั้งค่าภาพเว็บไซต์ — Drop Shadow Effect

คำอธิบาย

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

วิธีใช้งาน

1. ไปที่เมนู "ตั้งค่า" → "ตั้งค่าแบรนด์เว็บไซต์"
2. เลื่อนลงไปที่การ์ด "ตั้งค่าภาพเว็บไซต์" ด้านล่างสุดของหน้า
3. จะเห็นรายการ "แสดง Drop Shadow Effect" พร้อมสวิตช์เปิด-ปิด
4. กดสวิตช์เพื่อเปิดหรือปิดเอฟเฟกต์ได้ทันที

หมายเหตุ: การเปลี่ยนแปลงจะมีผลเมื่อผู้เล่นรีเฟรชหน้าเว็บหรือเข้าเว็บครั้งถัดไป ผู้เล่นที่เข้าเว็บอยู่แล้วในขณะนั้นจะยังเห็นแบบเดิมจนกว่าจะรีเฟรช

---

ข้อจำกัด

โลโก้:

• รองรับเฉพาะ PNG เท่านั้น
• ต้องเป็นขนาด 512x512 พิกเซล
• ขนาดไฟล์สูงสุด 10MB
• การอัปโหลดใหม่จะเขียนทับเดิม

Favicon:

• รองรับเฉพาะ PNG เท่านั้น
• ขนาดไฟล์สูงสุด 10MB
• การอัปโหลดใหม่จะเขียนทับเดิมทุกขนาด

CSS:

• ต้องมีความรู้พื้นฐาน CSS
• CSS ที่ผิดไวยากรณ์อาจทำให้เว็บไซต์แสดงผลผิด
• ไม่สามารถกู้คืนได้ถ้าไม่สำรอง

---

ข้อผิดพลาดที่พบบ่อย

• อัปโหลดแล้วไม่เห็นการเปลี่ยนแปลง → รีเฟรชหน้าเว็บแบบเต็มรูปแบบ (Ctrl+F5)
• ปุ่มติดตั้งแอปหายไป → โลโก้ไม่ใช่ขนาด 512x512 พิกเซล
• Favicon ไม่เปลี่ยน → เคลียร์แคชเบราว์เซอร์และรีเฟรช
• CSS ทำให้เว็บไซต์พัง → วาง CSS เดิมที่สำรองไว้กลับมา
• CSS ไม่มีผล → ลองเพิ่ม !important หรือเพิ่มความเฉพาะเจาะจง

---

แก้ปัญหา

• ปัญหา: ไม่เห็นหน้าตั้งค่าแบรนด์เว็บไซต์
  วิธีแก้: ตรวจว่ามีสิทธิ์ "จัดการตั้งค่าทั่วไป" หรือยัง

• ปัญหา: อัปโหลดไม่ได้
  วิธีแก้: ตรวจสอบ 1) ไฟล์เป็น PNG หรือไม่ 2) ขนาดไม่เกิน 10MB 3) การเชื่อมต่ออินเทอร์เน็ต

• ปัญหา: โลโก้ขนาด 512x512 แล้วปุ่มติดตั้งแอปยังไม่แสดง
  วิธีแก้: ตรวจสอบว่าโลโก้มีอัตราส่วน 2:1 และอยู่ตรงกลางของรูป

• ปัญหา: CSS ทำให้หน้าเว็บแสดงผลผิด
  วิธีแก้:

  1. วาง CSS เดิมที่สำรองไว้กลับมาทันที
  2. ตรวจสอบโค้ด CSS ว่ามีไวยากรณ์ผิดตรงไหน
  3. ทดสอบใน Developer Tools ก่อนอัปโหลดใหม่

---

คำแนะนำ

โลโก้และ Favicon:

• เก็บไฟล์สำรอง: เก็บไฟล์ต้นฉบับไว้ในเครื่องเสมอ
• ใช้รูปคุณภาพสูง: โลโก้และ Favicon ควรคมชัดและสวยงาม
• ทดสอบหลายอุปกรณ์: ดูบนคอมพิวเตอร์ แท็บเล็ต และมือถือ
• ปฏิบัติตามขนาดที่กำหนด: โลโก้ 512x512 พิกเซลอย่างเคร่งครัด

CSS:

• สำรองก่อนแก้ไขเสมอ: ไม่มีข้อยกเว้น!
• ทดสอบใน Developer Tools: ทดสอบโค้ดก่อนอัปโหลดจริง
• เขียนโค้ดที่อ่านง่าย: เว้นบรรทัด เยื้อง และใส่คอมเมนต์
• ปรึกษานักพัฒนา: ถ้าไม่แน่ใจควรปรึกษาผู้เชี่ยวชาญ