ข้ามไปยังเนื้อหาหลัก

โลโก้

1. หน้านี้ใช้ทำอะไร​

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

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

2. ก่อนเริ่ม​

  • สิทธิ์การใช้งาน: ต้องได้สิทธิ์ 'โลโก้' จากผู้ดูแลระบบก่อน จึงจะเปิดดูและแก้ไขรูปภาพในหน้านี้ได้ (หากไม่มีสิทธิ์แก้ไข จะดูตัวอย่างได้อย่างเดียว)
  • สิ่งที่ต้องเตรียม:
    • ไฟล์รูปภาพโลโก้เว็บไซต์: แนะนำรูปภาพแนวนอนที่มีพื้นหลังโปร่งใส (Transparent) ขนาดแนะนำ 560 × 152 px รองรับไฟล์นามสกุล PNG, JPG, WEBP หรือ GIF ขนาดไฟล์ไม่เกิน 5 MB
    • ไฟล์รูปภาพไอคอนแท็บเว็บ (Favicon): แนะนำรูปภาพสี่เหลี่ยมจัตุรัส ขนาดแนะนำ 256 × 256 px รองรับไฟล์นามสกุล PNG, JPG, WEBP หรือ GIF ขนาดไฟล์ไม่เกิน 5 MB
    • ความเข้ากันได้กับโหมดมืด: เนื่องจากหน้าเว็บล็อบบี้แสดงผลด้วยพื้นหลังสีเข้ม (โหมดมืด) เสมอ แนะนำให้ใช้ไฟล์ PNG หรือ WEBP พื้นหลังใส เพื่อให้ภาพกลืนเข้ากับแถบส่วนหัว

3. หน้าตาของหน้านี้​

เมื่อเปิดเข้ามา จะพบส่วนประกอบสำคัญเรียงจากบนลงล่างดังนี้:

  1. ส่วนหัวของหน้า (Page Header): แสดงชื่อหน้า โลโก้, คำอธิบายสั้น ๆ และแถบนำทาง (การตั้งค่า / ธีม / โลโก้)
  2. แถบประวัติการแก้ไข (Page Audit): แสดงหมายเลขเวอร์ชันของข้อมูล, ชื่อผู้บันทึกล่าสุด, ประเภทผู้ใช้ และวันเวลาที่แก้ไขล่าสุด
  3. การ์ดตัวอย่างบนหน้าเว็บ (Preview Card): แสดงตัวอย่างหน้าตาจริงแบบเรียลไทม์ตามสีธีมของเว็บ มี:
    • แท็บเบราว์เซอร์ (Browser Tab): จำลองหน้าตาแท็บของเบราว์เซอร์ แสดงไอคอนแท็บเว็บและชื่อเว็บไซต์
    • คอมพิวเตอร์ (Desktop): จำลองแถบส่วนหัวบนหน้าจอคอมพิวเตอร์ ขนาดพื้นที่โลโก้ 140 × 38 px
    • มือถือ (Mobile): จำลองแถบส่วนหัวบนหน้าจอมือถือ ขนาดพื้นที่โลโก้ 120 × 32 px
  4. บล็อกฟอร์มอัปโหลดรูปภาพ (Form Sections): แบ่งออกเป็น 2 ช่องหลัก ได้แก่ บล็อก โลโก้ ทางซ้าย และบล็อก ไอคอนแท็บเว็บ ทางขวา
  5. แถบคำสั่งด้านล่าง (Action Bar): แถบลอยด้านล่าง แสดงปุ่ม ยกเลิก และปุ่ม บันทึก จะเปิดให้กดเมื่อมีการเลือกรูปใหม่หรือกดเปลี่ยนสถานะรูป

4. ค้นหาและตัวกรอง​

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

มุมมองตัวอย่างตำแหน่งที่แสดงสิ่งที่ช่วยตรวจสอบ
แท็บเบราว์เซอร์มุมซ้ายบนของการ์ดตัวอย่างตรวจสอบความคมชัดของไอคอนแท็บเว็บ (Favicon) ขนาด 16 px และการตัดคำของชื่อเว็บ
คอมพิวเตอร์แถบส่วนหัวด้านบนซ้ายตรวจสอบขนาดและความสมดุลของโลโก้บนแถบนำทางจอคอมพิวเตอร์
มือถือกรอบจำลองหน้าจอมือถือด้านขวาตรวจสอบความชัดเจนของโลโก้เมื่อถูกย่อลงในหน้าจอมือถือขนาดเล็ก

