2005/Sep/19

วันนี้เราจะมาทำความรู้กับเมนู config css กันต่อนะคะ
(หลังจากตอนที่แล้ว ได้รู้เรื่องการปรับเปลี่ยนธีมเบื้องต้นไปแล้ว)



เมื่อเราต้องการปรับเปลี่ยน css
ให้คลิกเข้ามาที่เมนู Theme จากนั้น เลือกขั้นที่ 4 ค่ะ
Config CSS (Advance User)

หน้าจอก็จะเปลี่ยนไปเป็นแบบนี้




ให้เราคลิกที่ปุ่มตามรูปเลยค่ะ


เมื่อเราเคลิกแล้ว
หน้าจอเราก็จะเข้าสู่การจัดการแก้ไข CSS ซึ่งเป็นช่องพิมพ์ยาวๆ
เป็นโค้ดนะคะ


แบบนี้






ถ้าเพื่อนๆ ลองค่อยๆ ไล่อ่านดู
จะเห็นว่าทาง exteen ได้บอกรายละเอียดแต่ละอันอยู่แล้วว่า
จะเปลี่ยนอะไรตรงไหน ได้อย่างไรบ้าง

เราลองมาไล่ดูไปทีละส่วนเลยนะคะ

**โค้ดที่แม่อ้ออธิบายนี้ เป็นโค้ดของ easy นะคะ **









เริ่มแรก มาดูที่ส่วนนี้กันค่ะ

/* สีของลิงค์ */
a:link, a:visited{
color:#B8D9EC;
border-bottom:1px dotted #B8D9EC;
text-decoration:none;
}
a:hover{
color:#B8D9EC;
border-bottom:1px solid #B8D9EC;




สีของลิงก์ก็หมายถึงสีของส่วนข้อความที่เราทำไว้เป็นลิงก์ (หมายเลข1 ตามรูป) นะคะ
ไม่เกี่ยวกับพวกในแถบด้านข้างค่ะ
แต่เป็นลิงก์ที่เราใส่ไว้ในเอนทรีแต่ละวัน

a:link หมายถึง สีของตัวหนังสือที่เราทำเป็นลิงก์
a:visited หมายถึง สีของลิงก์ที่เราคลิกเข้าไปแล้วค่ะ
a:hover คือ สีของตัวหนังสือเวลาที่เราเอาเมาส์ไปวางค่ะ

เราสามารถปรับเปลี่ยนได้ตามที่แม่อ้อทำตัวหนาไว้ค่ะ

color ให้เพื่อนๆ ใส่ค่าสีเป็นเลขหกหลัก นำหน้าด้วย #
ลองเข้าไปดูโค้ดสีได้ที่
Color code นะคะ

ส่วน border bottom หมายถึงเส้นขีดด้านล่างค่ะ
เราสามารถปรับขนาดความหนาของเส้นได้ด้วยการเปลี่ยนตัวอักษรหน้า px
(1 เล็กสุดนะคะ)
ส่วน dotted หมายถึงสั่งให้เส้นเป็นเส้นจุดไข่ปลา
ถ้าเพื่อนๆ อยากได้เส้นแบบอื่น ก็จะมี

solid เส้นทึบ ธรรมดา
dashed เส้นประ
double เส้นคู่

ถ้าอยากได้แบบไหนก็ใส่เข้าไปแทนคำว่า dotted เลยค่ะ
สีของเส้นก็สามารถเปลี่ยนได้เช่นกันนะคะ
ใส่โค้ดสีที่ต้องการแทนโค้ดสีเดิมเลยค่ะ







ส่วนต่อไปนะคะ

/* ทั้งหน้ามีลักษณะเป็นอย่างไร */
.site{
margin:20px;
padding:0px;
text-align:center;
background:url() #014368 repeat;
}
/* ความกว้างของหน้าบลอค */
#wrapper{
width:680px;
}
/* เซตความกว้างของหน้าบลอค, แบคกราวนด์ของบลอคทั้งหมดและขอบ */
#all{
width:680px;
float:left;





เริ่มที่ /*ทั้งหน้ามีลักษณะเป็นอย่างไร*/ นะคะ
ส่วนที่เราจะเปลี่ยนได้ก็มี ใส่ background ให้กับหน้าบล๊อกของเราค่ะ

ถ้าต้องการใส่เป็นรูป
ก็ให้ก๊อปปี้ url ของรูปมาใส่ในวงเล็บข้างหลังคำว่า url ค่ะ

background:url(ใส่url ของรูปตรงนี้) #014368 repeat

ส่วนต่อไปคือความกว้างของหน้าบล๊อก
อันนี้ใช้ในกรณีที่เราอยากให้หน้าบล๊อกของเรากว้างมากขึ้น
ก็สามารถเปลี่ยนตัวเลขนี้ได้ค่ะ

