gin no ishi - sora no hime

หลังจากที่ EXTEEN ปรับเปลี่ยนรูปโฉมใหม่ ให้ไฉไลยิ่งกว่าเดิม พร้อมทั้งฟีเจอร์ต่าง ๆ ที่มีประโยชน์สุด ๆ
เราก็ดำผุดดำว่าย และ ก่งก๊ง (ขอยืมคำนี้มาจาก คุณ Palermos นะคะ ก็มันฟังดูน่ารักอ่ะ) กับการตกแต่งโค้ดธีมใหม่ แบบไม่เป็นอันทำมาหากินซะงั้น
(แต่งธีมจนเพลิน บทสรุปที่ช้า ก็ยิ่งช้าขึ้นไปอีก ขอโทษค่า)

เอาล่ะ!! ด้วยความรู้ที่มีเท่าหางอึ่ง ก็สรุปได้ความประมาณนี้ค่ะ

ป.ล. ขออนุญาตเอามาแค่บางส่วน เท่าที่เราจมน้ำแล้วโผล่ขึ้นมาได้ (แต่ไปไม่ถึงฝั่ง) นะคะ

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

(1) บื้ออยู่นาน ว่าทำไมเส้นตารางไม่ยอมโผล่ออกมาให้เห็น ที่แท้ต้องใส่โค้ดในคำสั่งชุดแรกตรงหัวข้อ border แบบนี้ค่ะ

border: 1;

Tips=>>ถ้าใครมีตารางแสดงหน้าบล็อก ต้องเปลี่ยน 0 เป็น 1 (ขนาดของเส้นขอบ) ด้วยนะ ไม่งั้นจะมองไม่เห็นเส้นตารางจ้า

(2) ชุดคำสั่ง body ของธีม

background:#ffffff url(URL ของ Wallpaper ที่เราจะใส่ค่ะ) repeat-x bottom right fixed; Tips=>>สี BG ค่ะ แต่ถ้ามี Wallpaper สีส่วนนี้จะโดน Wallpaper ทับนะคะ - URL ของภาพค่ะ - คำสั่งที่จะให้ซ้ำภาพในแนวไหน (ถ้าไม่ใส่ x (แนวตั้ง) กับ y (แนวนอน) ก็เป็นคำสั่งซ้ำทั้ง 2 ด้าน แต่ถ้าไม่อยากให้ซ้ำ ก็ใส่ no-repeat ค่ะ) - ถ้าต้องการให้ BG ไม่เลื่อน ให้เติม fixed ต่อท้ายได้เลยค่ะ

color:#000000; Tips=>>สีตัวอักษร แนะนำว่าปรับให้เป็นสีดำไว้ก่อน เพราะตัวอักษรที่เราไม่ได้ตั้งสีเอาไว้ในหน้าเขียนเอ็นทรี่ จะแสดงด้วยสีนี้ค่ะ

(3) ก็ว่าทำไม เนื้อหาในเอ็นทรี่ถึงเข้ากั้นหน้าซ้ายไป เพราะมีคำสั่งนี้นี่เอง

.entry .post{
/*float:left;
}*/

Tips=>>ถ้าไม่อยากลบโค้ดออก ใช้ /**/ ครอบคำสั่งที่ต้องการปิด ตามตัวอย่างได้เลยค่ะ เผื่อภายภาคหน้าเปลี่ยนใจอยากให้มันกลับมา "ชิดซ้ายเลยเพ่" น่ะค่ะ

(4) ไม่ชอบรูปที่เป็นเหมือนกระดาษด้านข้าง หัวข้อของ Category ที่เอาไว้เข้าไปดู Link หัวข้อเอ็นทรี่ใน Cat นั้น ๆ

/*a.archive{
background:url(URL รูปเอกสารน่ะค่ะ) no-repeat;
width:12px;
height:12px;
padding-left:15px;
overflow:visible !important;
overflow:hidden;
margin-left:4px;
}*/

Tips=>>ถ้าไม่อยากลบโค้ดออก ใช้ /**/ ปิดตามตัวอย่างได้เช่นเดียวกัน หรือจะลบบรรทัด overflow:visible ออกก็ได้ค่ะ

(5) Side Bar Item (ก็ส่วนลิงก์ด้านข้างน่ะค่ะ) ทำไมหนอ มันชอบขึ้นมาเบียดส่วน Profile ให้ทำดังนี้ค่ะ

#profile{
width:170px;
height:170px;
}

Tips=>>ถ้าจะไม่ให้ส่วน Recommand หรือ Latest Comment ขึ้นมาเบียดรูปแสดงตัว เพราะแลดูไม่สวยงาม หลักการในการปรับแต่ง จะอยู่ตรงการตั้งค่าความสูง โดยต้องตั้งค่าความสูง เผื่อความสูงของรูปแสดงตัวและตัวอักษรที่จิ้มเข้าไปดูรายละเอียดของเจ้าของบล็อกด้วยนะคะ

(6) ตอนแรกนึกว่าใส่ภาพ BG ในส่วนพิมพ์ Comment ไม่ได้ ที่ไหนได้...