5. ตารางข้อมูล​

รายการช่องอัปโหลดรูปภาพบนหน้าจอ​

ช่องอัปโหลดสัดส่วนที่แนะนำพื้นที่แสดงผลจริงพฤติกรรมเมื่อไม่มีรูป
โลโก้560 × 152 px (แนวนอน)ส่วนหัวของเว็บ (คอมพิวเตอร์ 140×38 px, มือถือ 120×32 px)แสดงโลโก้ของระบบ เปลี่ยนสีตามสีธีมของเว็บ
ไอคอนแท็บเว็บ256 × 256 px (1:1 สี่เหลี่ยมจัตุรัส)แท็บเบราว์เซอร์และรายการบุ๊กมาร์กของผู้เล่นแสดงไอคอนของระบบ เปลี่ยนสีตามสีธีมของเว็บ

ปุ่มคำสั่งในแต่ละช่องอัปโหลด​

ปุ่ม / การกระทำไอคอน / สีกดแล้วจะเกิดอะไรหมายเหตุ / เงื่อนไข
พื้นที่อัปโหลดรูปกรอบเส้นประสีเทาเปิดหน้าต่างเลือกไฟล์จากเครื่อง หรือลากไฟล์รูปภาพมาวางในกรอบรองรับ PNG, JPG, WEBP, GIF ไม่เกิน 5 MB
เปลี่ยนรูปปุ่มสีเทาบนการ์ดเปิดหน้าต่างให้เลือกไฟล์รูปภาพใหม่มาแทนที่รูปเดิมแสดงเมื่อมีรูปภาพอยู่ในระบบแล้ว
ลบรูป / ใช้ของระบบไอคอนถังขยะสีแดงปรับสถานะเป็นเตรียมคืนค่ากลับไปใช้โลโก้หรือไอคอนของระบบข้อความจะเปลี่ยนเป็นเตือนว่าบันทึกแล้วจะคืนค่า
ใช้รูปเดิมปุ่มข้อความสีฟ้ายกเลิกการเลือกรูปใหม่หรือยกเลิกการลบ แล้วดึงรูปเดิมที่บันทึกไว้กลับมากดได้ก่อนที่จะกดปุ่มบันทึก

6. ทีละขั้นตอน​

1. การเปลี่ยนรูปโลโก้เว็บไซต์​

  1. ไปที่เมนู รูปลักษณ์เว็บ > โลโก้ จากแถบเมนูด้านซ้าย
  2. ในบล็อก โลโก้ ให้กดที่กรอบรูปภาพ หรือลากไฟล์ภาพโลโก้มาวางในกรอบ
  3. รอระบบอัปโหลดไฟล์สักครู่ ตรวจสอบข้อความใต้รูป:
    • หากขึ้นว่า สัดส่วนพอดี แสดงว่ารูปภาพได้สัดส่วนตามมาตรฐาน
    • หากขึ้นว่า รูปภาพสัดส่วนไม่ใกล้ 560 × 152 จะถูกย่อให้อยู่ในพื้นที่โลโก้ ระบบจะจัดรูปให้อยู่ในกรอบโดยคงสัดส่วนเดิมไว้
  4. ตรวจสอบภาพตัวอย่างบนแถบส่วนหัวของคอมพิวเตอร์และมือถือในการ์ดด้านบน
  5. กดปุ่ม บันทึก ที่แถบด้านล่าง
  6. ระบบจะแสดงข้อความแจ้งเตือนสีเขียวว่า "บันทึกโลโก้แล้ว"

