Drop cap การใส่อักษรตัวใหญ่ตัวแรกในบทความ

Friday, September 13, 2013

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

Drop cap

การทำให้อักษรตัวแรกในบทความเป็นตัวใหญ่ โดยตัวอักษรจะมีขนาดใหญ่และยื่นลงมาหลายบรรทัดด้านบนอยู่ในระดับเดียวกันกับข้อความที่ตามหลัง Drop cap ใช้เพื่อดึงดูดความสนใจของผู้อ่าน จะพบเห็นบ่อยๆในพวก ข่าว หนังสือพิมพ์ magazines

มาดูวิธีการทำให้ตัวอักษรตัวแรกกลายเป็นตัวใหญ่แบบง่ายๆ ซึ่งพอเราใส่โค๊ดลงใน template โดยไม่ต้องไปแก้ไขใน post(ไม่ยากหรอก) แล้วมันสามารถเปลี่ยน post ทั้งหมดให้อักษรตัวแรกกลายเป็น Drop cap ได้เลย รวมถึง Post ในอนาคตด้วย โอ้ว!! (ถ้าไม่อนากให้เปี่ยนทั้งหมดก็ปรับแต่งได้นะ)

สำคัญ เพื่อจะให้มันแสดงอักษรแรกเป็นตัวใหญ่ดังใจเรา สิ่งแรกคือบทความของเราต่องขึ้นต้นด้วยตัวอักษร สระ พยัญชนะ เครื่องหมายใดๆก็ได้ หากคุณใส่ รูปภาพ div หรือองค์ประกอบทางHTML เพราะ code จะไม่ทำงานเลย

Step 1. ใส่ รูปแบบของ Drop cap ใน CSS

1. ไปที่ Template>Edit HTML
2. ใส่ CSS code ย่อ ต่อไปนี้ ไว้หน้าบรรทัด ]]></b:skin> ใน template (หากเป็น Designer template ให้ ใส่ลงใน custom CSS editer ได้เลย)

 .post-body:first-letter, .post-body .dropcap:first-letter {font-weight:bold; font-size:65px; float:left; padding:0; margin:-4px 5px 0px 0px; position: relative; background-color:none; line-height:0.9;}

Note: หาก blogger ท่านใดเขียนบทความจาก Windows Live Writer ให้แทนที่ post-body:first-letter ด้วย .post-body p:first-child:first-letter เพราะว่า Windows Live Writer จะใส่ ทำให้เป็น paragraphหรือย่อหน้าโดยอัตโนมัติ

3. กด Preview ดูตัวอย่างว่าเป็นไง
หากขนาดอักษรยังไม่ได้ดั่งใจก๋สามารถปรับแต่งได้ที่จากในcodeตรง font-size:65px เปลี่ยนเลข 65 เป็นขนาดอักษรที่ชอบได้เลย
4. Save เมื่อเราได้แบบที่เราชอบแล้ว

Step 2. ใส่คำสั่งกำหนดใช้ Dropcap class ลงใน Post

ใช้ขั้นตอนนี้ก็ต่อเมื่อเราทำตาม Step 1. แล้ว(เน้นว่าทำขั้นที่ 1. ด้วยนะ) Drop cap ไม่แสดงในบทความ (อาจเนื่องมาจากเหตุผลใดเหตุผลหนึ่งที่ให้ไว้ใน สำคัญ ด้านบน)
จำเป็นต้องเข้าไปแก้ไขในทุก post ที่มีปัญหา
1. เข้าไปใน Post ที่ต้องการแก้ไข
2. สลับไปแก้ไขใน HTML mode
3. ล้อมตัวอักษรหรือคำที่เราต้องการให้เป็น Drop cap ใว้ในโค๊ดด้านล่าง

ล้อมให้อักษรใน post ที่คุณอยากให้เป็น Dropcap อยู่ในนี้ โดยจะให้เป็น Dropcap กี่ตัวก็ได้ตามใจ

4. Preview หากพอใจแล้วกด Save

Tips:

หากต้องการให้แสดงแบบ Drop cap ในบางpost ที่เราต้องการ ให้ลบ ".post-body:first-letter" ใน Step 1.ออก แล้วทำตาม Step 2.
หากเข้าไปดู post ของเราใน HTML Mode แล้วมันขึ้นต้นด้วย แล้ว โค๊ดอาจจะไม่ทำงานให้ลองเปลี่ยน "post-body:first-letter" เป็น ".post-body p:first-child:first-letter"

Step 3. วีธีที่ผมชอบที่สุด

หากทำตามขั้น Step 1. และ Step 2. ลองจนหมดแล้วยังไม่ได้อีก อย่าพึ่งท้อ ลองนี้ครับ ลืมขั้นตอนทั้งหมดไปได้เลยครับเรามาว่ากันที่โค๊ดบรรทัดเดียวเลยคืออยากให้ post ไหนแสดงเป็น Drop cap ก็ใส่ code ตามด้านล่างนี้

ล้อมให้อักษรใน post ที่คุณอยากให้เป็น Dropcap อยู่ในนี้ โดยจะให้เป็น Dropcap กี่ตัวก็ได้ตามใจ

ต่อจากนั้นคุณจะไปทำให้ตรงไหนก็ได้ให้เป็น drop cap อีก ก็เอาโค๊ดไปใส่อีกเช่นเคยแต่ไม่ต้องใส่ แล้ว ใส่ครั้งเดียวก็พอ

จบแล้ว ลุยเลยครับ

Your Keyword Here!

Pages