ซึ่งตัวเลขที่เปลี่ยนนี้ ทำให้เราต้องไปเปลี่ยนค่าความกว้างในส่วนอื่นๆ ด้วย
เช่น ความกว้างของรูปที่ใช้ทำ head ค่ะ





มาที่ uptab นะคะ

/* แถบบนสุด */
#uptab{
width:680px;
float:left;
height:29px;
background: url(/global/theme/predefined/easy/exteen.gif) right top no-repeat;
}





ในส่วนนี้หมายถึงคำว่า exteen ที่แสดงอยู่เหนือเฮดของเราตรงมุมขวาค่ะ
สามารถลบออกได้นะคะ
ถ้าต้องการจะลบออก ก็ลบตั้งแต่คำว่า /*แถบบนสุด*/ ไปจนถึง no-repeat; ค่ะ

แต่ถ้าจะคงไว้ต้องเปลี่ยนความกว้าง
ให้เท่ากับความกว้างของหน้าบล๊อกที่เราเปลี่ยนในขั้นที่แล้วด้วยค่ะ






ส่วนถัดไป
เป็นแถบกลางที่ใช้แสดงบล๊อกของเราค่ะ
(หมายความถึงเมนูด้านซ้ายมือที่เป็นแถบรวมลิงก์
และด้านขวาที่เป็นส่วนแสดงเอนทรีนะคะ)

/*แถบกลาง หรือก็คือที่แสดงบลอค */
#midtab{
width:680px;
padding:0px;
border:3px solid #FFFFFF;
float:left;
}
/* แถบล่างสุด */
#downtab{
float:left;
width:680px;
height:4px;
}


ให้เพื่อนๆ เซทค่าความกว้างตามค่าที่เราเปลี่ยนขนาดความกว้างของบล๊อกมาตั้งแต่แรกนะคะ
สรุปว่าตรงตัวเลข 680 px นี่ถ้าเปลี่ยนแล้ว
ต้องไล่เปลี่ยนให้เท่ากันทั้งหมดค่ะ

ส่วนตรงคำว่า border ตัวนี้หมายถึงเส้นขอบทั้งหมดของบล๊อกเรานะคะ
ขอบนอกสุดน่ะค่ะ
เปลี่ยนขนาด สี และสไตล์ของเส้นได้ค่ะ

ส่วน /*แถบล่างสุด*/ ก็เช่นเดียวกันค่ะ
ปรับขนาดความกว้างให้เท่ากับแถบกลางที่เราตั้งใหม่ไปนะคะ






ส่วนเฮดของบล๊อก

