Logo Webmonster Lab - สอนทำเว็บไซต์ธุรกิจ WordPress, Elementor โดย อ.ยุ้ย กัญญ์ชิตา วริทธิ์ทินานนท์Logo Webmonster Lab - สอนทำเว็บไซต์ธุรกิจ WordPress, Elementor โดย อ.ยุ้ย กัญญ์ชิตา วริทธิ์ทินานนท์Logo Webmonster Lab - สอนทำเว็บไซต์ธุรกิจ WordPress, Elementor โดย อ.ยุ้ย กัญญ์ชิตา วริทธิ์ทินานนท์Logo Webmonster Lab - สอนทำเว็บไซต์ธุรกิจ WordPress, Elementor โดย อ.ยุ้ย กัญญ์ชิตา วริทธิ์ทินานนท์
  • คอร์สเรียน
    • เรียนตัวต่อตัว : WordPress
    • สถานที่เรียน
    • ฝึกอบรมสำหรับองค์กร
    • บรรยายพิเศษมหาวิทยาลัย
  • รีวิว
    • รีวิวจากผู้เรียน
    • ตัวอย่างเว็บไซต์ (ใช้เรียน)
    • ผลงานออกแบบ UX/UI
    • ประวัติการสอน
  • บทความ/ฮาวทู
    • บทความแนะนำ 😊
    • วิดีโอ ฮาวทู 🎥
    • WordPress
    • Design
    • Marketing for SME
    • Tips & Tools
    • From Experience
    • My Story
  • เกี่ยวกับ
    • เกี่ยวกับ : ยุ้ย กัญญ์ชิตา
    • บทความส่วนตัว
  • ติดต่อ
สอบถามคอร์ส
✕

ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ

Published by พี่ยุ้ย กัญญ์ชิตา
Categories
  • Tips & Tools
Tags
  • add-ons
  • browser
  • code
  • CSS
  • HTML
  • tool
inspect-element-tool-featured
  • FacebookFacebook
  • XTwitter
  • LINELine

นักพัฒนาเว็บไซต์ love เครื่องมือนี้บน browser กันมั่กมาก มันคือ “Inspect Element” หรือ “Developer Tools” ช่วยคนทำเว็บ save เวลางมโค้ดได้เยอะมาก ลดความเสี่ยงแก้โค้ดผิดที่ ไม่ต้องโยนไฟล์กลับไปกลับมา จอร์จใจจริงๆ เอาไปเลย 5 ดาว

Inspect Element เป็นการจำลองการแก้ไขโค้ดว่าออกมาแล้วจะได้ผลลัพธ์แบบไหน refresh หน้าจอก็หายไป ไม่มีผลกระทบกับหน้าเว็บจริงจนกว่าเราจะอัพโหลดตัวที่แก้ไขใหม่ขึ้นไปแทนที่

Inspect Element มันช่วยอะไรเราได้บ้าง?

  • ช่วยให้เรา แก้ไข HTML + CSS ได้ง่ายขึ้น preview กันสดๆ ชอบใจแล้วค่อยเข้าไปแก้ไขที่ไฟล์จริง
  • ช่วยจับ element ต่างๆ ให้เรารู้ว่าจะไปต่อที่ <tag> ไหน หรือต้องเข้าไปแก้ไขที่ไฟล์ไหนของ WordPress Theme
  • ช่วยแกะ code สบายบรื๋อ
  • พรีวิวหน้าจอ Mobile, Tablet หรือกำหนดขนาดหน้าจอเองก็ได้ เริ่ดแมะ
  • ตรวจดู Errors, Warnings, Log ได้
  • ตรวจสอบความเร็วการโหลดหน้าเว็บได้ แยกเป็นชิ้นๆ ให้เลย
    (สามารถเปิด Inspect Element ที่เว็บของชาวบ้านเค้าได้ด้วยนะ แล้วส่องดูซิว่าของใครเร็วกว่ากัน อิอิ)

inspect-element-tool-chrome-firefox-rightclick-3

