ย่อหน้าอย่างไร ให้ดูดี

01 สิงหาคม 2010 ผู้ชม: 6210

จากบทความที่แล้ว "จัดบทความอย่างไร ให้ดูดี" ซึ่งได้กล่าวถึงการเว้นระยะห่าง การใส่เส้น Read More หรือการใส่ใจองค์ประกอบต่าง ๆ ใน Editor แต่เนื่องจากครั้งนั้นเป็นการใช้ Editor แบบเบสิค ซึ่งคงทำให้ไม่สามารถจัดวางอะไรได้เยอะ ในตอนนี้ ผมจะสอนการใช้ JCE Editor ก็แล้วกันครับ ลองมาดูว่าปัญหาที่เกิดขึ้นจากการใช้ JCE Editor จัดบทความนั้น จะมีอะไรบ้าง แล้วจะแก้ปัญหาอย่างไร

ออกจะข้ามรุ่นไปหน่อยในหมวด Basic ซึ่งว่ากันจริง ๆ แล้วผมก็ควรที่จะสอนการติดตั้ง Extension ก่อน เพราะเจ้า JCE นี้ก็ต้องถูกติดตั้งเหมือนกัน แต่ก็อนุมานไปว่าทุกคนติดตั้งเป็นกันแล้วละกันนะครับ แต่ที่สอนคือ พื้นฐานกันใช้งานเครื่องมือ Editor เพื่อจัดการรูปแบบบทความที่ต้องการ จะว่าไปบทความนี้มันก็ทั้ง Basic, Trick, และแนะนำ Extension 3 In 1 เลยนะเนี่ย , เมื่อเรามี JCE Editor แล้ว ลองมาดูทีละเหตุการณ์กันครับ

ต้องการย่อหน้า บรรทัดแรกเท่านั้น

ปกติแล้วการพิมพ์บทความทั่วไปใน Editor นั้น มันไม่เหมือน MS Word ซะทีเดียวหรอกครับ ทำงานแสดงผลออกมาก็คือ HTML ดี ๆ นี่เอง ดังนั้นเวลาต้องการให้มันเป็นอะไร ก็ควรจะสั่งในภาษาที่มันเข้าใจได้ มันจึงจะแสดงผลออกมาในรูปแบบที่เราต้องการ

การย่อหน้านั้น เราอาจไม่ทราบครับ มักง่ายโดยการเว้นวรรค Space Bar เนี่ยแหล่ะ แต่ตามความเชื่อของผมนั้น มันก่อให้เกิดการสิ้นเปลือง (นิดนึง) เพราะการเว้นวรรนั้น จะถูกแทนที่ด้วยข้อความ " &" ซึ่งหากเว้นวรรค 10 ครั้ง ก็จะต้องมีข้อความนี้ซ้ำ ๆ 10 ชุด แถมเวลาเราเอาเม้าส์ไปไฮไลท์ หรือ Drag ก็จะเกิดพื้นที่ว่าง ซึ่งก็นะ ผมบอกแล้วว่ามันนิดนึง

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

จากนั้น ช่อง Style: ให้ใส่ text-indent: 20px; ไปครับ ตัวเลข 20 จะเปลี่ยนเอาตามเหมาะสมก็ได้ครับ มันคือระยะที่จะย่อหน้าครับ ตัวเลขมาก ก็ย่อหน้ามาก จากนั้นกดปุ่ม Insert ครับ

ลองมาดูความแตกต่างครับ

จะเห็นว่า ทั้ง 2 บรรทัด มีการย่อหน้าเหมือนกันครับ แต่การย่อหน้โดยใช้ indent นั้นจะไม่เกิดข้อความ " " ให้รกสายตา และผมยังเชื่อว่า อาจจะมีผลต่อการเก็บข้อความจาก Search Engine ด้วยนะเออ ทำให้ไม่ต้องเก็บอะไรที่ไม่น่าเก็บไปด้วย

แทรกรูป ไม่ให้ชิดข้อความ

งานนี้เหมือนย้อนความจำกันหน่อยครับ ถ้าปกติแล้ว เรา Insert รูปหน้าข้อความใด ๆ ก็จะออกมาแบบนี้

ไม่ต้องย้ำให้ดู ก็เห็นแล้วครับว่า มันไม่ค่อยงาม ข้อความชิดภาพ แถมตกลงมาท้ายรูปภาพอีก วิธีแก้ให้ทำดังนี้ครับ ในขั้นตอนการ Insert รูปภาพ ให้กำหนด Alignment เป็น Left และให้กำหนด Margin Right 15 ครับ ปกติแล้วถ้าหากใช้ Editor ธรรมดา จะไม่สามารถกำหนด Margin แยก บน ขวา ล่าง ซ้าย ได้ ให้ทำการเช็คบ๊อก Equal Values ออกครับ เราจะสามารถใส่ค่า Margin แยกกันได้ , จากนั้น ก็กด Update เลยครับ

เห็นความแตกต่างไหมครับ ดูดีขึ้นเยอะ ทั้ง ๆ ที่ขั้นตอนมีนิดเดียวเอง

ข้อความ Intro Text และ Full Text ชิดกัน

