R E V A M P | Personal & Entertainment blog

วันนี้ว่าด้วยเรื่อง css ในส่วน Content ซึ่งก็คือ
โดยรวมทั้งหมดที่แต่ละเอนทรี่อยู่ เช่นที่คุณกำลังอ่านอยู่นี่แหระค่ะ =D
ปล. อันนี้ตามความเข้าใจของเรานะ ถ้าผิดพลาดก็ขออภัยด้วยค่ะ
เริ่มอธิบายส่วน Content กันเลยนะคะ

== Content ==

#belly {
background:url (url ของรูปพื้นหลัง) repeat-y;
}

#content { << โดยรวมของ content ในที่นี้คือด้านซ้ายทั้งหมดนะคะ
display:inline;
float:left; << สั่งให้ส่วน content อยู่ด้านซ้าย / ขวา
margin:10px 3px 0px 13px; << ความห่างระหว่าง content กับส่วนอื่นๆ (บน, ขวา, ล่าง, ซ้าย)
width:320px; << ความกว้างโดยรวมของส่วน content ถ้ากว้างไปส่วนนี้จะ ร่วง ลงไปด้านล่างนะคะ
/*Fix too large image makes content drop problem in IE*/
overflow:visible !important;
overflow:hidden;
}

.entry { << กำหนดลายระเอียดแต่ละเอนทรี่
float:left; << กำหนดให้อยู่ซ้าย
margin-bottom:15px; << กำหนดว่าให้เว้นแต่ละเอนทรี่ห่างกันแค่ไหน
border-bottom:1px solid #272727 << เส้นขั้นแต่ละเอนทรี่
}

.entry .title { << ส่วนที่ประกอบด้วยชื่อเอนทรี่ / รายละเอียดการโพส
display:block;
float:left;
margin-bottom:10px;
width:100%; << ความกว้างของส่วนไตเติ้ล
}

.entry .title h2 { << อันนี้คือ ชื่อ ของเอนทรี่ค่ะ
font-size:12px; << ขนาดฟ้อนค่ะ
padding-bottom:3px; << เว้นห่างจากตัวหนังสืออื่นๆด้านล่าง
}

.entry .title h2 a { << ชื่อ ของเอนทรี่ แบบที่เป็นลิ้งค์
color:#FFF; << กำหนดให้เป็นสีอะไร
font-size:12px; << ขนาด
}

.entry .title h2 a:hover { << ชื่อ เอนทรี่ ขณะที่เอาเมาส์วางค่ะ
color:#000; << สีเมื่อเอาเมาส์วาง
}

.entry .title span { << ส่วนรายละเอียดการโพส เช่น วันเวลา / หมวดหมู่
color:#999; << สีตัวอักษร
font-size:9px; << ขนาดของฟ้อนท์
padding: 3px; << เว้นช่องว่างระหว่างฟ้อนกับส่วนขอบ
}

.entry .post {
float:left;
}

.entry .post p { << ส่วนเนื้อหาที่โพส
margin-bottom:10px; << เว้นด้านล่างของส่วนเนื้อหาที่โพส
}

.entry .info { << ส่วนด้านล่างที่ประกอบไปด้วย Tags และ Comment
float:left;
width:100%; << ความกว้างเราตั้งเป็น 100% ของส่วน content ทั้งหมด จะได้ไม่ต้องกังวลว่าจะไม่พอดี
}

.entry .info .tag { << ส่วนของ Tags ต่างๆค่ะ
float:left; << อยู่ด้านซ้าย
font-size:9px; << ขนาด
padding:0px 0px 10px 0px; << ระยะห่างระหว่างฟ้อนท์กับขอบ
width:100%; << ขนาดความกว้างค่ะ
}

.entry .info .coms { << ส่วนที่เพื่อนๆจะมาคลิ๊กคอมเม้นท์ให้เรา
float:right; สังเกตว่าของเราอยู่ข้างขวา ถ้าจะให้อยู่ซ้ายก็ตั้งเป็น Left ค่ะ
}

** ปล. วันนี้จบแค่นี้ก่อนนะคะ ไม่รู้จะงงมั้ย !?!
คราวหน้าจะมาต่อเป็น Sidebar แล้วกันนะคะ ว่าจะทำพร้อมกัน
แต่เริ่มขิเกียดแฮะ แหะๆ T^T อ้อ...ปล. นิดนึง
css อันนี้มัน ไม่ original นะึคะ มาจากที่เราแก้แล้ว อิอิ