วิธีใช้ : Inspect Element บน Chrome และ Firefox

  1. กด F12 เรียก Inspect Element ขึ้นมา
    หรือกำหนดตำแหน่งไปเลยโดยคลิกขวา ตรงส่วนที่เราต้องการ แล้วเลือก Inspect element
  2. ก็จะขึ้นจอมาทันที! ทีนี้ล่ะสนุก จัดไปตามใจปรารถนา (จะลองเปลี่ยนสี เพิ่มขนาดฟอนต์ ได้หมดจ้า)
  3. เสร็จแล้วก็จำค่าแต่ละตัวที่เราปรับแก้เอาไว้
    (จดใส่กระดาษ หรือ save ไว้ใน text file ก่อนก็ได้) แล้วนำไปแก้ไขที่ไฟล์จริง
  4. อัพโหลดขึ้นไปทับไฟล์เก่า เป็นอันเสร็จเรียบร้อย
    // ถ้าใช้ WordPress ก็ง่ายเลย โดยเข้าไปแก้ไขที่ Editor ของ theme ได้เลย

สำหรับ WordPress
เราเพิ่ม CSS เข้าไปได้เลย โดยที่ไม่ต้องไปยุ่งกับ CSS เดิมๆ ที่มากับ theme … วิธีคือ

  • เข้าหลังบ้าน WordPress แล้วไปตามทางนี้นะ (เฉพาะธีมที่รองรับ)
    เมนู Appearance / Customize / Additional CSS (อยู่ล่างๆ หน่อย)
  • สำหรับธีมพรีเมี่ยม (ซื้อ) ที่มี เมนู Custom CSS สามารถเอาไปวางตรงนี้ได้เหมือนกันค่ะ
    ส่วนใหญ่อยู่ใน Theme Options ชื่อเรียกอาจแตกต่างกันในแต่ละธีม

*** อย่าลืม backup ของเดิมก่อนนะฮะ ***


Inspect Element : แก้ไข HTML + CSS ได้จนกว่าจะพอใจ

พร้อม preview กันสดๆ ถ้าไม่ชอบใจก็แค่ refresh หน้าจอ แล้วแก้ใหม่

inspect-element-tool-firefox

Additional CSS ที่หลังบ้าน WordPress (เฉพาะธีมที่รองรับ)

wordpress-additional-css-webmonsterlab

Theme Options ในธีมพรีเมี่ยม

  • Premium WordPress Themes ส่วนใหญ่ จะมี Theme Options ให้ปรับแต่ง CSS ได้
  • เราก็แค่ copy CSS ที่ทำใน inspect มาวาง แล้ว Save (เอาเฉพาะที่ปรับเปลี่ยนมาวาง ไม่ต้องทั้งหมดนะคะ)
  • หล่อขึ้นทันทีค่ะ

wordpress-theme-options-custom-css-webmonsterlab

ถ้าใช้ Theme ที่ไม่มีให้แก้ไข CSS ตรงหลังบ้านได้ ทำไงดี?

  • ก็ต้องใช้วิธีทำ style.css ของเราเอง
  • แล้ว up ขึ้น hosting เอาไปวางไว้ใน Child Theme นะฮะ

สำหรับคนที่ใช้ Theme Astra (เวอร์ชั่นฟรี) คลิกดู วิธีการทำ Child Theme ได้เลยจ้า


Inspect : ตรวจดู Errors, Warnings, Log ได้

  • Tab-Console

inspect-element-tool-firefox-log

Inspect : ตรวจสอบความเร็วการโหลดหน้าเว็บได้

  • Tab-Network

inspect-element-tool-firefox-network

Inspect Element หรือ Developer Tools นอกจากเป็นเครื่องมือช่วย preview การปรับแก้ HTML + CSS แล้ว ยังมีความสามารถอื่นๆ ที่จำเป็นสำหรับ Web Developer อยู่มากมาย มีให้ใช้กันทุก browser วิธีใช้คือๆ กัน แล้วแต่ความชอบ ความถนัดเลยค่ะ … สำหรับพี่ยุ้ยเองใช้สลับกันระหว่าง Firefox กับ Chrome เพราะดูง่ายดี ใช้แก้ CSS + เจาะโค้ด theme WordPress ใส่ banner เองประจำ อิอิ :)

