ใครกำลังประสบปัญหาเนื้อที่การเขียนเอ็นทรีในบล็อกน้อยไปหรือเปล่า

วันนี้จะมานำเสนอวิธีขยายความกว้างพื้นที่แสดงข้อความในเอ็นทรีกัน
เป้นวิธีปรับแต่งความกว้าง สำหรับธีมเวอร์ชั่นใหม่ของเอ็กทีนโดยเฉพาะเลย

ในตัวอย่างจะขยายความกว้างขึ้นอีก 100px (pixels) เพราะง่ายต่อความเข้าใจครับ

ให้ไปที่ Tab ชื่อ Theme
> คลิกที่ปุ่ม Edit ของธีมที่ต้องการ
> หน้าจอ CSS Editor จะโผล่ขึ้นมา
>
ให้แก้ไขข้อมูลของธีมที่ถูกเลือกในจุดต่าง ๆ ตามนี้

#page
#header, #neck, #belly, #leg, #footer
ให้แก้ไขค่า width จาก 780px เป็น 880px

#coverimage
#neck .module
#leg .module
ให้แก้ไขค่า width จาก 730px เป็น 830px

#content
ให้แก้ไขค่า width จาก 490px เป็น 590px


เสร็จแล้วในส่วนของการกำหนดค่าตัวเลข แต่ยังไม่เสร็จทั้งหมดครับ
เพราะถ้าสังเกตในธีม จะเห็นว่ามีไฟล์รูปในส่วนที่เป็นขอบของบล็อก
ซึ่งจะเกิดจากไฟล์รูป 3 ไฟล์ประกอบกัน คือ header footer และ belly
ให้รูปมีขนาดความกว้างสูงสุดตามที่เรากำหนดไว้ ซึ่งในที่นี้ก็คือขนาด 880px

#header
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(
เลือกไฟล์ header ที่แก้ไขความกว้างแล้ว) top left no-repeat;

#neck
#leg
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว

url(เลือกตำแหน่งไฟล์ belly ที่แก้ไขความกว้างแล้ว) top left;

#belly
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(
เลือกตำแหน่งไฟล์ belly ที่แก้ไขความกว้างแล้ว) repeat-y;

#footer
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(เลือกตำแหน่งไฟล์ footer ที่แก้ไขความกว้างแล้ว) bottom left no-repeat;

ซึ่งจะต้องนำรูปที่แก้ไขแล้วมาอัพโหลดเก็บไว้ในพื้นที่ในบล็อก
แล้วจึงนำเอา url ของแต่ละภาพไปใส่ในตำแหน่งที่กำหนดไว้

และข่าวดีก็คือ ผมทำรูปพวกนั้นมาให้โหลดกันแล้ว ก๊อปเอาไปใช้กันได้เลย

  • header.png ขนาดความกว้าง 880 pixels [ PNG | GIF ]
  • belly.png ขนาดความกว้าง 880 pixels [ PNG | GIF ]
  • footer.png ขนาดความกว้าง 880 pixels [ PNG | GIF ]

หมายเหตุ: ไฟล์ PNG จะมีการสร้างเงาใต้กรอบรูป ส่วนไฟล์ GIF จะไม่มีเงาครับ

คำเตือน: การใช้ไฟล์ PNG ในบล็อก อาจส่งผลข้างเคียงอย่างรุนแรงกับผู้ที่ใช้ IE ได้ อ่านที่นี่ »

หรือถ้าคุณคิดว่าขนาด 880 นั่นยังกว้างไม่พอสำหรับบล็อกคุณ เอาไปเลย 980 pixels

  • header.png ขนาดความกว้าง 980 pixels [ PNG | GIF ]
  • belly.png ขนาดความกว้าง 980 pixels [ PNG | GIF ]
  • footer.png ขนาดความกว้าง 980 pixels [ PNG | GIF ]

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

เสร็จแล้วล่ะ แค่นี้บล็อกของคุณก็จะกว้างขึ้นทันตาเห็น สามารถอัพเอ็นทรีกันได้กว้างจุใจ

ขอให้สนุกกับการแต่งบล็อกครับ

Comment

Comment:

Tweet

