Jennessa's Blog: แต่งบลอคง่าย ๆ ด้วยตัวคุณเอง

สวัสดีค่ะ กลับมาอีกครั้ง แหะแหะ ^ ^"

ตอนที่แล้วพูดถึง การตกแต่งหัวข้อแถบเมนูด้านข้าง แบบพื้นฐาน ๆ นะคะ วันนี้เจนเนสซ่าจะนำเทคนิคการซ่อน text ด้วย CSS มาใช้ในการตกแต่งด้วยนะคะ แล้วก็จะมีการเพิ่มโค้ดใน CSS ด้วยค่ะ เริ่มกันเลยยยย

1. สมมติว่า เราต้องการจะเปลี่ยนเมนู "Recommended" ให้เป็นรูปภาพอื่นที่เราเตรียมไว้ เช่น ภาพข้างล่างนะคะ

2. จากนั้นไปที่ "แก้ไข CSS ด้วยตัวเอง" ค่ะ เพิ่มโค้ดข้างล่างลงไป โดยตรง background-image:url(...) ให้ใส่ url ของรูปภาพที่เราจะนำมาใช้นะคะ

*** เทคนิคอยู่ที่คำว่า text-indent ค่ะ จะเห็นว่าใส่ค่า -3000px ไว้ เพื่อเลื่อนตัวอักษรให้ออกไปนอกหน้าจอนั่นเองค่ะ ถ้าลองเอา text-indent ออก ก็จะเห็นตัวหนังสือคำว่า Recommended ทับรูปภาพอยู่ค่ะ

#s-recommended {
background-image:url(http://jennessa.exteen.com/images/recommend.gif);
font-size: 1px;
background-repeat: no-repeat;
padding: 10px 0px 22px 10px;
background-color:#FFFFFF;
text-indent: -3000px;
}

3. เสร็จแล้วก็กด Save แล้วดูผลงานได้เลยค่ะ ถ้ารูปออกมาขาด ๆ หาย ๆ ให้ลองปรับตรง padding ดูนะคะ ดูตัวอย่างผลงานของเจนเนสซ่าทางด้านซ้ายมือได้เลยค่า

4. สำหรับโค้ดตัวอย่างนี้ เป็นโค้ดสำหรับเปลี่ยนเมนู Recommended นะคะ ถ้าต้องการเปลี่ยนเมนูอื่นด้วย ให้เปลี่ยนคำว่า s-recommended เป็นคำอื่นดังนี้ค่ะ

• เมนู Category ใช้คำว่า s-category
• เมนู Previous Entry ใช้คำว่า s-previousentry
• เมนู Comment Alert ใช้คำว่า s-commentalert
• เมนู Archive ใช้คำว่า s-archive
• เมนู Link ใช้คำว่า s-link
• เมนู Favourite ใช้คำว่า s-favourite

วิธีทำก็คือ copy โค้ดตัวอย่างไป แล้วก็เปลี่ยนชื่อ และเปลี่ยน url ของรูปภาพ ตามเมนูนะคะ ขอบคุณเทคนิคการซ่อนตัวหนังสือจาก DivLand ค่ะ

จบแล้ว งงกันป่าวคะ? ใครทำไม่ได้ก็แวะมาถามนะคะ ใครเอาไปทำแล้วก็คอมเมนต์ไว้นะคะ เดี๋ยวเจนเนสซ่าจะตามไปดู วันนี้ไปก่อนนะคะ สวัสดีค่ะ (^ ^)V

ปล. ถ้าเพื่อน ๆ คนไหน อยากใช้รูปภาพหัวข้อเมนูของเจนเนสซ่า สามารถนำไปใช้ได้นะคะ แต่ขอให้ Save และ Upload ไปไว้ที่บลอคของตัวเองก่อนจะใช้นะคะ ขอบคุณค่ะ : )

สวัสดีค่ะ ขอโทษที่หายไปนานมาก ช่วงนี้งานเยอะมากๆๆๆ จนต้องเอากลับมาทำที่บ้านด้วยค่ะ T^T

พอดีเห็นคุณเฟเน่จัง ถามไว้ว่า จะเอารูปมาใส่แทนข้อความที่เป็นหัวข้อเมนูด้านข้างยังไง วันนี้ขอเริ่มแบบพื้นฐานก่อนนะคะ

1. หัวข้อเมนูด้านข้าง คือตรงไหน ? คือหัวข้อที่อยู่ตรงเมนูแถบด้านข้างค่ะ เช่น หัวข้อ Recommended, Category, Previous Entry เป็นต้น

