BlogGang.com : : -`๏'- MeIKha : -`๏'- Blog สไตล์?! (ภาคขยาย)

-`๏'- Blog สไตล์?! (ภาคขยาย)

เนื่องจากมีเพื่อนสมาชิกบางท่านได้นำโค้ดการทำสไตล์บล๊อกไปใช้ แล้วประสบปัญหาไม่สามารถประกอบรูปแบบได้ตามตัวอย่าง ก็เลยคิดว่าที่ผ่านมาอาจยังขาดตกบกพร่องในการนำเสนอไป เป็นว่าเรามาเริ่มกันใหม่อีกสักรอบ สำหรับท่านที่เพิ่งเข้ามาในหน้านี้อาจจะงุนงงว่า คุยอะไรกันอยู่?! ถ้าสนใจในเนื้อหาที่คุยกันอยากทราบรายละเอียดตั้งแต่ต้น ก็ขอเชิญไปที่ หน้านี้

เรามาเริ่มต้นกันที่เลือกรูปขึ้นมาหนึ่งรูป ซึ่งมีขนาด width=450px; height=338px ดังตัวอย่างข้างล่างนี้

จากรูป ! เจ้าของบล๊อกก็เริ่มมองหาพื้นที่ในใจว่าจะลงส่วนเนื้อหาไปที่ส่วนใดของรูปดี แล้วเจ้าของบล๊อกก็ตัดสินใจเลือกพื้นที่ดังภาพ (ในการนำเสนอครั้งนี้ เจ้าของบล๊อกจะไม่อ้างอิงการใช้โปรแกรม Photoshop เข้ามาช่วยในการจัดการ)

จากตรงนี้ เจ้าของบล๊อกมี 2 ทางเลือก หนึ่งเลือกที่จะแบ่ง 4 ช่อง หรือสองแบ่ง 9 ช่อง ดังรูป

แบ่ง 4 แบบนี้ในใจ (ง่ายดีจัง)
แบ่ง 9 แบบนี้ในใจ (สวยดีน๊า)

แล้วในที่สุด เจ้าของบล๊อกก็ตัดสินใจเลือกแบ่ง 4 ช่องดีกว่า เย๊ยยยย!!! มะช่ายจิ..เจ้าของบล๊อกตกลงเลือกแบ่ง 9 ช่องจ้า งุงิ งุงิ (บ่น..นิโหน่ยว!!)
เจ้าของบล๊อกก็เอาโค้ดที่ได้มาจากครั้งที่แล้วกางออก (โดยยังไม่ได้เปลี่ยนแปลงแก้ไขอะไรเลยนะ มาอย่างไรเห็นอย่างนั้นเลย)

รายละเอียดของโค้ด
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="460" background="//img508.imageshack.us/img508/3143/
a382889112copy0ro.jpg">
<tr>
<td height="21" width="22"> </td>
<td height="21" width="180"> </td>
<td height="21" width="252"> </td>
</tr>
<tr>
<td height="250" width="22"> </td>
<td valign="top" height="250" width="180">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 181; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 230">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td valign="center" align="middle" height="250" width="252"><a href="//meikharhinoceros.bloggang.com/"><img src='//img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
</tr>
<tr>
<td height="78" width="22"> </td>
<td height="78" width="180"> </td>
<td height="78" width="252"> </td>
</tr>
</table>
</div>

ดำเนินการปรับเปลี่ยนรายละเอียด ที่เห็นอย่างแรกเลยคือขนาดของรูปในโค้ด width="460" แต่ภาพที่เจ้าของบล๊อกนำมาใช้แค่ width="450" อีกจุดคือ URL ของภาพก็ต้องเปลี่ยนแปลง ส่วนอื่นๆ ก็ยังไม่รู้จะเปลี่ยนไรดี ก็เลยตัดสินใจใช้ค่าเดิมไปก่อนแล้วกัน ผลจากการเปลี่ยนแปลงค่าสองตัวข้างต้นจึงปรากฏดังภาพข้างล่างนี้


	ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)

ถ้าสังเกตุจากตรงนี้จะเห็นว่า เกิดภาพซ้อนขึ้นที่ส่วนล่างดังรูป(บางคนถ้าภาพมีขนาดใหญ่ อาจกลายเป็นว่าภาพขาดหายไปได้)แต่ตรงนี้ เจ้าของบล๊อกไม่สนใจอ่ะ ปล่อยไปก่อน ช่างหัวมาน ไม่รักดี ก็ช่างมาน เนอะๆๆ แหะๆ มะช่ายอย่างนั้น!? เราข้ามตรงนี้ไปก่อนไปดูส่วนประกอบอื่นๆ ก่อน

มี Trick อยู่นิดนึง ในหน้าเพจบล๊อกขณะที่เราแสดงผลตัวอย่างอยู่ ให้คลิกเมาส์ลงบนพื้นที่ว่าง 1 ครั้ง แล้วกด Ctrl+A จะปรากฏดังภาพข้างล่างนี้

สังเกตุที่รอยมาสก์ตำแหน่ง(ลูกศรสีแดง) นั่นคือระยะห่างระหว่างช่องภายในของตาราง ซึ่งเกิดจากตัวเลขเดิมที่เรายังไม่ได้ปรับแก้ จากตรงนี้เราก็ทำการปรับระยะให้เข้ากับระยะจริงๆ ที่เรามาสก์ไว้ในใจก่อนหน้านั้น ซึ่งตรงนี้จะแม่นยำแค่ไหน ใช้เวลามากหรือน้อยขึ้นอยู่กับประสบการณ์และความเป็นคนช่างสังเกตุของผู้ทำเป็นสำคัญ เจ้าของบล๊อกเริ่มเปลี่ยนแปลงตัวเลขสีแดงในโค้ดก่อน โดยเริ่มทำการเปลี่ยนตัวเลขที่อยู่ในแนวตั้ง(width)ก่อนเป็นสำคัญ (จากรอยมาสก์ที่เห็นเจ้าของบล๊อกสามารถอ้างอิงกับแนวตั้งได้ง่ายที่สุด) โดยตัวเลขที่ใช้ในแนวตั้งมีดังนี้ คือ 10+240+200=450 (เป็นค่าตัวเลขที่เราสมมติไปก่อน)

รายละเอียดของโค้ดหลังการเปลี่ยนแปลงครั้งที่ 2
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="450" background="//img507.imageshack.us/img507/8443/boacute0174of.jpg">
<tr>
<td height="21" width="10"> </td>
<td height="21" width="240"> </td>
<td height="21" width="200"> </td>
</tr>
<tr>
<td height="250" width="10"> </td>
<td valign="top" height="250" width="240">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 181; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 230">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td valign="center" align="middle" height="250" width="200"><a href="//meikharhinoceros.bloggang.com/"><img src='//img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
</tr>
<tr>
<td height="78" width="10"> </td>
<td height="78" width="240"> </td>
<td height="78" width="200"> </td>
</tr>
</table>
</div>

ผลที่ได้จากการเปลี่ยนระยะแนวตั้ง (ตัว Scrollbar เจ้าของบล๊อกปล่อยไว้ก่อน ยังไม่ใช่สาระสำคัญ) จะปรากฏดังภาพข้างล่าง ต้องทำไฮไลท์ (Ctrl+A) กับพื้นที่ด้วยจึงจะสามารถมองเห็นนะจ๊ะ ถ้าดูจากตรงนี้ถือว่าตำแหน่งแนวตั้งน่าจะใกล้เคียงกับที่วาดภาพไว้ในใจได้แล้วนะจ๊ะ?

คราวนี้มาที่การปรับค่าทางแนวนอน (height) ดูบ้าง เราจะใช้อะไรเป็นหลักสังเกตุล่ะ ในเมื่อดูจากไฮไลท์แล้วไม่เห็นรอยทางแนวนอนเลย ทำไงดี?! ติ๊กต๊อกๆๆๆ ...ใคร? ตอบถูกคนนั้นสอบผ่าน อิอิ

ให้สังเกตุที่บรรทัดของข้อความกับหัวของ Scrollbar ไว้เป็นสำคัญ โดยอาจตั้งตัวเลขสมมติขึ้นมาชุดบนสุดก่อน เจ้าของบล๊อกกำหนดไว้ที่ height=230 ส่วนขอบล่างกำหนดไว้ที่ height=10 ตรงท่อนกลางก็จะได้ 338-230-10=98 หรือจัดเรียงลำดับใหม่ก็จะได้ 230+98+10=338 (เป็นค่าตัวเลขที่เราสมมติไปก่อน)

รายละเอียดของโค้ดหลังการเปลี่ยนแปลงครั้งที่ 3
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="450" background="//img507.imageshack.us/img507/8443/boacute0174of.jpg">
<tr>
<td height="230" width="10"> </td>
<td height="230" width="240"> </td>
<td height="230" width="200"> </td>
</tr>
<tr>
<td height="98" width="10"> </td>
<td valign="top" height="98" width="240">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 181; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 230">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td valign="center" align="middle" height="98" width="200"><a href="//meikharhinoceros.bloggang.com/"><img src='//img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
</tr>
<tr>
<td height="10" width="10"> </td>
<td height="10" width="240"> </td>
<td height="10" width="200"> </td>
</tr>
</table>
</div>

ได้ระยะแนวนอนช่วงที่จะเป็นขอบบนของข้อความแล้วจ้ะ แต่ข้างล่างมันดันยืดออกไปมากเลย แล้วถึงตรงนี้ใครพอจะเดาออกว่าทำไม? อะไร? คือสาเหตุที่ทำให้มันยืดออก ถ..ถะ....ถูกต้องนะคร้าบบบบบ!! Scrollbar ไงกั๊ฟ มันยาว(สูง)เกิน มันก็เลยทำให้ยืดออกไป ถึงตรงนี้หลายคนคงรู้แล้วจะแก้ปัญหาได้อย่างไร

เพื่อไม่ให้เยิ่นเย้อเกินไป เจ้าของบล๊อกจะไม่แสดงขั้นตอนการปรับตัวเลขโค้ดทีละน้อยๆ แบบที่ผ่านมาแล้วนะ ให้ท่านสังเกตุความเปลี่ยนแปลงของตัวเลขต่างๆ เปรียบเทียบกันเอาเองนะจ๊ะ (เจ้าของบล๊อกมีการย้ายตำแหน่งของลิ้งค์ในภาพด้วย)

รายละเอียดของโค้ดหลังการเปลี่ยนแปลงครั้งสุดท้าย
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="450" background="//img507.imageshack.us/img507/8443/boacute0174of.jpg">
<tr>
<td height="230" width="10"> </td>
<td valign="center" align="middle" height="230" width="240"><a href="//meikharhinoceros.bloggang.com/"><img src='//img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td>
<td height="230" width="200"> </td>
</tr>
<tr>
<td height="90" width="10"> </td>
<td valign="top" height="90" width="240">
<DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 250; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 90">
ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td>
<td height="90" width="200"> </td>
</tr>
<tr>
<td height="18" width="10"> </td>
<td height="18" width="240"> </td>
<td height="18" width="200"> </td>
</tr>
</table>
</div>


	ก๊อปโค้ดทั้งหมดจากที่นี่ <div align="center"><table border="0" cellpadding="0" cellspacing="0" width="450" background="//img507.imageshack.us/img507/8443/boacute0174of.jpg"><tr><td height="230" width="10"> </td><td valign="center" align="middle" height="230" width="240"><a href="//meikharhinoceros.bloggang.com/"><img src='//img291.imageshack.us/img291/3219/linking4bp.gif' border=0></a></td><td height="230" width="200"> </td></tr><tr><td height="90" width="10"> </td><td valign="top" height="90" width="240"><DIV style="SCROLLBAR-FACE-COLOR: #000000; LEFT: 130px; FLOAT: left; OVERFLOW-X: hidden; OVERFLOW: scroll; WIDTH: 250; SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; SCROLLBAR-ARROW-COLOR: #FFFFFF; SCROLLBAR-BASE-COLOR: #C3E7E3; HEIGHT: 90">ข้อความหรือรูปภาพ(ภาพไม่ควรมีขนาดใหญ่เกินกว่าช่องที่กำหนดนะจ๊ะ)</div></td><td height="90" width="200"> </td></tr><tr><td height="18" width="10"> </td><td height="18" width="240"> </td><td height="18" width="200"> </td></tr></table></div>

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

อยากฝากไว้ว่าการทำบล๊อก โค้ดต่างๆ ไม่ใช่สิ่งที่ยุ่งยากอย่างที่หลายท่านเข้าใจ ถ้าเข้าใจถึงความสัมพันธ์ที่เกี่ยวเนื่องกัน ซึ่งความเข้าใจนี้ไม่จำเป็นต้องใช้สติปัญญาเลอเลิศอันใด เพียงแค่เป็นคนช่างสังเกตุสักนิด ก็จะสามารถเข้าใจถึงความสัมพันธ์นี้ได้


	อารมณ์.... เป็นสิ่งปลีกย่อยมากมายในความรู้สึกนึกคิดของคน ทำให้เรารู้สึกต่างต่างนานากับเรื่องที่เกิดขึ้น ฉันคิดเสมอว่าการควบคุมอารมณ์ เป็นสิ่งสำคัญในการดำเนินชีวิตร่วมกัน คนเราจะอยู่ร่วมกันได้ดีเพียงไร ก็ขึ้นอยู่กับว่า... สามารถวางอารมณ์ได้เหมาะสมเพียงไร เป็นสิ่งปลีกย่อยมากมายในความรู้สึกนึกคิดของคน ทำให้เรารู้สึกต่างต่างนานากับเรื่องที่เกิดขึ้น ฉันคิดเสมอว่าการควบคุมอารมณ์ เป็นสิ่งสำคัญในการดำเนินชีวิตร่วมกัน คนเราจะอยู่ร่วมกันได้ดีเพียงไร ก็ขึ้นอยู่กับว่า... สามารถวางอารมณ์ได้เหมาะสมเพียงไร