/* รูปภาพด้านบน เซตความสูงและกว้างตามภาพ */
.picture{
background: url(
http://www.exteen.com/global/theme/predefined/easy/headereasy.gif) no-repeat;
height: 130px;
width: 680px;
border-bottom:1px dotted #FFFFFF;
}


ในส่วนนี้เป็นการเซทค่าของรูปที่เราเอามาทำเป็นเฮดค่ะ

เราสามารถเปลี่ยนรูปที่จะใส่เป็นเฮดของบล๊อกได้
ด้วยการก๊อปปี้ url ของรูปมาใส่ในวงเล็บข้างหลังคำว่า background: url(ใส่urlรูป) ค่ะ

height/width ก็ต้องปรับให้เท่ากับขนาดของรูปที่เราใช้นะคะ

ซึ่ง width ก็จะไปเท่ากับขนาดความกว้างของหน้าบล๊อกที่เราเซทตอนแรกค่ะ

border-bottom ก็คือเส้นขอบด้านล่างของเฮดบล๊อกค่ะ
ปรับสี/สไตล์ของเส้น และ ความหนาได้เลยค่ะ







ไตเติ้ล

.title{
font-family: "Microsoft Sans Serif", "Sans Serif";
font-size: 10pt;
font-weight: Bold;
color: #FFFFFF;
padding-right:10px;
vertical-align:bottom;
text-align:right;
}
.content{
width:680px;
font-family: Tahoma, "MS Sans Serif";
font-size: 12px;
color:#FFFFFF;
text-align:center;
float:left;
background-color:#014368;

tiltle ก็คือส่วนที่เป็นชื่อของบล๊อกเราที่แสดงในรูปเฮดตรงมุมขวาค่ะ



เราสามารถเปลี่ยนสีตัวหนังสือ(color) และขนาด(font-size)
รวมถึงแบบของฟอนต์ (font-family)ได้ค่ะ

ส่วนของ content หมายถึงส่วนแสดงเนื้อหาของบลีอกค่ะ
ถ้าเราต้องการให้ตัวหนังสือในบล๊อกของเราใหญ่ขึ้นก็ปรับขนาดได้ที่ font-size นะคะ
color ตัวแรกหมายถึง สีของตัวหนังสือค่ะ
ส่วน background-color คือ สีของ background ในส่วนหน้าบลีอกของเราค่ะ
(ที่อยู่ในกรอบสี่เหลี่ยม)






มาต่อกันที่ส่วนต่อไปเลยนะคะ leftcontent


/* พวกที่แสดงเนื้อหาบลอคความกว้างเป็นเท่าไหร่ */
.leftcontent{
width:500px;
float:right;
text-align:left;
background-color:#025F95;
border-left:1px #FFFFFF dotted;
}

.leftcontent
ส่วนนี้หมายถึงคอลัมน์ที่แสดงเอนทรีที่เราโพสท์แต่ละวันค่ะ

ถ้าเราปรับเปลี่ยนค่าความกว้างของหน้าบล๊อก
เราต้องมาปรับค่าความกว้างในส่วนนี้ด้วยค่ะ

ซึ่งค่าความกว้างของส่วนนี้ เมื่อบวกกับค่าความกว้างของคอลัมน์ที่เป็นแถบแสดงลิงก์ด้านข้างของเราบวกกัน
จะต้องไม่เกินค่าความกว้างของหน้าบล๊อกค่ะ

เช่น ถ้าเราเซทค่าความกว้างหน้าบล๊อกเป็น 700 px
ค่าความกว้างของ leftcontent เป็น 500
ค่าความกว้างของ rightcontent ก็ต้องเป็น 200 เป็นต้นค่ะ

นอกจากนี้เรายังสามารถเซทค่าสีที่จะใช้เป็น background-color ได้ด้วยค่ะ
ส่วน border-left หมายถึงเส้นขอบด้านซ้ายมือ
เราสามารถปรับค่าของเส้นได้เช่นกันนะคะ







ต่อไปค่ะ rightcontent

/* พวกที่เป็นแถบลิงค์ต่างๆ */
.rightcontent{
width:179px;
float:left;
text-align:left;
background-color:#02517f;
border-bottom:1px #FFFFFF dotted;
}



.rightcontent ก็คือส่วนคอลัมน์ที่แสดงพวก category /archive และอื่นๆ ของเรานั่นเองค่ะ

สิ่งที่เราสามารถปรับเปลี่ยนได้ก็ได้แก่พวกความกว้างของคอลัมน์ (width)
สีพื้นหลัง (background-color)และสี/สไตล์/ความหนาของเส้นขอบ (border)ค่ะ





ต่อไปนะคะเป็นส่วนหัวข้อของเอนทรีที่เราโพสในแต่ละวัน
จะแบ่งเป็นสองส่วนคือ ส่วนวันที่ (iday) กับส่วนชื่อเอนทรี (entry) และเนื้อหาของเอนทรี (entrycontent)ค่ะ

font-size: 14px;
color:#FFFFFF;
background-color:#02517f;
}
/* เรื่องหนึ่งๆ */
.entry{
padding:5px 15px 5px 10px;
margin:5px 0px 5px 0px;
}
/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(/global/theme/predefined/easy/bl.gif);
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
font-size: 12px;
text-decoration:none;
font-weight:bold;
color:#FFFFFF;
border:0px;
}
/* ส่วนแสดงเนื้อหา entry */
.entrycontent{
padding:5px 10px 5px 16px;
color:#FFFFFF;
font-size:12px;
}








มาเริ่มกันที่ .iday เลยนะคะ

.iday หมายถึงส่วนที่เป็นวันที่ที่เราโพสท์เอนทรีนะคะ
แสดงอยู่ในบรรทัดบนสุดตามรูปเลยค่ะ
เราสามารถปรับเปลี่ยนขนาด/สี ของตัวอักษรได้ และสามารถเปลี่ยนสีพื้นหลังได้ด้วยค่ะ

ส่วนต่อไป .entry
บรรทัดนี้หมายถึง หัวข้อของเอนทรีที่เราโพสค่ะ


/* หัวข้อ entry จะให้เป็นรูปอะไร เซ็ต padding ตัวสุดท้ายตามความกว้างของรูป */
.entrytitle a:link, .entrytitle a:visited, .entrytitle a:hover{
background-image: url(/global/theme/predefined/easy/bl.gif);
บรรทัดนี้หมายถึง รูปลูกศรเล็กๆ ที่อยู่หน้าเอนทรีค่ะ
ถ้าต้องการเปลี่ยนรูป ให้ก๊อปปี้ url มาใส่แทนตัวหนังสือสีแดงที่แม่อ้อทำไว้ในวงเล็บได้เลยค่ะ
background-repeat: no-repeat;
background-position: left top;
padding:0px 10px 0px 16px;
บรรทัดนี้ให้เพื่อนๆ เปลี่ยนค่าตัวเลขตัวสุดท้ายให้เท่ากับความกว้างของรูปที่เอามาใส่นะคะ
*ดูขนาดของรูปได้จากการคลิกขวาที่ภาพแล้วเลือก properties จะมีขนาดของรูปอยู่ที่บรรทัดสุดท้าย
เป็นกว้างxยาวค่ะ*
**padding หมายถึงระยะการเว้นพื้นที่นะคะ ค่าตัวเลขสี่ตัวเรียงตามนี้ค่ะ บน ขวา ล่าง ซ้าย**

font-size: 12px;
เปลี่ยนขนาดของตัวหนังสือที่ใช้เป็นหัวข้อที่นี่ค่ะ
text-decoration:none;
font-weight:bold;
บรรทัดนี้หมายถึงสั่งให้เป็นตัวหนา ถ้าไม่ต้องการให้ลบออกเลยค่ะ
*ใครอยากให้เป้นตัวเอียงใส่โค้ดนี้เพิ่มได้ค่ะ font-stlye: italic;*

color:#FFFFFF;
เปลี่ยนสีตัวหนังสือที่เป็นหัวข้อเอนทรี่ตรงนี้ค่ะ
border:0px;
ถ้าต้องการใส่ขอบก็พิมพ์เขาไปเลยค่ะ
เช่น ต้องการขอบหนา 1px เป็นเส้นจุดไข่ปลา สีขาว
ก็ใส่ลงไปว่า border: 1px dotted #FFFFFF;

}