บางครั้งการใช้ปุ่ม Read more มาคั่นข้อความ Intro Text นั้น อาจจะมีจุดประสงค์ต่างกันไป เช่น อาจจะให้เห็นข้อความเสี้ยวหนึ่ง แต่มันเป็นส่วนหนึ่งของข้อความ Full Text ทั้งหมด , หรืออาจใช้เป็นข้อความเกริ่นนำ เชิญชวนให้น่าอ่านก่อน แล้วย่อหน้าต่อไป ก็เป็นเนื้อหาทั้งหมดก็ได้ ซึ่งผมบอกเลยครับว่า น้อยคนนักจะสังเกตจุดนี้ว่า เมื่อมีการใช้ Read more คั่นระหว่างข้อความแล้ว หากผู้ใช้งานทั่วไปเข้ามาอ่านบทความนั้น ข้อความ Full Text ก็จะถูกดันขึ้นไปติดกับ  Intro Text ทันที บางท่านอาจแก้โดยการเคาะ Enter ลงมาเยอะ ๆ ซึ่งผมบอกเลยว่า มันไม่แน่นอนครับ บางครั้งใน Editor นั้นเรา Enter มาซะเยอะ แต่นั่นมันในมุมมอง Editor ครับ พอเราไปมองหน้าเว็บ ก็อาจจะเห็นว่า เหมือน Enter ลงมานิดเดียวเอง อันเนื่องมาจาก Intro Text สั้นเกินไป เป็นต้น

อ่านแบบนี้ งงครับ ผมรู้ งั้นลองไปดูตัวอย่างกัน

พอพิมพ์ข้อความ Intro Text เสร็จ ผมก็กดปุ่ม Read more ต่อ จากนั้นก็พิมพ์ข้อความที่เหลือ คุณจะเห็นในมุมมองแบบนี้ครับ

แต่ถ้าคุณลองสลับมุมมองระหว่าง Editor กับ HTML เพียงแว๊ปเดียว คุณก็จะเห็นมันเป็นแบบนี้

(หากใช้ Editor อื่น อาจมองเห็นเส้น Read more เป็นในรูปแบบอื่นครับ เช่น เส้นสีแดง รอยหยัก เป็นต้น)

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

เมื่อลองคลิก Read more อ่านดูครับ

เส้นสีแดงนั้น ผมขีดขึ้นเอง เพื่อให้เห็นว่า เดิมทีแล้ว เรามีการแบ่ง Read more ไว้อย่างไร , เห็นไหมครับว่า ข้อความด้านล่างจะถูกเขยิบขึ้นไปชิดกับ Intro Text เลย ซึ่งบางกรณีนั้น เราอาจไม่ต้องการให้เป็นแบบนี้ ยิ่งส่วนตัวผม อยากจะให้มันขึ้นย่อหน้าใหม่เสียด้วยซ้ำไป แนวทางแก้ไขคือ ใช้ Table มาช่วยครับ

ผมสร้างตารางขึ้นมาขนาด 1 คอลัมน์ และ 1 แถว ครับ เพื่อใส่ Intro Text ไว้ในนี้

อย่างที่เห็นครับ ผมนำ Intro Text เข้าไปจัดในตารางเลย จัดเหมือนเดิมทุกอย่าง จากนั้นวาง Read more ไว้ใต้ตาราง แล้วก็วางข้อความที่เหลือเหมือนเดิมเลยครับ ลองไปดูผลกัน

เส้น Read more จะถูกดันมาอยู่ใต้ตารางแทนครับ ซึ่งจะทำให้ข้อความ Full Text ไม่ถูกดันขึ้นไปเหมือนเดิม เราก็สามารถแบ่งย่อหน้าตามต้องการได้แล้วครับ

Indent ไม่ทำงาน

แน่นอนครับ ปัญหานี้ใครไม่เจอไม่รู้สึก 555+ ผมบอกให้สั้น ๆ เลยว่า เกิดจากการใส่สี หรือ ตัวหนา ไปก่อนครับ ซึ่งทำให้เมื่อเรากำหนด Style แล้ว มันจะถูกกำหนดไปอยู่ใน Tag อื่นครับ จากตัวอย่างนี้ ผมใช้ข้อความว่า "แนะนำบทความน่าสนใจ" แล้วต้องการให้ย่อหน้า แต่ มันไม่ย่อหน้าครับ

เมื่อมองในรูปแบบ HTML ก็เห็นแบบนี้ครับ

พบแล้วครับ Style มันดันไปอยู่ใน Tag stong ครับ อ้าวววว เอ้อ นะ วิธีแก้ไขคือ ย้ายมันไปอยู่ใน Tag p แทนครับ

Indent ก็จะทำงานตามปกติ ดังนั้น การใช้ JCE ผมแนะนำเลยครับว่า ควรจัด Format ตามที่ต้องการให้ครบก่อนครับ ทั้งการย่อหน้า เว้นวรรคต่าง ๆ แล้วค่อยปิดท้ายด้วยการใส่สี ตัวหนา ตัวเอียง หรือขีดเส้นใต้ , ก็เข้าใจครับว่ามันอาจไม่ถนัดมือ แต่ก็ยังดีกว่ามานั่ง Copy Code ภายหลังเองใช่ไหมล่ะครับ

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