2. การเปลี่ยนรูปไอคอนแท็บเว็บ (Favicon)​

  1. ในบล็อก ไอคอนแท็บเว็บ กดที่กรอบรูปภาพหรือลากไฟล์ภาพสี่เหลี่ยมจัตุรัสมาวาง
  2. ตรวจสอบข้อความใต้รูป:
    • หากขึ้นว่า สัดส่วนพอดี แสดงว่ารูปเป็นสี่เหลี่ยมจัตุรัสสมบูรณ์
    • หากขึ้นว่า รูปภาพไม่ใช่สี่เหลี่ยมจัตุรัส จะถูกย่อให้อยู่ในกรอบ ระบบจะปรับให้พอดีกรอบ
  3. ดูภาพตัวอย่างบนแถบแท็บเบราว์เซอร์ด้านบนสุด
  4. กดปุ่ม บันทึก ที่แถบลอยด้านล่าง

3. การคืนค่ากลับไปใช้โลโก้หรือไอคอนของระบบ​

  1. ในบล็อกรูปที่ต้องการคืนค่า ให้กดปุ่มลบรูป (ไอคอนถังขยะ)
  2. ระบบจะขึ้นข้อความแจ้งว่า "บันทึกแล้วเว็บจะกลับไปใช้โลโก้ของระบบ" หรือ "บันทึกแล้วเว็บจะกลับไปใช้ไอคอนของระบบ"
  3. ดูภาพตัวอย่างด้านบน จะเห็นภาพเปลี่ยนกลับเป็นโลโก้ของระบบตามสีธีมทันที
  4. กดปุ่ม บันทึก ที่แถบด้านล่างเพื่อยืนยัน

4. การยกเลิกการแก้ไขก่อนบันทึก​

  1. หากเลือกรูปผิด หรือต้องการยกเลิกการเปลี่ยนแปลงทั้งหมด ให้กดปุ่ม ยกเลิก ที่แถบคำสั่งด้านล่าง
  2. ระบบจะคืนค่ารูปภาพทั้งหมดกลับเป็นรูปล่าสุดที่บันทึกไว้ในฐานข้อมูล

7. หน้าแก้ไขหรือหน้าเพิ่ม​

หน้านี้เป็นหน้าบันทึกการตั้งค่ารูปภาพโดยตรง มีช่องการตั้งค่าดังนี้:

ช่องต้องกรอกไหมใส่อะไรตัวอย่างข้อจำกัด
โลโก้ไม่บังคับไฟล์ภาพโลโก้แนวนอน พื้นหลังโปร่งใส สำหรับแสดงที่ส่วนหัวไฟล์รูปภาพ brand-logo.png ขนาด 560 × 152 pxนามสกุล PNG, JPG, WEBP, GIF ขนาดไฟล์ไม่เกิน 5 MB หากไม่ใส่จะใช้โลโก้ของระบบ
ไอคอนแท็บเว็บไม่บังคับไฟล์ภาพไอคอนสี่เหลี่ยมจัตุรัส สำหรับแสดงบนแท็บเบราว์เซอร์ไฟล์รูปภาพ favicon.png ขนาด 256 × 256 pxนามสกุล PNG, JPG, WEBP, GIF ขนาดไฟล์ไม่เกิน 5 MB สัดส่วน 1:1 หากไม่ใส่จะใช้ไอคอนของระบบ

8. หน้าต่างป็อปอัพ (Popup / Modal)​

1. หน้าต่างแจ้งเตือนเมื่อมีข้อมูลขัดแย้ง (Version Conflict)​

  • เปิดขึ้นมาเมื่อไหร่: เมื่อกดปุ่ม บันทึก แต่มีผู้ดูแลระบบคนอื่นบันทึกข้อมูลหน้านี้ตัดหน้าไปก่อน
  • สิ่งที่เห็นในหน้าต่าง: ข้อความแจ้งเตือนสีแดงว่า "มีแอดมินอื่นบันทึกหน้านี้ไปก่อน แสดงรูปล่าสุดแล้ว กรุณาเลือกรูปใหม่อีกครั้ง"
  • สิ่งที่ต้องทำ: ระบบจะโหลดรูปล่าสุดที่มีคนบันทึกไว้มาแสดงให้อัตโนมัติ ให้ตรวจดูรูปภาพและเลือกไฟล์ที่ต้องการใหม่อีกครั้งก่อนกดบันทึก
  • ผลลัพธ์: ข้อมูลจะได้รับการปรับปรุงให้ตรงกับเวอร์ชันล่าสุด ป้องกันการบันทึกทับข้อมูลโดยไม่ตั้งใจ

2. หน้าต่างเตือนก่อนออกจากหน้า (Dirty Form Guard)​

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

9. สถานะและป้ายสี​

ป้ายสถานะ / ข้อความสีของป้ายหรือข้อความความหมายสิ่งที่ต้องทำต่อ
สัดส่วนพอดีเขียวรูปภาพมีสัดส่วนตรงตามขนาดแนะนำที่ระบบกำหนดใช้งานได้ทันที กดบันทึกได้เลย
สัดส่วนไม่ใกล้ 560 × 152...เหลืองขนาดภาพไม่ได้สัดส่วน ระบบจะปรับขนาดลงในพื้นที่ให้พอดีตรวจสอบภาพตัวอย่างด้านบนว่าตัวหนังสืออ่านออกหรือไม่
ไม่ใช่สี่เหลี่ยมจัตุรัส...เหลืองไอคอนไม่ได้สัดส่วน 1:1 ระบบจะบีบหรือตัดให้อยู่ในกรอบแนะนำให้ตัดรูปเป็นสี่เหลี่ยมจัตุรัสก่อนอัปโหลด
กำลังอัปโหลดรูป…ฟ้าระบบกำลังส่งไฟล์รูปภาพขึ้นเซิร์ฟเวอร์รอจนกว่าจะขึ้นข้อความสำเร็จก่อนกดบันทึก
ใช้โลโก้ของระบบ / ใช้ไอคอนของระบบเทาเว็บไซต์ใช้ค่าเริ่มต้นของระบบเนื่องจากไม่มีการอัปโหลดรูปใช้งานได้ตามปกติ หรืออัปโหลดรูปของตัวเองเมื่อพร้อม
บันทึกแล้วเว็บจะกลับไปใช้...ส้มมีการกดลบรูปออก และรอการกดปุ่มบันทึกเพื่อยืนยันกดปุ่มบันทึกเพื่อยืนยัน หรือกดใช้รูปเดิมหากเปลี่ยนใจ

10. คำถามที่เจอบ่อย / แก้ปัญหาเบื้องต้น​

  • ถ้าโลโก้บนหน้าเว็บมีพื้นหลังสีขาวบดบังส่วนหัว:
    • แนะนำให้ส่งไฟล์ภาพให้นักออกแบบตัดพื้นหลังออก แล้วบันทึกเป็นไฟล์นามสกุล PNG หรือ WEBP แบบโปร่งใส (Transparent) ก่อนนำมาอัปโหลด
  • ถ้าปุ่มบันทึกเป็นสีเทา กดไม่ได้:
    • ตรวจสอบว่าได้เลือกรูปภาพใหม่หรือกดลบรูปภาพหรือไม่ หากไม่มีการเปลี่ยนแปลงใด ๆ ปุ่มบันทึกจะกดไม่ได้เป็นปกติ
    • ตรวจสอบว่าไฟล์รูปภาพยังอยู่ระหว่างการอัปโหลดหรือไม่ รอให้การอัปโหลดเสร็จสมบูรณ์ก่อน
  • ถ้าอัปโหลดรูปแล้วขึ้นแจ้งเตือนข้อผิดพลาด:
    • หากขึ้น "เลือกรูป PNG, JPG, WEBP หรือ GIF": ให้ตรวจดูนามสกุลไฟล์ว่าตรงตามที่กำหนดหรือไม่
    • หากขึ้น "รูปใหญ่เกินไป": ให้ย่อขนาดไฟล์ภาพไม่ให้เกิน 5 MB แล้วลองใหม่อีกครั้ง
  • ถ้าบันทึกแล้วแต่หน้าเว็บผู้เล่นยังเป็นโลโก้เดิม:
    • ให้กดรีเฟรชหน้าเว็บของผู้เล่น หรือล้างแคชของเบราว์เซอร์ (Ctrl + F5 หรือ Cmd + Shift + R) เพื่อให้เบราว์เซอร์ดึงรูปภาพล่าสุดมาแสดง