2. เราสามารถตกแต่งหัวข้อพวกนี้ได้ด้วยการไปที่ "แก้ไข CSS ด้วยตัวเอง" จากนั้นหาคำว่า .sidebar_title ดังข้างล่างค่ะ

.sidebar-title{
padding:2px 0px 2px 8px;
color:#8E8E8E; //สีตัวอักษร
font-family:Tahoma; //รูปแบบตัวอักษร
font-size:12px; //ขนาดตัวอักษร
padding-left:10px;
margin-right:1px;
background-color:#FFCCCC; //สีพื้นหลังของหัวข้อ
}

3. นอกจากนี้ เรายังสามารถนำรูปมาใช้เป็นพื้นหลังของหัวข้อเมนูได้ด้วยนะคะ โดยการเพิ่มbackground-image ลงไปใน .sidebar-title ดังตัวอย่างข้างล่าง ตรงที่ไฮไลท์ไว้ค่ะ

.sidebar-title{
padding:2px 0px 2px 8px;
color:#8E8E8E;
font-family:Tahoma;
font-size:12px;
padding-left:10px;
margin-right:1px;
background-color:#FFCCCC;
background-image:url(http://jennessa.exteen.com/images/1.gif); //ใส่พื้นหลังให้หัวข้อเมนู
}

แค่นี้ก่อนนะคะ เจนเนสซ่าต้องไปนอนแล้วค่ะ เดี๋ยวตื่นสายไปทำงานไม่ทัน T T

ตอนหน้าจะสอนทำเมนูแบบหัวข้อ Recommended ของเจนเนสซ่าน่ะค่ะ โปรดติดตามตอนต่อไปนะคะ

สวัสดีค่ะ ก่อนอื่น ต้องขอบคุณคอมเมนต์จากเอนทรีที่แล้วนะคะ ได้ความเห็นหลาย ๆแบบ จะนำไปปรับปรุงต่อไปค่ะ ตอนนี้เจนเนสซ่าก็วาดมาใหม่อีกรูปนึงแล้ว แหะ แหะ (^^)" แต่เก็บไว้ก่อนละกัน

เห็นกระถางน้อยตรงมุมขวาล่างของบลอคมั้ยคะ ? จะเห็นว่าเวลา scroll หน้าเวบลงมา กระถางต้นไม้จะอยู่กับที่ จริง ๆ แล้วเป็นการนำ background สีกับ background อยู่กับที่มาใช้ร่วมกันค่ะ มาดูวิธีทำกันค่ะ

1. ไปที่แก้ไข CSS ด้วยตัวเอง

2. หาคำว่า .site ค่ะ เพิ่มโค้ดข้างล่างลงไปใน .site ค่ะ

background: #fff9fb url(http://jennessa.exteen.com/images/akami.gif) no-repeat fixed right bottom;

หมายความว่า

background: [สีพื้น] [url ของรูปที่จะนำมาทำอยู่กับที่] [กำหนดให้ใช้รูปเดียว] [กำหนดให้รูปอยู่กับที่] [กำหนดให้รูปอยู่ทางขวา] [กำหนดให้รูปอยู่ล่างสุดของหน้าเวบ]

โค้ดนี้เป็นการใช้คำสั่งกำหนด background ในรูปแบบสั้นค่ะ คือรวมหลาย ๆ ค่าไว้ด้วยกัน

3. ตรง right bottom สองค่าหลังเป็นการกำหนดตำแหน่งของรูปนะคะ สามารถกำหนดได้หลายค่า ดังนี้ค่ะ

• top left
  top center
  top right
  center left
  center center
  center right
  bottom left
  bottom center
  bottom right
• x% y% ถ้าใส่เป็น 0% 0% คือ top left ค่ะ ถ้าใส่ 100% 100% คือ right bottom
• xpos ypos เป็นการกำหนดตำแหน่งของรูปได้เลยค่ะ เช่น 15px 20px

4. เมื่อเลือกตำแหน่งที่ต้องการให้รูปแสดงได้แล้วก็ Save ได้เลยค่ะ

เทคนิคนี้อาจจะนำมาใช้ในการทำ background สีเรียบ ๆ ให้ดูน่าสนใจ หรือเอาไว้ใช้ประกาศข่าว หรือใส่รูปตามเทศกาลต่าง ๆ เช่น วันวาเลนไทน์ ก็เอารูปหัวใจโต ๆ มาใส่ไว้ หรือวันเกิด ก็เอาเค้กมาไว้บนหน้าจอ เก๋ไปอีกแบบ ลองนำไปใช้ได้หลายแบบค่ะ ถ้าทำไม่ได้ ติดปัญหาอะไร ก็ทิ้งคำถามไว้นะคะ (^^)V