Tips:

  • ใช้คู่กับ ColorZilla ของ Firefox แล้วยิ่งพริ้ว มันช่วยดูดสีตามหน้าเว็บที่เราชอบแล้ว copy โค้ดสีออกมาใส่ Inspect Element ได้เลย
  • สำหรับ WordPress หากมีการแก้ CSS ของ theme แล้ว ต้องระวังเรื่องการอัพเดท theme! เพราะจะถูกแทนที่ด้วยค่า default ของ theme ตัวที่อัปเดตมาใหม่ ส่วนใหญ่แล้วเอา style.css อันเดิมทับตัวใหม่ได้ แต่บาง theme มีการอัปเดตโครงสร้าง CSS ใหม่ด้วย ทับแล้ว error พังทันที ต้องดูดีๆ นะ
  • แต่จะไม่เป็นปัญหาเมื่อเราทำ Child Theme เวลาแก้ style หรือ css อะไร ก็มาทำที่ Child Theme ที่เราสร้างไว้ แบบนี้เวลาเราอัปเดต theme จะไม่ถูกทับจ้า (แนะนำอย่างแรง ให้ทุกคนทำ Child Theme ตั้งแต่แรกเลยนะคะ อัปเดตธีมจะได้ไม่บ้ง)
  • อ่านบทความ อยากรู้ว่าสีแบบนี้ใช้โค้ดอะไร ใช้ตัวดูดสี ColorZilla ดูสิ

บทความ/รูปภาพ : Webmonster Lab | Yui Kanchita


  • FacebookFacebook
  • XTwitter
  • LINELine
พี่ยุ้ย กัญญ์ชิตา
พี่ยุ้ย กัญญ์ชิตา
ผู้ก่อตั้ง Webmonster Lab, นักออกแบบเว็บไซต์ uxui, วิทยากร อาจารย์, สนุกกับการใช้ WordPress Elementor Figma, รักในพลังแห่งความเรียบง่าย ... ขอบคุณทุกคนจ้าที่แวะมา : ) รู้จักยุ้ยมากขึ้น

Related posts

5 Tools เคล็ดลับทำงานเร็วขึ้น สำหรับฟรีแลนซ์
December 26, 2024

5 Tools เคล็ดลับทำงานเร็วขึ้น สำหรับฟรีแลนซ์


Read more
free-background-generator-gradients-color
August 24, 2023

ฟรี! background พื้นหลังเท่ๆ gradients สวยๆ


Read more
เริ่มต้นธุรกิจด้วย Design Thinking แบบที่ Startup ใช้
September 11, 2022

เริ่มต้นธุรกิจด้วย Design Thinking แบบที่ Startup ใช้


Read more
Webmonster Lab พี่ยุ้ย กัญญ์ชิตา
สอนสร้างเว็บไซต์ธุรกิจ ให้ดูโปร!
ช่วยคุณเริ่มต้น-จบงานได้เอง แม้ไม่มีพื้นฐาน

ความรู้ แนวคิด ฮาวทู จากประสบการณ์
การออกแบบเว็บไซต์ 20 ปี

เรียนสด : ตัวต่อตัว

คอร์สตัวต่อตัว WordPress for SME มือใหม่สร้างเว็บไซต์ธุรกิจดึงดูดลูกค้า - อ.ยุ้ย กัญญ์ชิตา วริทธิ์ทินานนท์ Webmonster Lab

เนื้อหาคอร์ส WordPress

เนื้อหาคอร์ส 5 ขั้นตอน การจัดทำเว็บไซต์ WordPress
Logo Webmonster Lab สอนทำเว็บไซต์ WordPress Elementor สำหรับมือใหม่ - อ.ยุ้ย กัญญ์ชิตา
ความรู้ แนวคิด ฮาวทู จากประสบการณ์
การออกแบบเว็บไซต์ 20 ปี
WordPress และ Elementor
ทำให้การสร้างเว็บไซต์เป็นเรื่องง่ายและสนุก
เพียงแค่มีความตั้งใจและเรียนรู้ตามขั้นตอน คุณทำได้ค่ะ 😀
กัญญ์ชิตา วริทธิ์ทินานนท์ (พี่ยุ้ย)
Founder, Designer, Instructor
  • Facebook
  • YouTube
  • LinkedIn

