Font ใน Blogger สามารถกำหนดและปรับเปลี่ยนได้ ทั้งเปลี่ยนโดยการใช้เครื่องมือของ Blogger หรือ แก้โดยการกำหนด CSS ลงไปใน Templates หรือ ใช้จาวาสคริปต์ก็ได้ สำหรับในบทความนี้ผมจะสอนให้ปรับแต่งด้วยวิธีพื้นฐานก่อน และการปรับแต่งด้วยจาวาสคริปต์ก็จะได้นำมาเล่าให้ฟังในบทความถัดไป ก่อนจะเริ่มปรับแก้ Font ผมอยากแนะนำแหล่งการเรียนรู้เกี่ยวกับโค้ดที่กำหนดรูปแบบของ Font ซึ่งคุณควรจะรู้แบบคร่าว ๆ บ้าง เพื่อเป็นประโยชน์ในการปรับแต่ง Font บน Blogger ต่อไป (อ่านผ่าน ๆ ให้พอรู้ไม่ต้องจำครับ)

แหล่งการเรียนรู้เกี่ยวกับโค้ดที่กำหนดรูปแบบของ Font

http://www.w3schools.com/css/css_font.asp
http://www.tizag.com/cssT/font.php
http://www.echoecho.com/csstext.htm

วิธีการเข้าไปปรับแก้รูปแบบของ Font ใน Blogger ซึ่งแบ่งออกเป็น 3 กรณีตามรูปแบบของ templates ต่าง ๆ ดังนี้

กรณีที่ 1 ถ้า Font ใน Template ถูกกำหนดเป็นตัวแปร

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

ในที่นี้ผมจะยกตัวอย่างการกำหนด Font ใน Templates Minima และสมมติว่าตัวอย่างนี้ผมต้องการปรับแต่ง Font ที่กำหนด title ของบล็อก

ก่อนอื่นเราต้องรู้ตำแหน่งของโค้ดที่กำหนดตัวแปรเหล่านี้เสียก่อน ซึ่งคุณสามารถหาชุดโค้ดของตัวแปรเหล่านี้ได้จากส่วนบนของ templates และถูกกำหนดด้วยชุดโค้ดที่มีลักษณะคล้ายกับโค้ดต่อไปนี้

/* Variable definitions
   ====================
   <Variable name="bgcolor" description="Page Background Color"
             type="color" default="#000" value="#000000">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9ad" value="#99aadd">
   <Variable name="pagetitlecolor" description="Blog Title Color"
             type="color" default="#ccc" value="#cccccc">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#777" value="#777777">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#ad9" value="#aadd99">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#333" value="#333333">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#777" value="#777777">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#999" value="#999999">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#a7a" value="#aa77aa">
   <Variable name="bodyfont" description="Text Font"
             type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
   <Variable name="headerfont" description="Sidebar Title Font"  type="font"
             default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
   <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 200% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
   <Variable name="descriptionfont" description="Blog Description Font" type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
   <Variable name="postfooterfont" description="Post Footer Font" type="font"
             default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
   <Variable name="startSide" description="Start side in blog language"
             type="automatic" default="left" value="left">
   <Variable name="endSide" description="End side in blog language"
             type="automatic" default="right" value="right">
*/

โค้ดสีชมพูที่ได้ Hilight เอาไว้ เป็นส่วนที่กำหนดรูปแบบของ Font ของ Blog Title และถูกกำหนดเป็นตัวแปรชื่อ pagetitlefont


ในที่นี้ รูปแบบ Font ที่กำหนดเอาไว้เป็นตัวหนา และมีขนาดใหญ่กว่าปกติ 2 เท่า และรูปแบบ Font คือ Trebuchet MS แบบไม่มีเชิง  และ ถ้าหาก เครื่องของผู้อ่าน หรือ Browser ของผู้อ่านไม่มี font  Trebuchet MS ก็จะแสดงผลเป็น Font Trebuchet และ Verdana ตามลำดับ

ในส่วนถัดมาเมื่อสำรวจโค้ดใน CSS โค้ดแล้วคุณจะพบการกำหนด Style ของ Font ดังนี้

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

จะเห็นว่ารูปแบบของ Font ของ id header เป็นการเรียกใช้ค่าตัวแปร pagetitlefont  ที่ได้กำหนดเอาไว้ตามข้างต้นที่ได้กล่าวมาแล้ว
ถ้าคุณต้องการแก้การกำหนด Font ในกรณีที่ Template ของคุณถูกกำหนดแบบเดียวกับกรณีนี้ก็สามารถทำได้โดยใช้วิธีปรับค่าตัวแปร pagetitlefont  ใหม่ดังนี้

ในที่นี้ผมจะเปลี่ยนขนาดของตัวอักษรจาก 200% เป็น 300%  และจะเปลี่ยน รูปแบบของ Font ด้วย ดังนี้

<Variable name="pagetitlefont" description="Blog Title Font" type="font"
          default="normal bold 300% 'Lucida Handwriting',Arial,Trebuchet,Verdana,serif" value="normal bold 300% 'Lucida Handwriting',Arial,Trebuchet MS,Trebuchet,Verdana,serif">

กรณีที่ 2 ถ้ามีการกำหนด Font ให้กับ Layout แต่ละส่วนโดยตรง
ในกรณีเป็น template ฟรีที่ทำแจกกันอยู่ทั่วไป ส่วนใหญ่จะมีการกำหนด Font ให้กับแต่ละ element ของ template โดยตรง
เช่น ผมลองเปลี่ยน template เป็น template ที่ดาวน์โหลดมาจาก Themecraft.net ที่มีชื่อว่า Belinda

สมมติว่าในที่นี้ผมต้องการปรับแต่ง Font ของส่วน title ของบล็อก และได้ทำการวิเคราะห์โค้ดใน Template แล้วพบโค้ดที่กำหนด Font เป็นชุดของโค้ดดังต่อไปนี้

#header h1 {
margin-bottom: 0px !important;
padding: 24px 0 0 15px;
font-family: Arial, Helvetica, Sans-serif;
font-weight: bold;
font-size: 48px;
}

ผมจะเปลี่ยนรูปแบบอักษร และใส่เงาสีขาวเพิ่มเข้าไป โค้ดใหม่ที่ได้เป็นดังนี้

#header h1 {
margin-bottom: 0px !important;
padding: 24px 0 0 15px;
font-family:Lucida handwriting,Arial, Helvetica, Sans-serif;
font-weight: bold;
font-size: 40px;
text-shadow:0.5px 0.5px 0.5px #fff;
}

กรณีที่ 3 ถ้า Template ที่คุณใช้สร้างจาก Blogger in Draft
กรณีนี้คุณสามารถเข้าไปปรับแต่งได้ที่ รูปแบบ(การออกแบบ) >> เครื่องมือการออกแบบแม่แบบ

 




สำหรับวิธีการปรับแต่ง Font บน Blogger ยังมีวิธีอื่นอีก ซึ่งผมจะนำมาเล่าให้ฟังในบทความถัดไปครับ สุดท้ายหวังว่าบทความนี้จะเป็นแนวทางในการปรับแต่ง Font บน Blogger ให้คุณได้นะครับ สวัสดีครับ