ส่วนต่อไปคือ .entrycontent
ส่วนนี้ใช้กำหนดลักษณะของเนื้อเรื่องของเอนทรี่ที่เราโพสท์ค่ะ
สิ่งที่เราสามารถปรับเปลี่ยนได้ก็ได้แก่ สีของตัวอักษร (color), และขนาดค่ะ
หลายๆ คนบ่นว่าตัวหนังสือมันเล็ก ก็ลองปรับขนาดของตัวอักษรให้เพิ่มขึ้นนะคะ
น่าจะประมาณ 14 px กำลังดีค่ะ
แล้วแต่คนชอบนิ





ส่วนต่อไป เป็นส่วนแสดงรายละเอียดของเราค่ะ

/* ส่วนแสดงข้อมูลของ entry เช่นวันที่โพส */
.entryfooter{
border-top:1px dotted #FFFFFF;
padding:2px 2px 2px 15px;
color:#FFFFFF;
font-size:9px;
}
/* ชื่อผู้โพส */
.entryposter{
padding:0px 5px 0px 0px;
}
/* ลิงค์ไปดู comment ของ entry */
.entrycomment a:link,.entrycomment a:visited,/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
background-image: url(/global/theme/predefined/easy/comment.gif);
background-repeat: no-repeat;
color:#B8D9EC;
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
color:#FFFFFF;
border:0px;







มาไล่ดูทีละส่วนเลยนะคะ

เริ่มที่ entryfooter นะคะ

.entryfooter{
border-top:1px dotted #FFFFFF;
บรรทัดนี้หมายถึงเส้นจุดไข่ปลาสีขาว ที่อยู่เหนือ บรรทัดแสดงรายละเอียดผู้โพสท์ค่ะ
สามารถเปลี่ยนขนาด/สี และสไตล์ของเส้นได้นะคะ

padding:2px 2px 2px 15px;
ส่วนบรรทัดนี้คือการกำหนดระยะห่างโดยรอบของ entryposter ค่ะ
ถ้าอยากให้เส้นจุดๆ ลอยห่างขึ้นไปอีก ก็เพิ่มค่า padding ตัวแรกนะคะ

color:#FFFFFF;
เปลี่ยนสีตัวหนังสือตรงนี้ค่ะ
font-size:9px;
ส่วนบรรทัดนี้เปลี่ยนขนาดค่ะ


ส่วนตัวไป entryposter ข้ามไปเลยค่ะ
ไม่ต้องเปลี่ยน

มาที่ entrycomment เลยนะคะ

/* ลิงค์ไปดู comment ของ entry */
.entrycomment a:link,.entrycomment a:visited,/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
background-image: url(/global/theme/predefined/easy/comment.gif);
บรรทัดนี้เป็นรูปคำว่าcommentนะคะ ถ้าไม่มีรูปอื่นจะใส่ก็ไม่ต้องเปลี่ยนค่ะ
ถ้าจะใส่รูปอื่นก็ก๊อป url มาใส่แทนตัวหนังสือสีแดงได้เลยค่ะ

background-repeat: no-repeat;
color:#B8D9EC;
บรรทัดนี้เป็นสีตัวหนังสือของ เลขจำนวนคอมเมนต์ค่ะ
text-decoration:none;
padding:0px 80px 0px 0px;
border:0px;
}
/* สีเวลาเอาเมาส์วาง */
.entrycomment a:hover{
อันนี้คือสีของตัวหนังสือเวลาเราเอาเมาส์ไปวางเหนือเลขจำนวนคอมเมนต์ค่ะ
color:#FFFFFF;
เปลี่ยนเป็นสีอื่นตรงนี้นะคะ
border:0px;









มาที่แถบด้านข้างบ้างนะคะ
เริ่มต้นไล่ลงมาจากส่วนโปรไฟล์กันเลย


/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
color:#FFFFFF;
font-family:Tahoma;
font-size:12px;
font-weight:bold;
padding-left:10px;
background-color:#014368;
border-bottom:1px #FFFFFF dotted;
border-top:1px #FFFFFF dotted;
}
.sidebar-item{
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}
/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/easy/bl.gif);
background-position:0px 2px;
}
.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
text-decoration:none;
font-size:11px;
border:0px;
}
.sidebar-item a:hover{
color:#B8D9EC;
border:0px;
}





ส่วนแรกคือช่องแสดง profile ของเรานะคะ

/* แถบแสดงชื่อ */
.profile{
padding:5px; margin:0px 1px 0px 10px;
font-size:10px;
เปลี่ยนขนาดตัวอักษรค่ะ ตรงชื่อและคำว่า view full profile ค่ะ
}
/* พวกหัวข้อของด้านข้าง เช่น คำว่า Recommended */
.sidebar-title{
padding:2px 0px 2px 0px;
อันนี้เอาไว้ปรับระยะห่างจากขอบแต่ละด้านนะคะ อยากให้เส้นประๆ ข้างบนกับข้างล่าง ห่างจากตัวหนังสือมากขึ้น ก็เปลี่ยนจาก 2 เป็นเลขที่มากขึ้นค่ะ
color:#FFFFFF;
เปลี่ยนสีตัวอักษรที่เป้นหัวข้อเช่นคำว่า recommend /Link/Archieve
font-family:Tahoma;
แบบฟอนท์ค่ะ ไม่ต้องเปลี่ยนก็ได้
font-size:12px;
ขนาดฟอนท์
font-weight:bold;
สั่งให้เป้นตัวหนา ถ้าไม่ต้องการก็ลบออกค่ะ
padding-left:10px;
ระยะห่างจากขอบด้านซ้ายค่ะ
background-color:#014368;
สีพื้นหลังของหัวข้อพวกคำว่า recommend /Link/Archieve เปลี่ยนได้ตามชอบค่ะ
border-bottom:1px #FFFFFF dotted;
เส้นขอบด้านบนที่เป็นจุดไข่ปลา เปลี่ยนได้เหมือนเส้นอื่นๆ ที่สอนไปแล้วนะคะ
border-top:1px #FFFFFF dotted;
เหมือนกันค่ะ
}

.sidebar-item{
padding:0px 0px 0px 5px;
margin:0px 0px 10px 0px;
}

/*แต่ละไอเท็มของแถบด้านข้าง*/
.sidebar-item li{
background-repeat: no-repeat;
list-style-type: none;
margin:0px 5px 0px 10px;
padding:0px 0px 0px 15px;
background-image: url(/global/theme/predefined/easy/bl.gif);
ถ้าต้องการเปลี่ยนรูปหน้าลิงก์ในแถบด้านข้าง ให้ก๊อป url รูปมาใส่แทนตัวสีแดงนะคะ ต้องไปแก้ padding ให้สัมพันธ์กับขนาดของรูปที่เอามาใส่แทนด้วยค่ะ แก้ padding ตัวสุดท้ายให้เท่ากับความกว้างของรูปนะคะ
background-position:0px 2px;
}
.sidebar-item a:link, .sidebar-item a:visited, .sidebar-item a:hover{
font-family:"Trebuchet MS",Tahoma;
text-decoration:none;
font-size:11px;
ขนาดของฟอนท์
border:0px;
}
.sidebar-item a:hover{
color:#B8D9EC;
สีของตัวหนังสือที่เป็นลิงก์เวลาเราเอาเมาส์ไปวางค่ะ เปลี่ยนได้เช่นกัน
border:0px;
}







หมดจากแถบด้านข้าง
เราย้ายมาดูกันที่ ส่วนของคอมเมนต์บ้างนะคะ


/* ส่วนคอมเมนต์ */
.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#02517f;
}
.commentcontent{
color: #FFFFFF;
padding:5px 5px 5px 16px;
font-size:11px;
line-height: 1.3em;
}
.commentfooter{
padding:2px 2px 2px 15px;
color:#FFFFFF;
font-size:9px;
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
text-decoration:none;
padding:0;
border-bottom:0px;
}
.commentposter a:hover{
border-bottom:0px;
}



ส่วนนี้จะหมายถึงส่วนที่แสดงคอมเมนต์ที่มีคนโพสต์ในบล๊อกเรานะคะ

เริ่มกันเลยค่ะ

.comment{
padding:6px 5px 2px 5px;
margin:10px;
background-color:#02517f;
ตรงนี้หมายถึงสี BG ของคอมเมนต์นะคะ สามารถเปลี่ยนสีได้
หรือใส่เป้นรูปก็ได้ค่ะ
ถ้าต้องการใส่เป็นรูป ให้ใส่โค้ดนี้นะคะ BACKGROUND-IMAGE: url(urlของรูป);
แทนเข้าไปตรง background-color ทั้งบรรทัดเลยนะคะ
}
.commentcontent{
color: #FFFFFF;
ส่วนบรรทัดนี้คือสีของตัวหนังสือในคอมเมนต์ค่ะ
padding:5px 5px 5px 16px;
font-size:11px;
ส่วนนี้หมายถึงขนาดของตัวอักษรที่แสดงในคอมเมนต์เราค่ะ
หลายคนบ่นว่าคอมเมนต์ตัวเล็ก อ่านยาก เปลี่ยนได้ตรงนี้เลยนะคะ

line-height: 1.3em;
}
.commentfooter{
ส่วนนี้หมายถึงรายละเอียดของคนที่มาคอมเมนต์ค่ะ
padding:2px 2px 2px 15px;
color:#FFFFFF;
นี่สีของตัวอักษรในส่วนแสดงรายละเอียด เปลี่ยนได้ค่ะ
font-size:9px;
ขนาดของตัวอักษรเปลี่ยนได้เช่นกัน
}
.commentdetail{
padding:0px 5px 0px 0px;
}
.commentposter a:link,.commentposter a:visited,.commentposter a:hover{
อันนี้หมายถึงชื่อคนที่มาคอมเมนต์เรานะคะ มันจะเป็นลิงก์น่ะค่ะ
text-decoration:none;
padding:0;
border-bottom:0px;
}
.commentposter a:hover{
border-bottom:0px;
}








มาต่อกันที่ฟอร์มใส่คอมเมนต์ค่ะ

/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
background-color:#014368;
}
input{
font:11px Tahoma,"MS Sans Serif";
}




/* ฟอร์มใส่คอมเมนต์ */
form{
padding:2px 5px 2px 20px;
margin:10px;
font:11px Tahoma,"MS Sans Serif";
ส่วนนี้หมายถึง ขนาดของตัวอักษรด้านบนนะคะ (พวกคำว่าชื่อ เว็บไซต์ คอมเมนต์ น่ะค่ะ)
เปลี่ยนขนาดได้ค่ะ

background-color:#014368;
แบ๊คกราวนด์ของช่องใส่คอมเมนต์ ใส่เป็นรูปก็ได้ค่ะ
โค้ดเหมือนที่บอกไปแล้วด้านบน

}
input{
font:11px Tahoma,"MS Sans Serif";
อันนี้เป็นขนาดของตัวหนังสือที่ใช้พิมพ์ในช่องคอมเมนต์นะคะ ขยายได้ค่ะ จะได้สบายตา (คนแก่) :P
}




เบสิคของการแก้ css ก็หมดเพียงแค่นี้นะคะ
ยังมีลูกเล่นอย่างอื่นเพิ่มเติมอีก
แม่อ้อขอเวลาทะยอยๆ นำมาลงเรื่อยแล้วกันค่ะ

ถ้าอยากดูเพิ่มเติมลองไปดูได้ที่บลีอคของคุณงูตามลิงก์ด้านข้างเลยนะคะ

เอวัง สวัสดีค่า :)














Comment

Comment:

Tweet


<a href="http://vflzxomrbwdcdwb.com">towrbxualxlyjmf</a> http://ldhyaovcqnmhnri.com [url=http://wsybfjpqpceeiag.com]ekgtvweouvepbma[/url]
#51 by inxwaammry (94.102.52.87) At 2010-06-14 15:39,
ขยันมาก สุดยอดเลย
#50 by X-Pect At 2009-12-09 10:27,
ขอบคุณนะค่ะ
ขอแอดไว้ด้วยนะค่ะ

#49 by At 2007-07-11 16:34,
ได้ความรู้กลับไปปรับแต่งบลอคเพิ่มขึ้นมากเลยค่ะ
ขอบคุณมากน่ะค่ะ
#48 by ~SiN~potteR~ At 2007-04-20 20:35,
ขอบคุณมากเลยนะคะ เป็นความรู้ที่มีประโยชน์มากจริงๆ เหมาะสำหรับผู้ที่ต้องการฝึกทำblogมากเลย
#47 by ปุกปุย (124.120.190.8) At 2007-03-21 13:10,
ขออนุญาตแอดนะคะ เพราะเป็นความรู้ใหม่กำลังทดลองศึกษาคะ ขอบพระคุณมากคะ ที่ให้ความรู้จะพยายามจะ ทำให้ได้ตามที่สอนคะ
#46 by MayaKniGht At 2007-03-08 16:23,
อ่านแล้ว งงๆอ่า แต่ก็ขอบคุณนะค่ะที่นำเรื่องดีๆมาเผยแพร่^-^
#45 by りか At 2006-11-03 19:17,
สุดยอดจิงๆค่ะ เพิ่งหัดทำบ๊อค ได้คำแนะนำดีดีอย่างงี้ คงสบายขึ้น
ขอทำลิงค์มาที่นี่น่ะคะ เป็นประโยชน์ดี
ขอบคุณที่ทำให้ คนมือใหม่ หัดทำง่ายขึ้นนะคะ...
แต่ก็ใช้เวลาหลายวันเหมือนกัน 555
ถ้ามีเคล็ดไม่ลับก็มาบอกกันอีกนะคะ
ขอบคุณมากค่ะที่สอน
#42 by -MANAMI-CROSS-YAOI At 2006-09-03 10:37,
โอ้ว สุดยอด
ขอบคุณท่านมาก ที่ชี้แนะแนวทางให้
#41 by detong At 2006-08-24 22:49,
โอ้วว ขอบคุณมากๆค่ะ จะพยายามสู้ต่อไปด้วยความรู้อันน้อยนิด
#40 by -- มิวมูระ -- At 2006-08-18 16:50,
แล้วถ้าเราต้องการให้เอนทรี่ไปอยู่ฝั่งซ้ายหรือขวาของบลอคต้องทำยังไงบ้างคับ
#39 by kira nagase At 2006-08-01 11:12,
สุดยอดจริงๆเจ้าค่ะ ยกนิ้วให้เลย หามานานแล้ว นู๋ของ+FAV ไว้เลยนะค่ะ ^O^
#38 by Camio At 2006-06-05 09:40,
แล้วมีวิธีเอาสคริปอื่นแบบแชตนับออนไลน์มาใส่บล็องป่าวคะ เห็นบางบล็คเขาใส่ได้ แต่เราเอาโค้ดใส่แล้วไม่ขึ้นเลยคะ
#37 by คิดถึง At 2006-05-22 19:46,
โอ้โห ... ละเอียดมาก ๆ เลยครับ

ขอบคุณนะครับ ^^
#36 by :+:Azarashi:+: At 2006-05-18 23:16,
ละเอียดมากค่ะ ขอบคุณค่ะ
แต่ช่วยเราหน่อยเถอะค่ะ
เมนู(ด้านซ้าย) มันตกลงไปอยู่ข้างล่าง งมหาวิธีแก้จนตาแดงแล้วค่ะ รบกวนชี้แจงแถลงไขให้หมาจิ้งจอกจนตรอกทีค่ะ
#35 by WhitE_FoX^|='.'=|^ At 2006-05-18 10:25,
ขอบคุณมากๆๆๆค่ะ ได้ความรู้ความเข้าใจเกี่ยวกับการทำเวปมากขึ้นเยอะเลย
#34 by unknown subject At 2006-05-16 11:45,
สุดยอดเลย
สอนละเอียดมากๆๆๆๆๆ
ขอบคุณมากๆ เลยอะ
เสียดายจังที่มาเจอตอนงมตีมเสร็จแล้ว
แง่ๆ
#33 by Enoemos At 2006-05-09 12:40,
ออกแบบ css ยากมากเลย ยากกว่าเขียนเว็บเองซะอีก แต่ในที่สุดเราก็ออกแบบ blogเสร็จแล้วนะขอบใจมากๆเลยสำหรับข้อมูลดีๆ
#32 by NINE-1 At 2006-04-29 18:40,
ละเอียดสุดยอดไปเลยค่ะ
สุดยอดเลยฮับ...... ดำอยู่ตั้งนาน

* คุณคือสุดยอดแฟนพันธุ์แท้ exteen ~
สวัสดีปีใหม่ไทยค่ะ
ได้ความรู้เยอะเลยอิอิ
#29 by ^o^MayRin At 2006-04-12 23:24,
หวาดดีค่า แวะเข้ามาแต่งบล๊อคเลยจะมาขอบคุณสิ่งดีๆที่คุนแม่หมีเขียนไว้อ่า เลยแวะมาทำความรู้จักด้วยซะเลยนะคะ
#28 by I Still Love U At 2006-04-08 00:31,
บ๊อก ขอบคุงงับ ><

บลอคมีสาระอีกแว้ว เย้ๆ
#27 by [KurOki] i lOvE CarToOn (203.150.138.15) At 2006-04-07 18:42,
สอนเข้าใจง่ายแล้วก็ละเอียดมากๆเลยค่ะ ขอ add บล็อคนะคะ
#26 by ★InSilence★ At 2006-04-05 11:29,
ได้ความรู้มากเลยค่ะ
ขอแอดไว้เปน fav เลยน้า
#25 by ★yAmMiEzz★ At 2006-04-05 10:57,
มีความรู้ดีค่ะ สำหรับมือใหม่อย่างเราอิอิ
#24 by ^o^MayRin At 2006-04-03 10:50,
บล็อกสวยครับ

ขอบคุณมากครับสำหรับความรู้ดี ๆ
#23 by นายทะเลสองโหล At 2006-03-21 18:11,
อย่างละเอียดดีจัง อิอิ
#22 by ♪~❤~Minmin~❤~♪ At 2006-03-17 19:13,
อยากจังง่า..
เวลาพิมพ์ไปแล้วพอไปดูที่ บล๊อก ตัวหนังสือทำไมมันทับกานอ่ะ..เปลี่ยนตัวอักษรแล้วมันก็เป็น..ทับกันอ่านไม่รู้เรื่องเยย ฮือ
#21 by Maymaki At 2006-03-16 19:00,
แล้วส่วนใหญ่เราจะหา icon ใส่หน้า entry จากที่ไหนอะคับ หายากจัง
#20 by kira nagase At 2006-03-14 18:05,
เป็นความรู้มากเลยงิขอบคุณนะคะ

ขอแอดเลยนะคะ
#19 by ★ KAREN At 2006-03-12 23:07,
ขอบคุณค่า เหมือนแม่พระมาโปรดจิงๆ TT ^ TT

ซึ้งจัง .. ขอบคุณมากนะคะ
#18 by Namiiz At 2006-03-11 21:48,
ขอบคุณค่าทำให้เราสร้างบล็อคด้วย css ได้หลังจากโง่มานานนม ขอแอดนะค๊า
ยาว....ได้ใจมากมายค่ะ

#16 by Zo0Mo0k At 2006-03-07 18:35,
ได้ความรุ
มากมายเรยย
#15 by ~ * P loy * จิ้ งจก ~ At 2006-03-07 10:59,
(-/\-) ขอบพระคุณเป็นอย่างสูงงับ
ขออนุญาต add ไว้นะคะ
หนูความรู้ยังด้อย เลยต้องเร่งศึกษา
#14 by ChiLl PeiPe! At 2006-02-27 02:11,
อยากรู้วิธีใส่ข้อมูลใน profile อะ ช่วยบอกด้วย
#13 by jaoling At 2006-02-09 13:47,
อ่านแล้วเราพอจะดำไปใช้ได้ ได้รู้อะไรเพิ่มแล้ว^^ เดี๋ยวจะลองไปแต่งบลอกตัวเองดูบ้าง
#12 by YokeK.N. At 2005-12-25 21:17,
ขออนุญาต add
#11 by ღ::..SKY..::ღ At 2005-12-22 12:17,
แม่อ้อจ๋า...นู๋มองรูปไม่เห็นอ่ะคะ
เลยทำไม่ได้...อยากรู้อีกนิดอ่ะคะ ว่าใช้ ถ้าใช้ theme อื่นเนียะ มันแก้ code ใน css ต่างกันรึเปล่าคะ

ปล.ขอบคุณมากกคะ สำหรับความรู้เอาทำ blog
นี่แหละคือสิ่งที่ต้องการมากๆ สำหรับทำบล็อก หลังจากพยายามเปลี่ยนโน่นเปลี่ยนนี่เอง จนบล็อกเพี้ยนไปแล้วว
ขอบคุณมากๆค่ะ
#9 by สาวยิปซี At 2005-12-04 01:42,
ขอบคุณที่ให้ความรู้นะคะ...โค้งคำนับหั้ยท่านแม่อ้อนอยางนอบน้อม...ฮิฮิ
อ่านแล้วเข้าใจอย่างแรงเลยค่า
แท้งกิ้ว อีกรอบน้าค้า^^
ปล.ตอนนี้กะลังหัดทำบลอคอยู่นะ อย่าตกจายถ้ามาเห็นว่ามัน...อ่ะยังไง TT
#8 by AaLaBaStEr (203.113.35.6) At 2005-11-22 00:01,
ทำไงดีค่ะ อยู่ดีๆ เฮดบลอกก็หายไป
นู๋ใส่โค้ดถูกป่าวค่ะ

.picture{
background-image: url(http://img.photobucket.com/albums/v229/moonshine_19/Head-blog-vol4copy.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 190px;
width: 680px;

ช่วยดูให้หน่อยนะค้า...
#7 by =*MoonShiNe Ze*= At 2005-11-21 19:51,
ขอบคุณมากๆเลย
มาดูบ่อยมาก
แก้แล้วแก้อีกกว่าจะลงตัว
ขอบคุณจริงๆ
#6 by jasspall At 2005-11-05 18:18,
ได้ความรู้เพิ่มมากมาย ขอบคุณค่า
ขอแอดด้วยเลยนะคะ
#5 by Reammm At 2005-11-01 17:41,
ได้ความรู้มากมาย ขอบคุณมากค่า
#4 by ☆ สาวเกด ☆ At 2005-10-27 20:55,
อยากทำเป็นมั่งจัง
แต่ความรู้ด้านนี้มีอยูเท่าหางอึ่ง
ทำม่ายหวายยย
#3 by musixfeliz At 2005-10-22 23:41,
อ่านแล้ว งง ๆๆๆๆๆ
#2 by พ่อบักหมี (203.114.110.239) At 2005-10-05 09:16,