#commentform{
width:625px; Tips=>>ความกว้างของฟอร์มใส่คอมเมนท์ แนะนำว่าให้ใส่ค่ามากกว่าความกว้างของ Comment Wallpaper ที่นำมาใช้ แต่ต้องไม่เกินความกว้างของส่วนเนื้อหาด้านบน (เอ็นทรี่) นะคะ ไม่งั้นจะออกอาการโย้นะคะ
height:285px; Tips=>>ความสูงของฟอร์มใส่คอมเมนท์ แนะนำว่าให้ใส่มากกว่าความสูงของ Comment Wallpaper ที่นำมาใช้ค่ะ
/*background:none;*/ Tips=>>ถ้าไม่อยากให้มีสีด้านหลังก็ปิดอย่างนี้นะคะ หรือใส่โค้ด none อย่างเดียว ไม่ต้องใช้ /**/ ปิดก็ได้ค่ะ
float:right; padding:2px 2px 2px 2px;
color:#000000; Tips=>>สีตัวอักษรของฟอร์มใส่ Comment ค่ะ
margin:10px;
border:2px dotted #6495ED; Tips=>>เส้นขอบของฟอร์มใส่ Comment ที่ ถ้าไม่ต้องการให้เป็นกรอบสี่เหลี่ยมล้อมรอบ อยากใส่แค่ด้านใดด้านหนึ่ง ก็เติมพวก top, bottom, right, left หลัง border ได้ค่ะ (เช่น อยากมีเส้นแค่บนกับล่าง ก็จะเป็น border-top:2px dotted #6495ed; และอีกบรรทัด border-bottom;2px dotted #6495ed; ค่ะ)
font-family: "Verdana", Geneva;
font:12px;
background-image:url(URL ภาพที่จะใส่เป็น Wallpaper ของส่วน Comment ค่ะ);
background-position:center; Tips=>>0tวางตำแหน่งของ Comment Wallpaper จะชิดซ้าย (left) ชิดขวา (right) หรือตรงกลาง (center) ก็ตามสะดวกเลยค่ะ
background-repeat:no-repeat;
}

(7) ไม่ชอบเลยที่มีเส้นกั้นบรรทัดของฟอร์มใส่ Comment

#commentform .formrow{
border-top:0px dotted #6495ED;
padding:2px;
}

Tips=>>เปลี่ยนเป็นให้เป็น 0px ไปซะเลย เส้นแบ่งบรรทัดในฟอร์มใส่ Comment จะได้ไม่ต้องขึ้นมารบกวนสายตาค่ะ

(8) เกี่ยวกับส่วน Comment อีกนิด

อันนี้เป็นส่วนใส่ชื่อและเว็ปไซต์ของเพื่อน ๆ ที่มาโพสต์ (ในกรณีที่เพื่อนไม่ได้เป็นสมาชิก Exteen นะคะ)

commentform input.textbox{
width:200px;
}

และ

ช่องแสดงคอมเมนท์ที่กำลังพิมพ์อยู่

#commentform textarea{
filter: alpha(opacity=50); Tips=>>ในกรณีที่อยากให้แสดงส่วนนี้เป็นแบบโปร่งใส ให้ใส่คำสั่งนี้ค่ะ ยิ่งใส่ค่าน้อย ยิ่งใสมาก แต่จะแสดงผลเฉพาะ IE นะคะ Firefox มองไม่เห็นค่ะ
width:300px;
height:100px;
}

และ

ส่วนที่เพื่อน ๆ ที่แวะมาเยี่ยมโพสต์ทิ้งไว้ให้อ่านจ้า

.comment .post{
float:right; Tips=>>จะซ้ายหรือขวาก็ได้ค่ะ แต่ต้องอยู่ด้านตรงข้ามรายละเอียดของผู้ที่มาโพสต์นะคะ ไม่งั้นไม่สวยค่ะ
border-left:2px dotted #6495ED; Tips=>>ถ้าอยากให้มีเส้นกั้นระหว่างส่วนคอมเม้นท์ที่เพื่อน ๆ โพสต์ กับรายละเอียดของเพื่อน ๆ ที่มาโพสต์ ก็ใส่บรรทัดนี้เข้าไปได้เลยค่ะ
padding:2px 2px 2px 2px;
width:500px; Tips=>>ความกว้างของส่วนที่เพื่อน ๆ คอมเมนท์ทิ้งไว้ให้อ่านค่ะ
}

และ

รายละเอียดของเพื่อน ๆ ที่เข้ามาโพสต์ค่ะ

.comment .info{
float:left;
font-size:11px;
width:100px; Tips=>>ความกว้างอันนี้ กับความกว้างส่วนที่เพื่อน ๆ โพสต์ เมื่อรวมกันแล้ว อย่าให้เกินขนาดทั้งหมดของฟอร์มใส่ Comment นะคะ ไม่งั้นเกิดอาการโย้เช่นเดียวกัน อ้อ อย่าลืมเผื่อ ขนาดที่เราเว้นขอบ (padding) ไว้ด้วยนะคะ
padding:2px 2px 2px 2px;
/*margin-right:10px;*/
}

และ

ความกว้างของรูปประจำตัว ของเพื่อน ๆ ที่แวะมาโพสต์คอมเมนท์ค่ะ

.comment .info img{
width:32px;
}

ก็ประมาณนี้นะคะ จริง ๆ เราไม่ค่อยรู้เรื่องพวกนี้หรอกค่ะ
แต่อาศัยไปอ่าน ๆ ตามบล็อกของเพื่อน ๆ โดยเฉพาะของ คุณ เจนเนสซ่า น่ะค่ะ (เขาเก่งจริง ๆ นะ)
และก็ Search ส่วนเพิ่มต่าง ๆ จาก Google แล้วมามั่วเอาเองค่ะ

สุดท้ายนี้ ขอขอบคุณ คุณแชมป์ เว็ปมาสเตอร์คนเก่ง ที่ทำให้ชาว Exteen มีบล็อกสวย ๆ และทันสมัยใช้ด้วยนะคะ