ใครที่ภาพเหลือมตรง header ในขนาด 880 ให้เปลี่ยนมาใช้เป็นขนาด 980 ดีกว่าครับ ภาพไม่เหลือม

#252 By skycruiser on 2009-12-18 12:41

โทษนะครับๆ มันมี sidebar ข้างเดียวเองอ่ะ
ทำไงถึงจะมีสองข้างอ่ะครับๆ ถ้าเป็นไปได้ ems. มาบอกหน่อยนะครับ ขอบคุณมากๆ
ทดลองขยายดูแล้ว
ในที่สุดก็ได้หน้าบล็อกกว้าง 980 พิกเซลมาใช้
big smile


ขอบคุณมาก ๆ เลยค่ะ

#250 By muxiangxiang on 2009-12-04 21:32

ขอบคุณค้า
แต่ดูตอนนี้เิริ่มแต่งมั่วแล้วแฮะ sad smile

#249 By Gemina on 2009-11-30 00:49

ดีมากเลยครับ

#248 By หะหนุ่ย on 2009-11-19 13:23

อยากมีเพื่อน

#247 By wastana (119.42.94.138) on 2009-11-18 16:05

งงค่ะ

#header
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(เลือกไฟล์ header ที่แก้ไขความกว้างแล้ว) top left no-repeat;

#neck
#leg
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(เลือกตำแหน่งไฟล์ belly ที่แก้ไขความกว้างแล้ว) top left;

#belly
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(เลือกตำแหน่งไฟล์ belly ที่แก้ไขความกว้างแล้ว) repeat-y;

#footer
ให้กำหนดค่าของ background โดยระบุตำแหน่งรูปใหม่ที่ปรับขนาดแล้ว
url(เลือกตำแหน่งไฟล์ footer ที่แก้ไขความกว้างแล้ว) bottom left no-repeat;

ไม่เข้าใจพวกนี้เลย -0-

#246 By vipshop on 2009-11-08 21:13

ขอบคุณมากๆนะค่ะ...

อ้อ...เรามีปัญหาอ่ะค่ะ

รูปโปรไฟล์ที่อัพไปอันแรกลืมย่อขนาด

แล้วพอจะเปลี่ยนเอา อันที่ย่อใส่หรือรูปอื่นๆ...

มันก็ไม่ได้อ่ะค่ะ...เป็นไรก็ไม่รุ้

ช่วยตอบหน่อยนะค่ะ

#245 By JeeYooN on 2009-11-06 19:34

ู^
ลองกด CRTL+F5
เพื่อล้างข้อมูลเก่าที่อาจค้างอยู่ใน IE ครับ

#244 By oatato on 2009-11-05 18:17

ขอบคุณนะคะ big smile
ลองทำดูแล้ว แต่ทำไมบล็อกขยายขึ้นเฉพาะดูด้วย firefox ถ้าเปิดด้วย IE7 มันยังกว้างเท่าเดิมเลยค่ะ ทำไงดี?

#243 By virgo in september on 2009-11-05 09:54

ชอบคุณมากครับมือใหม่จริงๆ

#242 By @kittiphum on 2009-10-31 16:38

ขอบคุณมากครับ แต่อยากถามว่าใหญ่กว่านี้ได้ไหมครับ
แบบว่าวางการ์ตูนแล้วมันยังไปเกยตรง profile อยู่เลยอะครับ sad smile

#241 By MID on 2009-10-31 08:59

ขอบคุณค่า....
ช่วยได้เยอะเลยค่ะ question

#240 By -♥-~*Sealz*~-♥- on 2009-10-28 20:01

ขอบคุณ มากๆครับ

#239 By คู่ขนาน on 2009-10-28 14:07

ขอบคุณมากเลยครับconfused smile
ทำไมของตรงcoverimageมันเกินมากว่าอันอื่นครับ
แล้วตรงมุมก็ไม่เป็นโค้งด้วย
ช่วยบอกหน่อยว่าทำไมangry smile

#237 By taeng on 2009-10-24 08:29

ทำไม่ได้ง่า .พี่ขอเมลได้มั้ยยยย

#236 By asdasd on 2009-10-19 22:04

thx kabbbbig smile

#235 By asdasd on 2009-10-19 11:5