3 วิธีการปรับแต่ง Font ใน Blogger

สอนทำบล็อก ปรับแต่ง Font Blogger 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

วิธีทำ blogspot สอนสร้างบล็อก
ในที่นี้ รูปแบบ 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">

เมื่อทำการเปลี่ยนค่าในตำแหน่งนี้แล้วบันทึกแม่แบบ ผลที่ได้ก็จะเปลี่ยนไปดังรูป

แต่ง blogspot และทำblog

กรณีที่ 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;
}
และผลที่ได้จากการปรับแต่งจะเป็นดังรูปด้านล่าง

วิธีทำ blogger


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

 สอน blogger


ทำ blogspot

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

ตอนนี้มีความคิดเห็น : 5 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. ถ้าเทมเพลทที่แจกฟรีต้องการปรับขนาดฟ้อนในส่วนของบอดี้ ที่แสดงบทความในบล็อคเกอร์แต่ไม่ต้องการให้ส่วนนของแกดเจ็ทเพิ่มตามด้วยนี่ต้องใช้คำสั่งไหนดีคะ เพราะว่าเหมือนว่าจะปรับได้แต่ส่วนของแกดเจ็ทเท่านั้นเอง บอดี้ไม่เพิ่มเลย หน้าเว็บตัวหนังสือเล็ก อ่านยากค่ะ

  1. @Peeraya:บอก URL บล็อกหรือแม่แบบมาเลยครับเดี๋ยวผมช่วยดูให้

  1. กรณีใช้ template สำเร็จรูป ฟอนต์ไทยสามารถปรับเปลี่ยนได้ไหมคะ หรือว่าเปลี่ยนได้เฉพาะภาษาอังกฤษคะ

  1. อยากเปลี่ยน Font อ่าคับ หาที่เปลี่ยนม่ายเจอ คืออยากจะเปลี่ยน font ตรงเมนูใหม่คับ
    เพราะถ้าพิมพ์ตรงเมนูเป็นภาษาไทย จะไม่สวยเลย ก็เลยจำเป็นต้องพิมพ์เป็นภาษาอังกฤษ
    แต่ถ้าเปลี่ยน font ได้คงออกมาสวยแน่ ๆ ช่วยทีนะคับ ขอบคุณล่วงหน้าค้าบ
    http://samutchedi.blogspot.com/

  1. ขอบคุณมากครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel