March 30, 2008
· Filed under Step by Step, ความรู้ทั่วปา~ย
สำหรับ entry ที่สาม เรื่องการแก้ไขการแสดงผลฮิห้าด้วย CSS นี้
คงไม่มีอะไรมากแล้วครับ
(เงื่อนไขว่าคุณอ่าน หรือเข้าใจสอง entry แรกแล้วนะ
ถ้ายัง กลับไปอ่าน entry ที่ ๑ และ ๒ ก่อน)
CSS กับ Hi5: เอาไปใช้ตรงไหน?
วิธีแทรก CSS ลงไปในเพจนะครับ
เริ่มต้นจากถ้าใครใช้ skin ปกติ (ที่ไม่ใช่การแก้ CSS)
เริ่มต้นคุณต้อง Remove Skin ที่ใช้อยู่ในหน้า Profile page ปัจจุบันของคุณออกไปก่อนครับ
ภาพข้างบนไม่ใช่เมนู Remove Skin นะครับ
ถ้าบางคนมีให้ Remove จะอยู่บริเวณเมนูแถวๆ ลูกศรสีแดงที่ชี้ให้ดูนั่นล่ะครับ
พอดีไม่มีภาพประกอบ ขี้เกียจทำด้วย -*-
จากภาพข้างต้น เมื่อ Remove Skin ออกแล้ว หรือถ้ามันไม่มีให้ Remove จริงๆ
ก็หา link ที่ชื่อ Customize Profile ตามภาพได้เลยครับ
จิ้มโลด
ก็จะเห็นหน้าตาเพจ ตามภาพ
ส่วนที่ลูกศรชี้ นั่นคือพื้นที่ที่เราจะวาง CSS ลงไปนั่นเองครับ
การพิมพ์ CSS คุณไม่จำเป็นต้องระบุ HTML <style> tag เปิด-ปิด
เพื่อ declare ว่า นี่คือ CSS นะ
..คุณสามารถเริ่มต้น CSS ได้เลยครับ
เพียงแต่เมื่อ save มันจะใส่ให้เองอัตโนโมชั่น
(สำหรับภาพขั้นตอนการใส่ CSS ขอขอบคุณ ด.ญ. ม่อน ที่เอื้อเฟื้อ
(ดูคำบรรยายภาพที่สองแล้ว แหม๊~! ..กลัวเสียเอกราช พิกล)) |
ref: tapopo.hi5.com
CSS กับ Hi5: เอาไปใช้ยังไง?
ภาพนี้ผมเคยแปะไว้ใน entry ก่อนหน้าโน้น~
ที่เคยบอกให้ไปศึกษาหาอ่านกันเอาเองที่อื่น
ถ้าคนไม่เข้าใจ CSS เลย เอาภาพที่ว่านี้ไปใช้ประโยชน์อะไรได้ไม่มากนักหรอกครับ
ดูไม่รู้เรื่องเท่าไหร่ด้วย..
แต่ถ้าเข้าใจ CSS เบื้องต้นเป็นอย่างน้อย แล้ว
หรือไม่เข้าใจ ..แต่ได้อ่านไอ้ที่ผมพล่ามมายาวเหยียดถึงสอง entry จนเข้าใจแล้ว
ผมเชื่อว่าคงดูออกล่ะครับ ว่าไอ้ภาพที่ให้ดูข้างต้นนี้คือ
แผนผังชื่อ Selector ของ Class และ ID ต่างๆ ใน profile page ของฮิห้านั่นเองครับ
ภาพส่วนนี้มีบางส่วนที่ชื่อ id หรือ class ผิดพลาด (อ้าว!?)
สืบเนื่องจากมันเป็นของเก่าครับ ก่อนหน้านี้สักพักคงพอนึกออกว่าผู้พัฒนาฮิห้าได้แก้ไขบางส่วนของการแสดงผล
ที่เห็นชัดๆ นั่นคือเมนูหลักด้านบนสุดของเพจ
อย่างไรก็ตาม สำหรับข้อมูลอัพเดทล่าสุดบางส่วนสำหรับ Selector หรือข้อมูลที่น่าสนใจ
มีให้ดูให้ชมกันที่ฮิห้าของคุณ tapopo ครับ
แต่!
ไอ้ครั้นจะบอกว่า ..selector บางตัวพิศดาร ล้ำลึก -
จนแผนภาพ selector ที่ให้ไว้ หรือในฮิห้าของคุณ tapopo ไม่มีบอก!
แล้วเราจะทำยังไง?
คำตอบคือหาเองครับ!
วิธีคือ
- เปิด Firefux
(ผมลองกับเครื่องผม และฮิห้าคนอื่น
ไม่สามารถใช้วิธีนี้กับ IE ได้ครับ)
- เปิด page ของเราเอง
สังเกตุจุดที่ต้องการหา Selector
สมมุติว่ากรณีนี้เราต้องการหา selector ของเมนูหลักบนสุดของเพจ
ตรง My Profile ที่เป็นตัวหนา!
- คลิกขวาที่เพจ
เลือกเมูน View Page Source
- HTML และภาษาอื่นๆ ในการแสดงผลจะปรากฏขึ้นมา
ตะกี๊ เราสมมุติว่าเราจะหา selector ในส่วนของเมนู ตรงคำว่า My Profile
- กด Ctrl + F แล้วพิมพ์เบาะแสคำที่ต้องการค้นหา
ในที่นี้ก็คือคำว่า My Profile
คำที่เจออาจไม่ใช่ก็ได้ครับ ไม่จำเป็นต้องเป็นผลการค้นเดียวเสมอไป
ลองค้นๆ ดูว่าใน source หนึ่งหน้า มีคำค้นนั้นกี่คำ
(บางครั้ง พิมพ์คำตรงๆ อาจไม่ตรงตามที่แสดงบน Browser ก็ได้ครับ
เช่น สมมุติคำว่า Sex / Age ในส่วนของ Profile
ถ้าดูใน sources จริงๆ จะเป็นแบบนี้
จะเห็นว่า Sex / Age สองบรรทัดแรกจะเป็น Comment ของ HTML
(ซึ่งไม่ได้เกี่ยวกับการแสดงผลบนหน้าเพจเล๊ย~)
แต่ส่วนที่สาม ถ้าพิมพ์เต็มๆ จะกลายเป็น Sex / Age
ยังไงจะหาอะไรก็ดูบริบทรอบข้าง ถ้าไม่เจอก็ค้นทีละคำ ทีละวลีละกันครับ)
- กลับมาที่รูปเดิม ..เมื่อเจอสิ่งที่ค้นหาแล้ว
ลองดูบริบทรายรอบสิ่งที่หาเจอครับ ว่าตรงตามที่หาหรือเปล่า
จากรูป มีประโยค hilight ก่อนหน้าชื่อ Home
และตามหลังก็ ตามในรูป
ปิ๊ง~ป่อง อันนี้น่าจะใช่
- หา id หรือ class ของเป้าหมายที่หา
ในที่นี้ก็คือ tag <a> ที่ถูกครอบด้วย <li> ที่ class=”on” นั่นเอง
..บางครั้ง tag หรือ element นั้นๆ ก็ไม่ได้ระบุ id หรือ class ใดๆ เลย
เช่นตัวอย่างข้างต้น ซึ่ง tag <a> ไม่ได้มี id หรือ class ระบุ
แต่ถูกระบุอยู่ภายนอกด้วย <li> ที่ class=”on”
วิธีนี้ถ้าต้องการ select จริงๆ ก็อาศัยวิธีการ select ขั้นลึกจาก entry ที่สองที่ได้อธิบายไว้
เช่น .on a{ … } ครับ!
|
จริงๆ อธิบายเท่านี้ก็คงไปต่อกันได้เองแล้วล่ะ
แต่..แถมอีกนิดละกันครับ
CSS กับ Hi5: มาลองแงะ CSS คนอื่นกันดู
ใช้วิธี view sources เช่นเดียวกับการหา selector ที่อธิบายข้างต้นครับ
CSS ของแต่ละคนที่ยัดด้วยวิธีนี้
โดยทั่วไปจะอยู่ประมาณบรรทัดที่ 554 -
ไปจนถึงบรรทัดที่เท่าไหร่ แล้วแต่ของแต่ละคนจะยาว~จะสั้น แค่ไหน
(ผมไม่ยืนยันเรื่องบรรทัดนะครับ ผลอาจต่างตาม browser หรือ text editor)
ทีนี้เมื่อได้ CSS ของคนอื่นมาแล้ว อยากจะลองแงะเพื่อทำความเข้าใจ
ผมจะลองยกตัวอย่างขึ้นมาสักโจทย์หนึ่งละกันครับ
.vanity-bar div img{display:none ;}
.vanity-bar div {background:url(“xxxxxxxxxx1.gif” )!important ;border:solid #000000 1px}
.vanity-bar div div {background:url(“xxxxxxxxxxxx2.gif” )!important ;border:none} |
มาทำความเข้าใจกันดูครับ
เริ่มจากลองไล่ดูจากแผนภาพ id และ class ของฮิห้า
ว่ามันคือ class อะไร อยู่ในตำแหน่งไหน? |
ปรากฏว่า ไม่มี
เหอๆๆทีนี้ก็ต้องลองหาดูด้วยตัวเองละครับ
ว่ามันมาจากไหน คืออะไร?
เวลาค้นหา เราจะค้นหาด้วยคำว่า .vanity-bar ไม่ได้
เพราะเครื่องหมายจุด และตามด้วยชื่อ class มันเป็น selector ที่ใช้เรียกชื่อ class ใน CSS
แต่เราต้องการหาชื่อ class ที่ใช้ใน HTML ซึ่งเราก็ควรจะต้องค้นด้วยคำว่า class=”vanity-bar” จึงจะถูกครับลองมาดูรายละเอียดเพิ่มเติม
ดูจากคำที่ hilight แล้ว คุ้นๆ ไหมครับ?
ลักษณะเหมือน สถิติ อะไรสักอย่างหนึ่ง
มี url รูปภาพอะไรสักอย่างที่ใช้กำหนด background-image ด้วย
ลองก๊อป URL รูปนั้นไปเปิดดูกัน
นี่มันแถบ bar แสดงสถิติต่างๆ ในส่วนของ Profile หนิ?
นั่นก็น่าจะแปลว่า class vanity-bar น่าจะหมายถึงแถบบาร์แสดงสถิติพวกนี้
เมื่อดูจาก CSS ข้างต้นอีกครั้ง
.vanity-bar div img{display:none ;}
ฯลฯ |
จะเห็นว่ามีการกำหนดให้ img ที่อยู่ใน div ที่อยู่ใน tag อะไรซักอย่างอีกที -
ที่ class=”vanity-bar”
แสดงผลเป็น display:none; ..ซึ่งนั่นหมายถึง ไม่แสดงผลอะไรเลย
ถ้าลองไปดู URL ของ tag img ที่ว่านี้อีกที มันเป็นรูปของ
    
มันคือรูปที่อยู่ในแถบบาร์แสดงสถิติแต่ละอย่างนั่นเองครับ
แปลว่า CSS ที่ว่านี่สั่งให้รูปพวกนี้หายไป นั่นเอง
.vanity-bar div {background:url(“xxxxxxxxxx1.gif” )!important ;border:solid #000000 1px}
.vanity-bar div div {background:url(“xxxxxxxxxxxx2.gif” )!important ;border:none} |
ถึงส่วนที่เหลือนี้ ผมขี้เกียจอธิบายต่อแล้วครับ คิดว่าคงพอเดากันได้ว่ามันคืออะไร
ลองคิดเล่นๆ เป็นการฝึกตัวเองไปในตัวละกันครับสำหรับคนใฝ่รู้
เดาได้ว่ามันเกี่ยวกับ bar แสดงสถิติตะกี๊ แน่นอน |
จบบริบูรณ์ล่ะนะครับ
หวังว่าที่พิมพ์มายาวตะไลนี่คงมีประโยชน์ไม่มากก็น้อย
สวัสดีครับ
