ExteenTheme

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

How to: Add Instagram Widget on Exteen

posted on 08 Apr 2012 19:46 by jennessa in ExteenTheme directory Tech, Knowledge, Idea
 
 
หวัดดีค่ะ ทุกคน มีใครใช้ Instagram บ้างคะ >.< ใน exteen เราสามารถแสดง Instagram gallery ในบลอคของเราได้โดยการ add custom code ค่ะ มีวิธีทำดังนี้ค่ะ
 
 
1.  ไปที่ SnapWidget ค่ะ ตรงข้างล่างจะมีฟอร์ม ให้เราใส่ username แล้วเลือกขนาดของรูป, layout, border, background color และช่องว่างระหว่างรูปค่ะ จากนั้นกดปุ่ม Get Code เลยค่ะ
 
 
 
2.  พอกดปุ่ม Get Code จะมีหน้าต่างเล็ก ๆ ขึ้นมา ให้เราก็อปปี้โค้ดนั้น แล้วนำไปใส่ใน custom code ค่ะ จากนั้น ก็ลาก custom code มาใส่ที่ sidebar ของเราค่ะ อย่าลืมกดปุ่ม Save หลังจากใส่ custom code แล้วค่ะ
 
 
3.  เท่านี้ เราก็จะได้ Instagram Gallery เล็ก ๆ อยู่ข้าง ๆ บลอคแล้วค่ะ เย้
 
 
 
 
ใครที่เพิ่มในบลอคตัวเองแล้ว อย่าลืมฝาก link ไว้ที่คอมเมนต์นะคะ เจนเนสซ่าจะตามไปดูค่ะ ;)
 
ติดตามเรื่องราวเกี่ยวกับการแต่งบลอค exteen แล blog design ได้ที่ Jennessa Blog on Facebook ค่ะ :)
 
 
รูปจาก oy photography