Home-theater-designers![วิธีแก้ไขความรำคาญเล็กน้อยบนเว็บอย่างมีสไตล์ [Firefox & Chrome]](http://home-theater-designers.com/img/browsers/55/how-fix-small-annoyances-web-with-stylish.png)
นักออกแบบเว็บไซต์มีงานที่แทบจะเป็นไปไม่ได้เลย พวกเขาต้องมีการออกแบบที่ถูกใจทุกคน เมื่อพูดถึงบริการอย่าง Gmail ที่มีคนใช้นับไม่ถ้วนทั่วโลก คุณสามารถทิ้งส่วนที่ 'เกือบ' ทิ้งได้ ซึ่งเป็นไปไม่ได้เลย แม้ว่าคนส่วนใหญ่ชอบการออกแบบใหม่ แต่ก็มีผู้ใช้ที่ไม่ชอบรูปลักษณ์ใหม่อยู่เสมอ
บางครั้งมีผู้ใช้เหล่านี้มากพอที่จะบังคับให้บริษัทต้องย้อนรอย เช่นเดียวกับที่ Google เพิ่งทำกับปุ่มไอคอน Gmail แต่ถ้ามีอะไรที่คุณ จริงๆ เกลียดแล้วบริษัทไม่เปลี่ยนคืน? คุณติดอยู่กับมันตลอดไปหรือไม่? ด้วยสไตล์ของผู้ใช้ คุณสามารถแก้ไขปัญหาดังกล่าวได้ด้วยตัวเอง
แนะนำสไตล์
มีสไตล์เป็นส่วนเสริมฟรีสำหรับ Firefox และ โครเมียม และมันให้คุณทำบางสิ่งที่วิเศษมาก - ใช้สไตล์ของคุณเองกับองค์ประกอบหน้าเว็บ แม้ว่าคุณจะไม่ใช่นักพัฒนาเว็บและไม่เคยเขียน CSS สักเล็กน้อยในชีวิตของคุณ สิ่งนี้ก็ง่ายกว่าที่คิด คุณสามารถใช้ Stylish เพื่อแปลงโฉมเว็บไซต์ได้อย่างสมบูรณ์ (ดังที่ฉันจะแสดงให้คุณเห็นในหัวข้อถัดไป) แต่ที่สำคัญกว่านั้นคือ คุณสามารถใช้ Stylish เพื่อแก้ไขความรำคาญเล็กๆ น้อยๆ ในเวลาไม่กี่นาที
ตัวอย่างเช่น ฉันมีปัญหากับขนาดแบบอักษรเริ่มต้นใน Gmail อินเทอร์เฟซใช้งานได้ดี ฉันไม่ต้องการซูมเข้า (Ctrl +) ด้วยเบราว์เซอร์ของฉัน เพราะมันจะเพิ่มขนาดขององค์ประกอบอินเทอร์เฟซทั้งหมดและน่าเกลียดมาก ฉันแค่ต้องการวิธีทำให้แบบอักษรของข้อความใหญ่ขึ้นเล็กน้อย
ด้วย Stylish มันง่ายมากและฉันจะแสดงให้คุณเห็น แต่ก่อนที่เราจะดูการสร้างสไตล์ผู้ใช้ของคุณเอง เรามาพูดถึงการใช้ประโยชน์จากงานของผู้อื่นกันก่อน
UserStyles.org
หากมีบางอย่างทำให้คุณวิตก เป็นไปได้ว่าคุณไม่ได้อยู่คนเดียว UserStyles.org เป็นเว็บไซต์ที่ให้ผู้ใช้แชร์สไตล์ที่พวกเขาสร้างขึ้น ด้านบนคุณจะเห็นสไตล์ ( เพิ่มป้ายกำกับให้กับไอคอนแถบเครื่องมือ ) แนะนำโดยผู้แสดงความคิดเห็น MakeUseOf RandyN เพื่อตอบกลับเรื่องราวของเราเกี่ยวกับปุ่มไอคอน Gmail สไตล์นี้ให้คุณเก็บไอคอนไว้ได้ แต่เพิ่มป้ายกำกับข้อความ ซึ่งเป็นสิ่งที่ Google ไม่ยอมให้คุณทำ
UserStyles.org นั้นยอดเยี่ยม แต่ก็ไม่ได้สมบูรณ์แบบ การออกแบบบางอย่างพยายามทำมากเกินไป (เปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมด) และบางแบบสำหรับเว็บไซต์รุ่นเก่าและตอนนี้เสีย หากคุณกำลังพยายามแก้ไขสิ่งเล็ก ๆ น้อย ๆ และไม่พบใน UserStyles.org บางทีแนวทางปฏิบัติที่ดีที่สุดของคุณคือดำเนินการด้วยตนเอง
สร้างสไตล์ผู้ใช้ที่เรียบง่ายของคุณเอง
ในการสร้างสไตล์ผู้ใช้ของคุณเอง ก่อนอื่นคุณต้องรู้ว่าองค์ประกอบใดของหน้าเว็บที่คุณกำลังพยายามเปลี่ยนแปลง และจากนั้นคุณต้องการเปลี่ยนแปลงอะไร ในการเริ่มต้น ให้คลิกขวาที่สิ่งที่คุณต้องการเปลี่ยนแปลง แล้วเลือก ตรวจสอบองค์ประกอบ . คุณควรเห็นสิ่งนี้:
Firefox ทำให้ส่วนที่เหลือของหน้ามืดลง และวาดกรอบที่ชัดเจนรอบๆ องค์ประกอบที่คุณเลือก เหนือองค์ประกอบนั้น ข้อความที่เขียนว่า div#2d6.ii.gt.adP.adO เป็นกลุ่มของคลาส CSS พร้อมด้วย ID เดียว (ส่วนที่ขึ้นต้นด้วย #) นี่คือตัวเลือกที่ส่งผลต่อการจัดสไตล์สำหรับองค์ประกอบนี้ ที่ด้านล่างของหน้าจอจะมีแถบนำทางที่ให้คุณ ' ข้ามต้นไม้ DOM ' หรือพูดง่ายๆ ก็คือ ขึ้นและลงในลำดับชั้นขององค์ประกอบที่นำไปสู่องค์ประกอบที่คุณเลือก
ชื่อของเกมคือการเลือกองค์ประกอบที่คุณต้องการจัดรูปแบบ และทำให้การเลือกไม่แคบจนไม่ส่งผลต่อทุกสิ่งที่คุณต้องการส่งผลกระทบ หรือกว้างเกินไปจนทำให้สิ่งอื่นยุ่งเหยิง
ฉันคลิกองค์ประกอบหนึ่งที่สูงขึ้น div.gs เพียงเพราะว่าฉันชอบชื่อของมัน มีผลกับพื้นที่ข้อความทั้งหมด เมื่อเลือกพื้นที่ที่คุณต้องการจัดรูปแบบแล้ว ให้คลิกที่ สไตล์ ปุ่มที่มุมล่างขวาเพื่อเปิด กฎ ขนมปัง:
ฉันรู้ว่ามันน่ากลัวในตอนแรก แต่นี่คือที่ที่คุณมองเห็นกฎ CSS ต่างๆ ที่ส่งผลต่อองค์ประกอบที่คุณเลือก และนี่คือที่ที่คุณสามารถทำการแก้ไขชั่วคราวของคุณเอง และดูผลกระทบที่มีต่อหน้าเว็บในแบบเรียลไทม์ โดยไม่ต้องโหลดซ้ำ แต่คุณควรเปลี่ยนอะไร คลิก คุณสมบัติ ปุ่มและยกเลิกการเลือก เฉพาะรูปแบบผู้ใช้ :
ที่นี่คุณสามารถดูรายการทั้งหมดของ ทั้งหมด กฎ CSS คุณสามารถเลื่อนลงมาในรายการจนกว่าคุณจะพบกฎที่เหมาะสมสำหรับสิ่งที่คุณต้องการ (ขนาดฟอนต์ในกรณีของเรา) และแม้กระทั่งคลิกเครื่องหมายคำถามที่อยู่ถัดจากกฎนั้นเพื่อเปิดหน้าคำอธิบาย ตอนนี้เรารู้แล้วว่าเราต้องการปรับแต่งคุณสมบัติขนาดฟอนต์สำหรับองค์ประกอบ div ทั้งหมดที่มีคลาสของ ' gs ' (เขียนด้วยอักษรย่อว่า div.gs ).
คำถามเดียวที่เหลืออยู่คือสิ่งที่เราต้องการให้คุณค่าเป็น เพื่อที่เราจะกลับไปที่บานหน้าต่างกฎและเริ่มเล่น:
40 พิกเซลอาจจะดูแปลกๆ ไปหน่อย แต่คุณเข้าใจแนวคิดทั่วไปแล้ว ลองใช้สิ่งนี้ และเพิ่มคุณสมบัติอื่นๆ ได้ตามสบาย จนกว่าคุณจะได้รูปลักษณ์ที่คุณต้องการ อย่าปิดเพจเพราะการเปลี่ยนแปลงของคุณคือ ไม่ บันทึกได้ทุกที่
บันทึกรูปแบบใหม่ของคุณ
เมื่อคุณได้ส่วนนี้ของเว็บไซต์ที่ดูเหมือนคุณต้องการแล้ว ก็ถึงเวลาบันทึก คลิก มีสไตล์ ในแถบ Add-on แล้วเลือก เขียนรูปแบบใหม่ . Stylish ก็อยากรู้ว่าควรใช้สไตล์ใหม่ในหน้าใด ในกรณีของเรา ให้เลือกตัวเลือกที่สอง mail.google.com . ถัดไป คุณจะเห็นกล่องโต้ตอบนี้:
ฉันได้กรอกไปแล้ว เห็นได้ชัดว่าฉันเลือกชื่อและแท็กสำหรับสไตล์นี้ แต่ของจริงเกิดขึ้นภายในโค้ด: บรรทัดที่ 3 มีอยู่แล้ว - Stylish วางไว้เพื่อให้รู้ว่าหน้าใดที่ใช้สไตล์ แต่สาย 5-7 เป็นของฉัน มาวิเคราะห์กัน:
บรรทัดที่ 5: div.gs { – ส่วนนี้คุณควรรู้จัก นี่คือองค์ประกอบที่เราตัดสินใจจัดสไตล์ วงเล็บปีกกาเปิดหมายความว่าเรากำลังจะเขียนกฎ CSS บรรทัดที่ 6: ขนาดตัวอักษร: 20px !สำคัญ; – นั่นคือกฎที่เราต้องการจะเปลี่ยน (ขนาดฟอนต์) ตามด้วยคำจำกัดความใหม่ (20 พิกเซล) จากนั้นด้วยการประกาศ !important ซึ่งหมายความว่า Firefox จะปฏิบัติตามกฎนี้แม้ว่าองค์ประกอบที่ใกล้กับข้อความจะพยายามตั้งค่า ขนาดตัวอักษรเป็นสิ่งที่แตกต่าง บรรทัดที่ 7: } – ปิดการกำหนดรูปแบบ
จากนั้นคลิกดูตัวอย่างและประหลาดใจกับผลงานของคุณ:
และสุดท้ายเมื่อคุณเห็นว่าใช้งานได้แล้ว ให้คลิก บันทึก.
นี่ไม่ใช่คู่มือฉบับสมบูรณ์
ฉันทราบดีว่าเพื่อให้บทแนะนำสั้นๆ นี้อยู่ภายในโพสต์เดียว ฉันต้องก้าวกระโดดหลายครั้ง หากคุณสับสนระหว่างทางโปรดยอมรับคำขอโทษของฉัน CSS นั้นยุ่งยากในตอนแรก แต่ก็ไม่ซับซ้อนนักเมื่อคุณคุ้นเคยกับมันแล้ว และการปรับแต่งเว็บไซต์ในเครื่องยังคงเป็นหนึ่งในวิธีที่ดีที่สุดในการเรียนรู้
หากคุณสับสนในสิ่งใด โปรดถามฉันด้านล่างและเราจะพยายามอย่างเต็มที่เพื่อช่วย
คุณพังเราซ่อมใกล้ฉันแบ่งปัน แบ่งปัน ทวีต อีเมล 5 เคล็ดลับในการเพิ่มพลังให้เครื่อง VirtualBox Linux ของคุณ
เบื่อกับประสิทธิภาพที่ย่ำแย่ของเวอร์ชวลแมชชีนหรือไม่? นี่คือสิ่งที่คุณควรทำเพื่อเพิ่มประสิทธิภาพ VirtualBox ของคุณ
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- เบราว์เซอร์
- การพัฒนาเว็บ
- เครื่องมือของผู้ดูแลเว็บ
- Mozilla Firefox
- Google Chrome
- ออกแบบเว็บ
สมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก