AERIAL RAVE : น้องส้มวัยออกดอก

อันนี้ เป็นแบบธีม Simple นะครับ แบบอื่น ไม่ได้ลอง

ก่อนอื่น ขอชี้ก่อน ว่าโครงสร้างบลอกมีส่วนต่างๆ อย่างในรูป

บลอคนี้ ขอบอกวิธีปรับลักษณะของแต่ละส่วน ที่เขียนไว้ข้างบนนะครับ (ถ้ามีมากกว่านั้น แต่ไม่เขียนไว้แสดงว่าไม่รู้)

Body

เป็นตัวของบลอค (แปลตรงตัว) ถ้าอยากจะปรับแบคกราวหลังสุดของบลอค (ที่ของฉันเป็นสีส้ม) ปรับได้ที่

/* General */
body {
background:#(รหัสสี) url(urlภาพ) repeat top left;
color:#333;
font:12px Tahoma, "MS Sans Serif";
line-height:1.5em;
text-align:center;
background-attachment : fixed << ถ้าไม่อยากให้ภาพเลื่อนตาม ให้ใส่บรรทัดนี้เข้าไป

Cover Image คือภาพหัวบลอค หลายบลอคจะขาดไม่ได้เลย เพราะมันเหมือนตัวเอกของบลอค (ยิ่งกว่าเนื้อหาเสียอีก) ปรับได้ตรงที่

#coverimage{
background:url(url ของภาพ ที่จะลง) no-repeat;
height:180px; << ใส่ความสูงของภาพหัวบลอกแทนเข้าไป
width:730px;<< ใส่ความกว้างของภาพหัวบลอกแทนเข้าไป
margin-left:25px !important;
margin-left:0px; /*Fix IE Bug*/

Header เป็นส่วนที่ Cover Image อาศัยอยู่ (ในภาพ ไม่ได้ชี้ไว้ ลืม)

ถ้าอยากใส่สี Background ของ ส่วน เฮดเดอร์ ใส่ได้ตรงที่

#header{
background:(#รหัสสี);
padding:20px 0px 0px 0px;
text-align:center;
position:relative;

ถ้าอยากใส่เป็นภาพ ก็

background:(#รหัสสี) url(urlภาพ) repeat top left;
padding:20px 0px 0px 0px;
text-align:center;
position:relative;

รหัสสี ไม่ใส่ก็ได้ เพราะสีมันจะโดนภาพทับ ยกเว้นภาพไม่ขึ้น มันจะขึ้นเป็นสีที่เราใส่แทน

neck

ถ้าอยากใส่สี Background ของ ส่วน เน็ค (คอ หัวเสร็จก็ลงมาคอ =w= )ใส่ได้ตรงที่

#neck{
background:#FFF;

อยากให้เป็นภาพ ก็

#neck{
background:(#รหัสสี) url(urlภาพ) repeat top left;

รหัสสี ไม่ใส่ก็ได้ เพราะสีมันจะโดนภาพทับ ยกเว้นภาพไม่ขึ้น มันจะขึ้นเป็นสีที่เราใส่แทน

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

ถ้าอยากเปลี่ยนสี Background ก็

#neck .module{
background:#(รหัสสี);
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;

จะเอาเป็น ภาพก็

#neck .module{
background:#(รหัสสี) url(urlภาพ) repeat top left;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;

content ส่วนที่เป็น เนื้อหาของบลอค นะครับ

เหมือนกับ ส่วนที่ผ่านมา ขอไม่เขียนซ้ำ

#belly{
background:#(รหัสสี) url(urlภาพ) repeat top left;

เปลี่ยนสีชื่อหัวข้อ

.entry .title h2 a{
color:#(รหัสสี);

เปลี่ยนสีเส้น ขีดเส้นใต้จบ 1เรื่อง (ที่ของฉันเป็นสีส้ม)

.entry{
float:left;
margin-bottom:15px;
border-bottom:1px solid #(รหัสสี); << 1px น่าจะเป็นระบุความหนาของเส้น

Sidebar เป็นส่วนที่มี Rec Fav Link ของเรา ปรับเหมือนเดิม ไม่เขียนซ้ำ

#sidebar, #sidebar2{
background:#(รหัสสี) url(urlภาพ) repeat top left;
display:inline;
float:right;
margin:5px 25px 0px 0px;
width:225px;

ปรับสีเส้นใน ไซด์บาร์

#sidebar .module h2, #sidebar2 .module h2{
border-bottom:1px solid #(รหัสสี); << 1px น่าจะเป็นระบุความหนาของเส้น
font-size:18px

footer ส่วนล่างสุด (เท้าไง)

#footer{
background:(#รหัสสี) url(urlภาพ) repeat top left;
height:60px; << น่าจะไว้ระบุความสูงของส่วน ฟุตเตอร์ (px ย่อมาจาก pixel)

2 เป็นแถบ ที่อยู่ในส่วน footer เหมือน1 ไม่รู้จะเรียกไงดี ในแถบจะมีคำว่า Powered by exteen blog. You may view this blog RSS or ATOM.

#footer p{

background:(#รหัสสี) url(urlภาพ) repeat top left;
border-top:1px solid #(รหัสสี); <<กำหนดสีเส้นบน
border-bottom:1px solid #(รหัสสี);<<กำหนดสีเส้นล่าง
font-size:10px;
text-align:center;
margin:5px 25px 0px 25px;
padding:5px;

แถม

ใครที่อยากเอาชื่อบลอคออก ที่อยู่ header ก็

#header h1 a{
color:#666;<<สีฟอนท์
font-size:24px;<<ขนาดฟอนท์
display:none; <<ใส่บรรทัดนี้เพิ่มเข้าไป

แล้วก็ ปรับสีลิงค์ อยู่แถวๆข้างบนเลย

a:link, a:visited{
color:#(รหัสสี);
text-decoration:none; << หมายความว่า ต้องการให้ลิงค์เป็นตัวอักษรธรรมดา

ปรับสีลิงค์เวลาไปจิ้ม

a:hover, a:active{
color:#(รหัสสี);
border-bottom:1px solid #(รหัสสี); <<หมายความว่า ถ้าต้องการให้ลิงค์เวลาไปจิ้ม มีการขีดเส้นใต้สีที่เราระบุลงไปบรรทัดนี้ บรรทัดนี้ไม่มีนะครับ ฉันเสริมมา

แล้วก็ส่วนเขียนคอมเมนท์ สามารถใส่ภาพได้ด้วย

/* Comment Form */

#commentform{
width:100%;
background:(#รหัสสี) url(urlภาพ) repeat top left;
float:left;

แล้วก็ ถ้าจะปรับเส้น ที่อยู่ในส่วนเขียนคอมเมนท์

#commentform .formrow{
border-top:1px solid #(รหัสสี);
padding:2px;

Leg

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

ส่วน leg ก็เหมือนแถบอื่นทั่วๆไป ปรับตรงที่

/* Leg Menu */
#leg{
background:#(รหัสสี);

no-repeat repeat top left

สองตัวนี้ จะเจออยู่ข้างหลัง ลิงค์ url ภาพ ที่เราใส่ไป สองตัวเนี่ย มันมีไว้กำหนดการลงภาพ ครับ อย่าง ภาพ หัวบลอคเนี่ย จะขึ่้นให้ใส่ no-repeat เพราะว่า เราทำภาพหัวบลอค มาขนาดพอดี

ส่วน repeat top left เนี่ย จะเป็นการลงภาพ เรียงไปเรื่อยๆ ให้มันเต็มช่องพอดี อย่างพื้นสีเขียวของฉันเนี่ย ฉันลงเพียงภาพเดียว

แล้วใส่ repeat top left เข้าไป มันก็จะเป็นอย่างที่เห็น

อย่างที่บอกไว้ข้างต้นนะครับ ขอบอกไว้แค่นี้ส่วนอื่น ที่ไม่ได้ลงไว้ ก็แสดงว่าไม่รู้เช่นกัน

ตอนนี้ใช้ Firefox ดูๆไปแล้ว ก็ไม่เห็น มีจุดผิดปกติอะไร แต่ใช้ IE7 แล้วธีมมันเบี้ยวๆนะครับ