iOS Home Screen Icon

Home Screen Icon ทำเองก็ได้ง่ายจัง

Blogger ท่านใดที่มีอุปกรณ์ตระกูล iPhone,iPod,iPad และอยากทดลองทำ Icon ของ blog ท่านเองสำหรับวางไว้บนหน้า Home ขอเชิญทางนี้ครับ วิธีทำนั้นก็แสนจะง่ายดาย (คือตัวเองพึ่งจะได้ทดลองทำ สุดแสนจะตื่นเต้นจนต้องมาแชร์น่ะครับ ^^)

ขั้นแรก รูปสำหรับทำ Icon ใช้โปรแกรมอะไรก็ได้ที่ถนัด ขอให้ขนาด 114x114 pixels ที่ความละเอียด 72 dpi เป็นใช้ได้ ทำขนาดเดียวพอครับ ใช้ได้กับทุกเครื่อง (จริงๆสามารถทำรูปแต่ละขนาดแยกกันสำหรับแต่ละเครื่องได้ แต่ในทีนี้ขอใช้วิธีที่ง่ายที่สุดละกันนะครับ) รูปก็เรียบๆอย่างที่เห็นด้านล่างครับ เดี๋ยว iOS มันไปลบมุมให้มนกับใส่เงาสะท้อนตอนทำเป็น Icon ให้เอง ดังนั้นอย่าใส่ตัวอักษรอะไรเต็มล้นจนไปถึงมุมรูปนะครับ เพราะมันจะโดนลบออก เสร็จแล้วเซฟไว้ในชื่อ apple-touch-icon-114x114.png พอได้รูปแล้วก็อัพขึ้น blog เลยครับ แล้วคลิกขวาที่รูปแล้วเลือก"คัดลอก URL รูปภาพ"เก็บไว้

ไอคอนการ์ตูนปั้นสิบครับ

ขั้นที่ 2 ไปจัดการกับ html ของ blog ของเราครับโดยไปที่ Template > Edit HTML มองหาบรรทัดที่เขียนว่า<title><data:blog.pageTitle/></title> ครับ (ถ้าหาไม่เจอ ให้กด Ctrl+F แล้วพิมพ์ title แล้วกด Enter ช่วยได้ครับ) แล้วพิมพ์บรรทัดด้านล่างนี้ลงไป

<link href='YOUR_PICTURE_URL' rel='apple-touch-icon'/>

โดยตรง 'YOUR_PICTURE_URL' นั้นให้วางที่อยู่ของรูปที่เราได้ทำการคัดลอกเอาไว้ในขั้นแรกลงไปก็เป็นอันเรียบร้อย สั่งเซฟได้เลยครับ

เข้าไปแก้ไข HTML ที่นี่ครับ

เพิ่มบรรทัดนี้เข้าไปครับ (href แก้เป็นที่อยู่รูปของแต่ละคนนะครับ)

เสร็จแล้วครับ 2 ขั้นตอนแค่นี้เอง ง่ายมั้ยครับ ทีนี้เราลองมาเพิ่มปุ่ม Home Screen กันนะครับ
เริ่มจากเข้าไปที่ blog ของเราด้วย Safari ก่อน มองหาปุ่มนี้ตามในรูปครับ

กดที่ปุ่มนี้นะครับ

เสร็จแล้วเลือก "Add to Home Screen"

ตั้งชื่อที่ต้องการให้แสดงใต้ Icon แล้วกด Add ครับ

ฮูเร่ เท่านี้เราก็จะได้ Home Screen Icon ของ blog ของเรามาปรากฏอยู่บนหน้าจอหลักแล้ว รู้สึกว่า blog เราจะดูทันสมัยน่าเข้ามาอ่านมากขึ้นถึงหลายเท่าเลยทีเดียว (จริงเหรอ) ลองมาทำกันดูนะครับ

ปล. Icon ที่สร้างนี้ใช้ได้กับการเข้าชม blog แบบ Web version เท่านั้นนะครับ ส่วน blog แบบ Mobile นี่พอลองกดเพิ่มปุ่มดูแล้วมันไม่ยอมเอารูปที่เราสร้างมาใช้ กลับใช้วิธี PrintScreen หน้า blog เรามาใช้เป็นปุ่มแทน ไม่รู้เหมือนกันว่าทำไม ต้องหาข้อมูลกันต่อไป

ปล.2 แต่จริงๆ blog แบบ Mobile ตอนนี้การแสดงรูปก็มีปัญหาครับ รูปที่ใช้แบบ original ขนาดใหญ่ๆอย่างการ์ตูนปั้นสิบนี่ รูปมันตกทางด้านขวาตลอด จะเอานิ้วกดเลื่อนมาดูหรือจะย่อลงก็ไม่ได้ กลายเป็นเปลี่ยนไปดูหน้าถัดไปซะแทน ทั้งที่ตอนเปิดใช้งานแรกๆไม่เป็นแบบนี้ ช่วงนี้เลยตัดสินใจปิดการเข้าชม blog แบบ Mobile ชั่วคราวครับ ถ้าทาง Blogger เขาแก้ไขให้เป็นปกติได้แล้วจะกลับมาเปิดการใช้งานอีกทีนะครับ

ปล.3 สำหรับคนที่ชื่อ blog title ยาวมากๆ เวลากดสร้าง Icon ชื่อเวลามาโชว์ที่ Home ชื่ออาจจะโดนย่อให้แสดงแปลกๆนะครับ อย่าง Papa-Noopook นี่ตอนแรกพอกดสร้างปุ่ม ชื่อมันจะกลายเป็น Papa...pook เลยลองแก้ไขโดยเอาตัว-ออก เหลือแค่ PapaNoopook ดู ปรากฏว่าแสดงได้พอดีเด๊ะเลย ดีจัง ^^

ปล.4 เนื่องจาก iPhone ที่ผู้เขียนใช้ยังเป็นแค่รุ่น 3G อยู่เลย จอก็ความละเอียดธรรมด๊าธรรมดา รูปตัวอย่างก็เลยออกมาอย่างที่เห็นเนี่ยล่ะครับ สำหรับผู้อ่านที่ใช้ iPhone 4, iPod Touch gen 3 หรือ iPad ที่มีความละเอียดหน้าจอสูงกว่านี้ OS ก็สูงกว่านี้ อาจจะพบว่าหน้าตาบางอย่างที่แสดงบนจออาจจะไม่เหมือนกัน ก็ขออภัยด้วยนะครับ ยังไงถ้าติดปัญหาที่ไหนอย่างไร อยากสอบถามเพิ่มเติม ก็ส่งข้อความมาคุยกันนะครับ