เปลี่ยนสีและขนาดตัวอักษรของย่อหน้า (Paragraph) ใน WordPress Gutenberg ทำอย่างไร

gutenberg tab block with setting

ในบทความนี้จะพูดถึงวิธีเปลี่ยนสีและขนาดตัวอักษรของย่อหน้า (Paragraph) ใน WordPress 5.0 Gutenberg ค่ะ สำหรับท่านที่เพิ่งเข้ามาอ่านบทความนี้ และยังไม่คุ้นเคยกับการใช้งาน WordPress เวอร์ชั่น 5.0 ขึ้นไป มลขอแนะนำให้ท่านอ่านบทความ การสร้างบทความสำหรับผู้เริ่มต้นใช้ WordPress นี้ก่อนค่ะ

สำหรับ WordPress เวอร์ชั่น 5.0 ขึ้นไปนั้น การสร้างย่อหน้าเราสามารถทำได้ง่ายมากเลยค่ะ เพียงแค่เคาะ Enter (ปุ่ม Enter บนคีย์บอร์ดของเรานั่นแหละค่ะ) หรือ หากต้องการความถูกต้องแบบชัวร์ๆ เราก็แค่เลือก Add Block แล้วเลือก Paragraph ก็ได้ค่ะ (ดังรูปด้านล่าง)
add paragraph block

นอกจากนี้ การเปลี่ยนสีและขนาดตัวอักษรของย่อหน้า ก็ทำได้หลากหลายกว่าเวอร์ชั่นเก่าอีกค่ะ เพราะเวอร์ชั่นเก่าเนี่ยจะกำหนดขนาดตัวอักษรของย่อหน้าได้ตามไซส์ที่มีมาให้เลือกเท่านั้น แต่เวอร์ชั่น 5.0 ขึ้นไปเนี่ย เราจะกำหนดขนาดเท่าไหร่ก็ได้ค่ะ ส่วนการเปลี่ยนสีของตัวอีกษรเนี่ย ถ้าเป็นเวอร์ชั่นเก่าไม่รู้ว่าเพื่อนๆ เคยเจอปัญหาแบบมลไหมคะ คือแบบว่า เราอยากได้สีแบบเนี้ยยย เบอร์เนี้ยเลย แต่ไม่รู้จะกำหนดได้ยังไง ถึงแม้จะมีแถบสีให้เราเลือก แต่ก็ไม่ตรงกับสีที่เราต้องการ และต่อให้เรามีโค้ดสีก็ยังเปลี่ยนสีไม่ได้อยู่ดีเพราะมีแค่แถบสีมาให้เลือกแค่นั้น.. T_T

ที่เกริ่นมาอาจจะยังไม่เห็นภาพ.. เรามาลองทำกันเลยดีกว่าค่ะ

  1. คลิกที่ย่อหน้า ที่เราต้องการเปลี่ยนสีหรือขนาดค่ะ
    ในที่นี้ มลจะเปลี่ยนสี และ ขนาด ของย่อหน้า ดังรูป ค่ะ
    click at paragraph that wanna setting
  2. ให้เราสังเกตที่ด้านขวา จะเห็นแท็บที่ชื่อ Block นะคะ
    ซึ่งแท็บนี้จะประกอบด้วย การตั้งค่าตัวอักษร (Text Settings) และ 2. การตั้งค่าสี (Color Settings) ดังรูปค่ะ
    tab block with setting
  3. เราจะเริ่มจากการเปลี่ยนขนาดตัวอักษรของย่อหน้ากันก่อนนะคะ
    มาดูที่หัวข้อ Text Settings กันค่ะ
    เราจะเห็นว่า มีขนาดตัวอักษรให้เราเลือกอยู่ ซึ่งตอนนี้ค่าที่กำหนดไว้ คือ ขนาด Normal หากเราไม่ได้ซีเรียสกับขนาดตัวอักษร เราก็เลือกจากขนาดมาตรฐานที่เขามีไว้ให้ก็ได้ค่ะ โดยระบบจะมีขนาดให้เราเลือกได้ 4 ขนาด คือ Small, Normal, Large และ Huge ค่ะ (ดูรูปด้านล่างประกอบไปด้วยนะคะ)
    standard font size
    แต่ถ้าหาก 4 ขนาดมาตรฐานที่ระบบมีให้มายังไม่โดนใจเรา… เรายังมีทางเลือกอีกทาง คือ ช่องที่มีลูกศรขึ้นลงนี้ค่ะ
    change font size by number
    ช่องนี้.. เราใส่ขนาดตัวอักษรที่เราต้องการได้เลยค่ะ เช่น ขนาด 14 ดังรูป
    sample of change font size
    จากรูปตัวอย่างด้านบน มลได้เปลี่ยนขนาดจาก ขนาด Normal ไปเป็น ขนาดตัวอักษร 14 ค่ะ
    ทีนี้เราก็สามารถกำหนดขนาดตัวอักษรของย่อหน้าได้ดั่งใจเราแล้วล่ะค่ะ
    ส่วนข้างๆ ช่องใส่ขนาดตัวอักษร ก็คือ ปุ่ม Reset ค่ะ มีไว้เผื่อว่าเราอยากแก้ไขให้เป็นขนาดดั้งเดิมของระบบ (ขนาด Normal) เราก็สามารถคลิกที่ปุ่มนี้ได้เลยค่ะ
  4. ต่อไป เราลองเปลี่ยนสีของตัวอักษรของย่อหน้ากันค่ะ
    ให้คลิกที่ หัวข้อ Color Settings ค่ะ เมื่อคลิกแล้ว เราจะเห็นว่ามี สิ่งที่เราสามารถกำหนดสีได้ 2 อย่างค่ะ คือ สีพื้นหลัง (Background Color) และ สีตัวอักษร (Text Color) ดังรูปด้านล่างค่ะ
    coloe settings
    ระบบจะมีสีมาตรฐานมาให้เรา 5 สีค่ะ คือ สีฟ้าเข้ม สีกรม สีดำ สีเทา และสีขาว
    หากเราต้องการเลือกสีอื่นๆ ให้คลิกที่ Custom Color ดังรูปค่ะ
    click bg custom color
    สมมติว่า.. จะเปลี่ยนสีพื้นหลังเป็นสีฟ้า ก็คลิกที่ Custom Color ค่ะ เราจะเห็นแถบสีเส้นเล็กๆ กับ แถบสีอันใหญ่ บนแถบสีแต่ละแบบจะมีปุ่มสีขาวให้เราเลื่อนเพื่อเลือกสี ดังรูปค่ะ
    change bg color
    เมื่อเราได้โทนสีที่ต้องการแล้ว ให้คลิกที่ Custom Color อีกครั้งค่ะ
    สำหรับสีตัวอักษร ก็ทำเช่นเดียวกันกับเปลี่ยนสีพื้นหลังค่ะ
    ในที่นี้ มลจะเปลี่ยนสีตัวอักษรของย่อหน้าเป็นสีขาวค่ะ มลจึงเลือกสีที่ระบบมีมาให้อยู่แล้ว คือ สีขาว นั่นเองค่ะ เมื่อเปลี่ยนสีเสร็จแล้ว ก็จะเป็นดังรูปค่ะ
    change font color