# วิธีทำซูมรูปภาพ (Lightbox) ในบทความ Blogger — คลิกรูปขยายเต็มจอ รูปในบทความหลายชนิด ทั้งภาพถ่าย อินโฟกราฟิก และภาพหน้าจอ มักมีรายละเอียดที่ผู้อ่านอยากดูใกล้ๆ การให้คลิกรูปเพื่อขยายเต็มจอจึงเป็นลูกเล่นที่ยกระดับประสบการณ์อ่านทันที บทความนี้สอนวิธีเพิ่ม Lightbox ในธีม Blogger ด้วย BlogKub แบบอัตโนมัติ พร้อมเหตุผลและการตั้งค่า *อัปเดต 14 กรกฎาคม 2026 · อ่านประมาณ 8 นาที · ระดับ: เริ่มต้น* > **สรุปสั้น:** เพิ่มบล็อก **ซูมรูปภาพ (Lightbox)** ใน BlogKub (หลายเทมเพลตติดตั้งให้อยู่แล้ว) แล้ว Export XML ไปอัปโหลด Blogger จากนั้นแทรกรูปในโพสต์ตามปกติ **รูปในเนื้อหาจะคลิกขยายเต็มจอได้อัตโนมัติ** ปิดด้วยการคลิกพื้นหลังหรือปุ่มปิด ใช้สคริปต์ขนาดเล็ก ไม่กระทบความเร็ว เหมาะกับภาพถ่าย อินโฟกราฟิก และภาพหน้าจอ  *คลิกรูปในบทความเพื่อขยายเต็มจอบนพื้นหลังเข้ม ปิดด้วยการคลิกพื้นหลังหรือปุ่มปิด* ## Lightbox คืออะไร **Lightbox คือลูกเล่นที่เมื่อผู้อ่านคลิกรูปในบทความ รูปจะขยายขึ้นเต็มจอบนพื้นหลังสีเข้ม เพื่อให้ดูรายละเอียดได้ชัดขึ้น** แล้วปิดกลับสู่บทความได้ด้วยการคลิกพื้นหลังหรือปุ่มปิด ชื่อ Lightbox มาจากกล่องไฟที่ช่างภาพใช้ส่องดูฟิล์ม แนวคิดคือการแยกรูปออกมาดูเดี่ยวๆ โดยไม่มีสิ่งอื่นรบกวนสายตา บนหน้าเว็บ รูปมักถูกย่อให้พอดีกับความกว้างของเนื้อหา ซึ่งอาจเล็กเกินกว่าจะเห็นรายละเอียดบางอย่าง Lightbox แก้ปัญหานี้ด้วยการให้ผู้อ่านขยายรูปเต็มจอเมื่อต้องการ แล้วกลับมาอ่านต่อได้ทันที เป็นการให้ทางเลือก “ดูใกล้” โดยไม่กระทบการจัดวางของบทความ ## ทำไมบทความที่มีรูปเยอะถึงควรมี Lightbox Lightbox ไม่ได้จำเป็นกับทุกเว็บ แต่มีค่ามากกับบทความบางประเภทที่รูปมีรายละเอียดสำคัญ - **ภาพถ่าย:** บล็อกท่องเที่ยว อาหาร หรือแฟชั่น ที่ผู้อ่านอยากดูความสวยและรายละเอียดของภาพแบบเต็มตา - **อินโฟกราฟิกและแผนภูมิ:** รูปที่มีข้อความหรือตัวเลขเล็กๆ ซึ่งอ่านไม่ออกในขนาดย่อ ต้องขยายจึงจะเห็นชัด - **ภาพหน้าจอ (screenshot):** บทความสอนหรือรีวิวที่มีภาพขั้นตอน ผู้อ่านมักต้องขยายดูปุ่มหรือเมนูในภาพ - **ผลงานและตัวอย่าง:** เว็บที่โชว์งานออกแบบหรือผลลัพธ์ ที่รายละเอียดคือหัวใจ ในกรณีเหล่านี้ ถ้าไม่มี Lightbox ผู้อ่านต้องคลิกเปิดรูปในแท็บใหม่หรือซูมด้วยสองนิ้วบนมือถือ ซึ่งไม่สะดวกและทำให้หลุดจากบทความ Lightbox ทำให้ทุกอย่างเกิดขึ้นในหน้าเดียวอย่างลื่นไหล ## Lightbox ของ BlogKub ทำงานอย่างไร (อัตโนมัติ) จุดเด่นคือ **ทำงานอัตโนมัติกับรูปในเนื้อหาบทความ** เมื่อเพิ่มบล็อกซูมรูปภาพในธีมแล้ว คุณเพียงแทรกรูปในโพสต์ตามปกติผ่านตัวแก้ไข Blogger รูปเหล่านั้นจะคลิกขยายได้เองโดยไม่ต้องตั้งค่าทีละรูป ไม่ต้องใส่โค้ดพิเศษหรือแท็กเพิ่ม เมื่อผู้อ่านคลิกรูป ระบบจะแสดงรูปเต็มจอบนพื้นหลังสีเข้ม พร้อมปุ่มปิดที่มุมบน ผู้อ่านปิดได้ด้วยการคลิกพื้นหลัง กดปุ่มปิด หรือกดปุ่ม Esc ทั้งหมดใช้สคริปต์ขนาดเล็กที่ไม่โหลดไฟล์ภายนอก และรูปที่แสดงก็เป็นรูปเดิมในบทความ จึงไม่เพิ่มภาระการโหลดหรือกระทบความเร็ว ## วิธีเพิ่ม Lightbox ใน BlogKub ทีละขั้น 1. **เพิ่มบล็อกซูมรูปภาพ** หลายเทมเพลตติดตั้งให้อยู่แล้ว ถ้ายังไม่มี เปิดคลังด้านซ้าย หมวด “บทความ & UX” แล้วลากบล็อก “ซูมรูปภาพ (Lightbox)” เข้ามา 2. **Export XML และอัปโหลด** กด Export แล้วนำไฟล์ไปที่ blogger.com → ธีม → เมนูสามจุด → กู้คืน/สำรอง → เลือกไฟล์ XML 3. **ใส่รูปในบทความตามปกติ** แทรกรูปในโพสต์ผ่านตัวแก้ไข Blogger ได้เลย รูปในเนื้อหาจะคลิกขยายได้อัตโนมัติโดยไม่ต้องตั้งค่าเพิ่ม 4. **ทดสอบการซูม** เปิดหน้าบทความจริง คลิกที่รูปเพื่อดูว่าขยายเต็มจอบนพื้นหลังเข้ม แล้วปิดด้วยการคลิกพื้นหลังหรือปุ่มปิด ## Lightbox กับ SEO รูปภาพ Lightbox ไม่ได้แทนการทำ SEO รูปภาพ แต่ทำงานร่วมกันได้ดี สิ่งที่ทำให้รูปติดใน Google Images คือ URL รูปที่ crawl ได้ ข้อความ ALT ที่สื่อความ และการอ้างอิงในเนื้อหา ซึ่งเป็นเรื่องของการใส่รูปที่ถูกต้อง ส่วน Lightbox เป็นเรื่องประสบการณ์ผู้ใช้เมื่อเข้ามาดูรูปบนหน้าเว็บ เพราะ Lightbox แสดงรูปเดิมที่อยู่ในบทความ ไม่ได้ซ่อนหรือแทนที่รูปด้วยอย่างอื่น มันจึงไม่กระทบการเก็บข้อมูลรูปของ Google คุณยังควรใส่ ALT ที่ดีและใช้รูปคุณภาพเหมาะสมตามหลัก SEO รูปภาพ แล้วให้ Lightbox เสริมด้านประสบการณ์การดูอีกชั้น ## Lightbox กับแกลเลอรีและสไลด์รูป Lightbox มักถูกเข้าใจสลับกับแกลเลอรีหรือสไลด์รูป แต่ทั้งสามทำหน้าที่ต่างกันและใช้เสริมกันได้ Lightbox คือการคลิกรูปเดี่ยวเพื่อขยายดูใกล้ ส่วนสไลด์รูปคือการจัดหลายรูปให้เลื่อนดูต่อกันในพื้นที่เดียว และแกลเลอรีคือการจัดวางรูปหลายรูปเป็นตาราง แต่ละแบบเหมาะกับสถานการณ์ต่างกัน ในทางปฏิบัติ บทความเดียวอาจใช้หลายอย่างร่วมกัน เช่น ใช้สไลด์รูปเพื่อโชว์ภาพชุดหนึ่งอย่างกระชับ และให้ Lightbox ทำหน้าที่ขยายดูรายละเอียดเมื่อผู้อ่านสนใจรูปใดเป็นพิเศษ การเข้าใจบทบาทของแต่ละฟีเจอร์ช่วยให้คุณเลือกใช้ให้เหมาะกับเนื้อหา แทนที่จะใช้ทุกอย่างพร้อมกันจนรก ## เคล็ดลับเตรียมรูปสำหรับ Lightbox เพราะ Lightbox ขยายรูปเต็มจอ คุณภาพของรูปต้นฉบับจึงสำคัญกว่าปกติ ยึดหลักเหล่านี้เพื่อให้รูปขยายแล้วยังดูดี - **อัปโหลดความละเอียดพอเหมาะ** รูปที่จะให้ขยายควรกว้างพอ (เช่น อย่างน้อย 1200–1600 พิกเซลสำหรับภาพสำคัญ) เพื่อให้เต็มจอแล้วยังคม แต่ก็ไม่ใหญ่เกินจนไฟล์หนัก - **บาลานซ์ระหว่างความคมกับขนาดไฟล์** บีบอัดรูปให้พอดี ใช้รูปฟอร์แมตที่เหมาะเพื่อไม่ให้หน้าโหลดช้า โดยเฉพาะบทความที่มีรูปเยอะ - **ให้ข้อความในอินโฟกราฟิกอ่านออกตอนขยาย** ถ้ารูปมีตัวอักษร ตรวจว่าเมื่อขยายเต็มจอแล้วอ่านได้จริง เพราะนั่นคือเหตุผลหลักที่คนขยายดู - **ใส่ ALT ที่สื่อความทุกรูป** เพื่อประโยชน์ทั้งด้านการเข้าถึงและ SEO รูปภาพ ## Lightbox กับความเร็วและการเข้าถึง ข้อกังวลที่พบบ่อยคือลูกเล่นแบบนี้จะถ่วงเว็บไหม คำตอบคือไม่ เพราะ BlogKub ทำ Lightbox ด้วยสคริปต์ขนาดเล็กที่จับการคลิกและแสดงมุมมองขยาย ไม่ได้โหลดไลบรารีภายนอกที่หนัก และไม่ทำงานจนกว่าผู้อ่านจะคลิกรูป ผู้อ่านที่ไม่คลิกจึงไม่ได้รับผลกระทบด้านความเร็วเลย ด้านการเข้าถึง การให้ปิดได้หลายวิธีทั้งคลิกพื้นหลัง ปุ่มปิด และปุ่ม Esc ช่วยให้ผู้ใช้ที่ถนัดต่างกันออกจากมุมมองขยายได้สะดวก และเพราะรูปที่แสดงเป็นรูปเดิมพร้อม ALT เดิม ข้อมูลสำหรับผู้ใช้โปรแกรมอ่านหน้าจอก็ยังครบถ้วน โดยสรุปในเชิงประสบการณ์ Lightbox เปลี่ยนรูปจากสิ่งที่ดูผ่านๆ ให้กลายเป็นสิ่งที่ผู้อ่านมีปฏิสัมพันธ์ด้วยได้ การได้คลิกขยายดูใกล้ทำให้ผู้อ่านหยุดและใช้เวลากับเนื้อหามากขึ้น ซึ่งเป็นผลดีทั้งต่อความเข้าใจของผู้อ่านและสัญญาณการมีส่วนร่วมของหน้าเว็บ ## ปัญหาที่พบบ่อยและวิธีแก้ ### คลิกรูปแล้วไม่ขยาย ตรวจว่าเพิ่มบล็อกซูมรูปภาพในธีมแล้วและ Export ใหม่ รูปที่อยู่นอกเนื้อหาบทความ (เช่น โลโก้หรือไอคอน UI) อาจไม่ถูกตั้งให้ขยาย ซึ่งเป็นพฤติกรรมที่ถูกต้อง ### รูปขยายแล้วเบลอ เพราะรูปต้นฉบับความละเอียดต่ำ เมื่อขยายเต็มจอจึงเห็นไม่คม แนะนำให้อัปโหลดรูปความละเอียดเพียงพอ โดยเฉพาะอินโฟกราฟิกและภาพหน้าจอที่มีข้อความ ### ปิด Lightbox ไม่ได้ ปกติปิดได้ด้วยการคลิกพื้นหลัง ปุ่มปิด หรือ Esc หากติดขัด ให้ตรวจว่าไม่มีสคริปต์ Lightbox อื่นซ้ำซ้อนจากที่อื่นที่อาจขัดกัน ## แนวทางปฏิบัติที่ดี (Best Practices) - เปิด Lightbox กับบล็อกที่มีรูปรายละเอียดสูง เช่น ภาพถ่าย อินโฟกราฟิก หรือภาพหน้าจอ - อัปโหลดรูปความละเอียดเพียงพอ เพื่อให้ขยายแล้วยังคมชัด โดยเฉพาะรูปที่มีข้อความ - ใส่ ALT ที่สื่อความให้ทุกรูปตามหลัก SEO รูปภาพ เพื่อให้ทั้งการค้นหาและการเข้าถึงได้ประโยชน์ และหากอยากให้ผู้อ่านนำทางบทความยาวได้สะดวก ลองจับคู่กับ[ปุ่มกลับขึ้นบน](https://www.blogkub.com/learn/back-to-top) - ทดสอบการคลิกและปิดทั้งบนเดสก์ท็อปและมือถือ เพราะบนมือถือการแตะขยายยิ่งถูกใช้บ่อย - มีภาพหลายภาพที่เกี่ยวข้องกัน ลองรวมไว้ใน[สไลด์รูป/แกลเลอรี](https://www.blogkub.com/learn/slider)แล้วให้ผู้อ่านคลิกขยายด้วย Lightbox เพื่อประสบการณ์ดูภาพที่สมบูรณ์ ## สรุป Lightbox เป็นลูกเล่นที่ยกระดับการดูรูปในบทความให้สะดวกและเป็นมืออาชีพ โดยเฉพาะกับภาพถ่าย อินโฟกราฟิก และภาพหน้าจอที่มีรายละเอียดให้ดูใกล้ ด้วย BlogKub คุณเพียงเพิ่มบล็อกซูมรูปภาพแล้ว Export ไปใช้ รูปในเนื้อหาก็จะคลิกขยายเต็มจอได้อัตโนมัติ ปิดง่ายหลายวิธี ใช้สคริปต์เบาที่ไม่กระทบความเร็ว และทำงานได้ดีทั้งบนเดสก์ท็อปและมือถือ ทำให้ผู้อ่านเพลิดเพลินกับรูปในบทความของคุณได้เต็มที่โดยไม่ต้องหลุดจากหน้า ## คำถามที่พบบ่อย (FAQ) **Lightbox ใน BlogKub ต้องตั้งค่ารูปทีละรูปไหม?** ไม่ต้อง เมื่อเพิ่มบล็อกซูมรูปภาพในธีมแล้ว รูปในเนื้อหาบทความจะคลิกขยายเต็มจอได้อัตโนมัติ คุณเพียงแทรกรูปในโพสต์ตามปกติโดยไม่ต้องตั้งค่ารูปทีละรูป **ปิด Lightbox อย่างไร?** ปิดได้หลายวิธี ทั้งคลิกที่พื้นหลังสีดำรอบรูป กดปุ่มปิดที่มุมบน หรือบางกรณีกดปุ่ม Esc บนคีย์บอร์ด ทำให้ผู้อ่านออกจากมุมมองขยายได้สะดวก **Lightbox เหมาะกับรูปแบบไหน?** เหมาะกับภาพที่มีรายละเอียดให้ดูใกล้ เช่น ภาพถ่าย อินโฟกราฟิก แผนภูมิ และภาพหน้าจอ เพราะผู้อ่านมักอยากขยายดูข้อความหรือรายละเอียดเล็กๆ ที่มองไม่ชัดในขนาดปกติ **Lightbox ทำให้เว็บช้าลงไหม?** ไม่ทำให้ช้า เพราะใช้สคริปต์ขนาดเล็กที่จับการคลิกรูปและแสดงมุมมองขยาย ไม่โหลดไฟล์ภายนอกเพิ่ม และรูปก็เป็นรูปเดิมในบทความ จึงไม่กระทบ Core Web Vitals **Lightbox ใช้ได้บนมือถือไหม?** ใช้ได้ บนมือถือการแตะรูปเพื่อขยายเต็มจอยิ่งมีประโยชน์ เพราะจอเล็กทำให้รายละเอียดในรูปมองยาก การขยายเต็มจอช่วยให้เห็นชัดขึ้นโดยไม่ต้องซูมด้วยสองนิ้ว --- *บทความนี้เป็นส่วนหนึ่งของ [คู่มือฟีเจอร์ BlogKub](https://www.blogkub.com/learn/) · คู่มือทีละฟีเจอร์ พร้อมวิธีตั้งค่า ตัวเลือก และปัญหาที่พบบ่อย* > เขียนโดย > > ภัทร์พิศาล ดาทอง · เบน > > ผู้ก่อตั้ง BlogKub และบล็อกเกอร์สาย Blogger ที่อยากให้คนไทยมีบล็อกสวยได้เองโดยไม่ต้องเขียนโค้ด รวบรวมประสบการณ์ทำธีมและ SEO บน Blogger มาเรียบเรียงเป็นคู่มือชุดนี้ > > [Facebook](https://www.facebook.com/patpisan)[Pantip · LuMoo](https://pantip.com/profile/2448725)