บทความล่าสุด

  • Low Profile, High Impact แรงบันดาลใจในการสร้างธุรกิจของพี่ยุ้ย
    Low Profile, High Impact – แรงบันดาลใจสร้างธุรกิจของนักออกแบบ
    January 29, 2025
  • วิธีการติดตั้ง WordPress บน Windows Localhost (XAMPP) สอนละเอียดมาก - ยุ้ย กัญญ์ชิตา Webmonster Lab
    วิธีการติดตั้ง WordPress บน Windows Localhost (XAMPP) สอนละเอียดมาก
    January 12, 2025
  • 5 Tools เคล็ดลับทำงานเร็วขึ้น สำหรับฟรีแลนซ์
    5 Tools เคล็ดลับทำงานเร็วขึ้น สำหรับฟรีแลนซ์
    December 26, 2024

บทความแนะนำ

  • วิดีโอ สอนวิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
    [วิดีโอ] วิธีใช้ Elementor ตัวฟรี ออกแบบเว็บไซต์ได้อิสระ
    January 24, 2024
  • การออกแบบเว็บไซต์ที่ดี ไม่ใช่แค่มี
    การออกแบบเว็บไซต์ “ที่ดี” ไม่ใช่ “แค่มี”
    July 1, 2023
  • ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    ทำไมธุรกิจจำเป็นต้องมี Website ในเมื่อใช้ Social ฟรีๆ ได้นี่นะ
    January 14, 2020
พี่ยุ้ย กัญญ์ชิตา

093-649-5544

LINE ID : yuikanchita

Line QR code yuikanchita 0936495544 ไลน์คิวอาร์ ยุ้ย กัญญ์ชิตา

ห้องเรียนส่วนตัว at แอมพาร์ค จุฬา
รับสอนเดือนละ 4 คิว
โปรดจองล่วงหน้า 1-2 สัปดาห์ นะคะ

ข้อตกลงใช้งานเว็บไซต์ | นโยบายข้อมูลส่วนบุคคล
ตั้งค่าคุกกี้

© 2025 Webmonster Lab. All Rights Reserved.
Created with ❤︎ Kanchita Varitthinanon
สอบถามคอร์ส
การยอมรับคุกกี้
เว็บไซต์นี้ใช้ระบบคุกกี้เพื่อให้คุณได้รับประสบการณ์ที่เกี่ยวข้องกับคุณ คุณสามารถเลือกให้ความยินยอมทั้งหมดหรือเฉพาะบางส่วนได้โดยเข้าไปที่ "Cookie Settings"
ตั้งค่าคุกกี้ ปฏิเสธ ยอมรับทั้งหมด
Manage consent

Privacy Overview

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

Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
คุกกี้ที่ใช้งานฟังก์ชัน
คุกกี้ที่ใช้งานได้ช่วยดำเนินการฟังก์ชันบางอย่าง เช่น การแบ่งปันเนื้อหาของเว็บไซต์บนแพลตฟอร์มโซเชียลมีเดีย รวบรวมคำติชม และคุณสมบัติอื่นๆ ของบุคคลที่สาม

Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
คุกกี้เพื่อประสิทธิภาพ
คุกกี้เพื่อประสิทธิภาพ ใช้เพื่อทำความเข้าใจและวิเคราะห์ดัชนีประสิทธิภาพหลักของเว็บไซต์ซึ่งช่วยในการมอบประสบการณ์ผู้ใช้ที่ดีขึ้นสำหรับผู้เยี่ยมชม

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
คุกกี้เพื่อการวิเคราะห์
คุกกี้เพื่อการวิเคราะห์ ใช้เพื่อทำความเข้าใจว่าผู้เยี่ยมชมโต้ตอบกับเว็บไซต์อย่างไร คุกกี้เหล่านี้ช่วยให้ข้อมูลเกี่ยวกับตัวชี้วัดจำนวนผู้เข้าชม อัตราตีกลับ แหล่งที่มาของการเข้าชม ฯลฯ

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
คุกกี้เพื่อการโฆษณา
คุกกี้เพื่อการโฆษณา ใช้เพื่อจัดเตรียมโฆษณาและแคมเปญการตลาดที่เกี่ยวข้องให้แก่ผู้เยี่ยมชม คุกกี้เหล่านี้ติดตามผู้เยี่ยมชมเว็บไซต์และรวบรวมข้อมูลเพื่อจัดหาโฆษณาที่ปรับแต่งเอง

Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
คุกกี้ที่ไม่ได้จัดประเภทอื่นๆ
คุกกี้ที่ไม่ได้จัดประเภทอื่นๆ คือคุกกี้ที่กำลังวิเคราะห์และยังไม่ได้จัดประเภทเป็นหมวดหมู่

Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT