How to: ใส่ link ให้ logo ด้วย CSS

posted on 23 Mar 2013 13:25 by jennessa  in ExteenTheme  directory Tech
สวัสดีค่ะ ทุกคน ^^
 
เคยสังเกตป่าวคะว่า ปกติแล้วเวบส่วนใหญ๋ ตรงรูปโลโก้จะเป็น link ไปหน้า homepage อย่างเช่นที่ www.exteen.com เป็นต้น ตรงโลโก้ก็เป็น link ไปหน้า homepage เช่นกันค่ะ
 
มาดูที่บลอคของเรา โลโก้ในหน้าบลอคของเจนเนสซ่า ไม่ได้ link ไปที่หน้า homepage ของบลอคล่ะค่ะ ของทุกคนเป็นเหมือนกันป่าวคะ (o.o)?
 
เจนก็เลยหาวิธีทำให้ logo เป็น link ไปหน้า homepage วิธีทำง่ายมาก ทำตามขั้นตอนนี้ค่ะ
 
1. ไปที่ Manage -> Theme -> CSS Editor ค่ะ
 
2. หาคำว่า #header แล้วคอมเมนต์ตรง background ออกค่ะ ดูอันที่มี background url อยู่ค่ะ ให้คอมเมนต์ออก เดี๋ยวเราจะเอา background ไปใส่ตรงอื่นแทนค่ะ
 
 
3. มองลงมา จะเห็น #header h1 a ให้ก็อปปี้ background ที่เราคอมเมนต์ออกเมื่อกี้ มาใส่ตรงนี้แทนค่ะ background ก็คือรูปโลโก้นั่นเองค่ะ
 
 
4. ใส่ height กับ width ใน #header h1 a ตามความสูงและความกว้างของรูปโลโก้ค่ะ
 
 
5. ใส่ display: block; และเจนเนสซ่าปรับ margin-top เป็น 0 เพื่อให้รูปโลโก้ขยับขึ้นข้างบนนิดนึงค่ะ
 
 
6. อย่าลืม Save ค่ะ
 
เสร็จแล้วค่ะ เท่านี้ โลโก้ของบลอคก็จะ link ไปที่หน้า homepage ของบลอคเราค่า
 
มีคำถามสงสัยอะไรตรงไหน คอมเมนต์ไว้ได้ค่ะ 
 
 
ขอบคุณค่า
jennessa
หวัดดีค่ะ ทุกคน
 
หายไปนานมากกก กลับมาอีกที exteen เปลี่ยนไปเยอะมาก เจนเนสซ่าหายไปไหนมา? เจนเนสซ่าทำงาน ทำงาน ทำงาน แล้วก็ศึกษาเรื่อง Web Design และได้ความรู้จากการที่อ่านเองมาเยอะแยะเลยค่ะ หลังจากที่หายไปนาน พอกลับมา ทำให้เห็นหลายอย่างที่ไม่เคยมองเห็นในบลอคของเจนเนสซ่าเอง เรื่องแรกเลยคือ

ขนาดและรูปแบบของตัวอักษรในแต่ละเอนทรี ไม่เหมือนกัน !

เจนเนสซ่ากลับไปดูเอนทรีเก่า ๆ แล้วพบว่า ตัวอักษรขนาดเล็กลงมาก แล้วก็ขนาดและรูปแบบไม่เท่ากับฟอนต์ที่ใช้อยู่ในเอนทรีล่าสุดด้วย บางเอนทรีก็ฟอนต์ขนาด 10px Tahoma, บางเอนทรีก็ 13px Verdana สาเหตุก็เพราะว่า ในเอนทรีเก่า ๆ เจนกำหนดขนาดและรูปแบบฟอนต์ในแต่ละเอนทรีตอนที่เขียนบลอค ทำให้ในแต่ละเอนทรี รูปแบบฟอนต์และขนาด ก็แตกต่างกันไป 
 
 
 
ในเอนทรีที่กำหนดรูปแบบฟอนต์และขนาดตอนที่เขียนบลอค เวลาดูใน Google Developer Tool (คลิกขวาใน Chrome แล้วเลือก Inspect Element) จะพบว่า ข้อความตรงนั้นจะถูกครอบด้วย span tag และจะมี CSS Inline Style อยู่ด้วย CSS Inline Style คือ CSS ที่เราใส่ไว้กับ HTML tag เลยค่ะ ดังรูปข้างล่างค่ะ จะเห็นว่า span tag ของเจนเนสซ่า มี font-family และ font-size กำหนดไว้ด้วย CSS Inline Style นี้ ถูกเพิ่มเข้ามาเมื่อเราเลือก font family และ font size ตอนเขียนบลอคค่ะ
 
 
 
Requirement

ทำให้รูปแบบฟอนต์เหมือนกันทุกเอนทรี รวมเอนทรีเก่า ๆ ทั้งหมดด้วย
 
Problem

กลับไปเอา ​CSS Inline Style ออกในทุกเอนทรีที่เคยเขียนมา คงใช้เวลานานมากถึงมากที่สุด
 
Solution

.entry .post p span {   
font-size: 1em !important;   
font-family: Verdana !important;
}
 
วิธีนี้เหมือนกับ workaround มากกว่า ที่ต้องมี !important อยู่ข้างหลังด้วย ก็เพื่อจะบอกบราวเซอร์ว่า ให้ใช้รูปแบบนี้ แล้วก็มองข้าม CSS Inline Style ไป เพราะโดยปกติแล้ว ถ้าไม่มี !important, บราวเซอร์จะใช้รูปแบบของ CSS Inline Style ค่ะ 
 
ส่วน font-size: 1em คือการกำหนดขนาดฟอนต์ให้เป็นสัดส่วนกับ base font ซึ่งในบลอคนี้ก็คือ ขนาดฟอนต์ของ body ค่ะ อธิบายแบบง่าย ๆ ก็คือ 1em = ขนาดฟอนต์ใน body สมมติถ้าในอนาคต เจนเปลี่ยนฟอนต์ใน body จาก 13px เป็น 16px, เจนก็ไม่ต้องมาอัพเดทฟอนต์ตรง .entry .post p span ค่ะ ฟอนต์ใน span จะมีขนาดเท่ากับฟอนต์ใน body ทำให้เราสามารถแก้ขนาดฟอนต์แค่ที่ body ที่เดียวพอ เรื่องหน่วยขนาดฟอนต์​ em,px มีให้อ่านเยอะมากค่ะ ลองอ่านเพิ่มเติมได้ที่นี่ค่ะ http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs/
 
ส่วนข้อความที่ไม่ได้อยู่ใน span tag ก็จะ inherit รูปแบบฟอนต์มาจาก body ค่ะ ดังนั้นเจนก็แค่ต้อง match font-family ใน .entry. post p span กับ body ให้ตรงกัน ขนาดและรูปแบบฟอนต์ของทุกเอนทรีของเจน ก็จะเหมือนกันค่ะ
 
สังเกตว่า เจนต้องการให้แค่สองอย่างเท่านั้นที่เหมือนกันทุกเอนทรี คือ font-size กับ font-family. ต่อไปถ้าเจนต้องการใช้ตัวอักษรตัวใหญ่ในบลอค เจนจะใช้ HTML Tags h1 ถึง h6 ค่ะ แล้วเวลาเขียนบลอค เจนจะไม่กำหนด font family กับ font size ตอนเขียนค่ะ เจนจะใช้ style.css กำหนดแทน
 
งงป่าวเอ่ย เจนก็กำลังศึกษาเรื่อง Web standards and design อยู่ค่ะ มีอะไรหลายอย่างมาก มันไม่ใช่แค่ว่า ทำยังไง แต่ว่า ทำทำไม ทำไมเลือกวิธีนี้มากกว่า (งงกว่าเดิม 55)
 
มีข้อสงสัย คำถาม แนะนำ คอมเมนต์ได้เลยค่า
 
- jennessa

Fine Art Print Give Away

posted on 12 Jul 2012 19:19 by jennessa  in Photography  directory Lifestyle, Travel, Diary
 
 
สวัสดีค่ะ ทุกคน  :D
 
คนที่แวะมาบลอคเจนเนสซ่าบ่อย ๆ คงรู้ว่าเจนชอบถ่ายรูปมาก ๆ เจนเพิ่งซื้อปริ้นท์เตอร์มาใหม่ 55 วันนี้เลยจะมาแจกผลงานหนึ่งชิ้น เหมือนรูปข้างบนค่ะ สำหรับผู้โชคดี :D วิธีการร่วมสนุกมีดังนี้ค่ะ
 
1. กด Like เฟซบุคเพจ Jennessa Blog ที่นี่ค่ะ https://www.facebook.com/JennessaBlog
 
2. กด Like เฟซบุคเพจ Oy Photography ที่นี่ค่ะ https://www.facebook.com/pages/Oy-Photography/246629865412904
 
เพจนี้เป็นเพจของเจนเองค่ะ สำหรับการถ่ายรูปโดยเฉพาะค่ะ
 
3. หลังจากทำสองข้อข้างบนแล้ว โพสท์ในเฟซบุค Jennessa Blog ว่า "ร่วมสนุก Fine Art Print Give Away" ค่ะ สำคัญมากข้อนี้! เจนจะได้รู้ว่า ใครที่เข้าร่วมสนุกบ้างค่า
 
 
เจนจะสุ่มจับฉลากรายชื่อผู้เข้าร่วมทั้งหมด แล้วจะประกาศผลที่นี่และในเฟซบุค Jennessa Blog วันศุกร์ที่ 20 กรกฎาคม 2012 ค่ะ หมดเขตร่วมสนุกวันพฤหัสบดีที่ 19 กรกฎาคม 2012 ค่ะ
 
ใครที่ Like แล้วไม่ชอบผลงาน ไม่อยากติดตาม อยากแค่ร่วมสนุก ก็ Unlike ทีหลังได้ค่า T.T
 
 
รายละเอียดรูป
=========
- รูปขนาด 7" x 7" บนกระดาษขนาด A4 ค่ะ
- ปริ้นท์บนกระดาษ semi-gloss archival paper คุณภาพสูงค่ะ
- เจนส่งรูปจากออสเตรเลียค่ะ อาจจะใช้เวลาถึงสองอาทิตย์กว่ารูปจะไปถึงค่า
 
 
ตื่นเต้นจัง อยากรู้ว่าใครจะได้รูปไป มาร่วมสนุกกันนะคะ ^^
 
Update:
 
ยินดีด้วยกับ @iweakky ค่า ผู้โชคดีได้รับ fine art print จากเจนเนสซ่าค่ะ ขอบคุณทุกคนที่ร่วมสนุกนะคะ ติดตาม free give away รอบหน้าค่ะ ^^
 
- Jennessa