วิธีขยายบล็อกให้กว้างขึ้น

posted on 11 Oct 2007 16:38 by oatato in BlogDesign

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

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

ในตัวอย่างจะขยายความกว้างขึ้นอีก 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 แบบสองฝั่งคลองได้ครับ

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

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

Tags: blog, modify, theme, width97 Comments

ขนาดคิงไซส์ confused smile

ขอบคุณมากค่ะ มีคนถามมาหลายคนเลย ขออนุญาติเอาไปเผยแพร่นะคะ

#1 By เจนเนสซ่า on 2007-10-11 18:03

ขอบคุณมากเลยครับ

#2 By q on 2007-10-11 18:09

= =a~หน้าบล็อคยังกะเว็บไซต์เยยนะฮะเนี่ย

ขอบคุณฮะ>+<~

#3 By ♪ Yukimura ♪ on 2007-10-11 18:14

ว่าจะขยายอยู่เหมือนกันแต่เห็นใจคนใช้ จอขนาด 800 x 600 น่ะครับ เอาไว้ตัวเลขคนใช้จอนี้ น้อยมาก ๆ จะขยายครับ

แต่อย่างไรก็ขอบคุณนะครับ

#content (1 ตำแหน่ง)
เดิมมีการตั้งค่า width ไว้ที่ 490px ... ให้แก้ไขเป็น 490px

สรุปว่าต้องเป็น 590 หรือเปล่าครับ

#4 By เจ้าชายน้อย on 2007-10-11 18:16

โอ๊ส บล็อคเป็นประโยชน์ๆ
แต่ทางนี้ ถ้าจะขยายกรอบ คงเอากรอบของที่เว็บให้มาออกไปเลยน่ะค่ะ (เพราะเป็นภาพ png แบบโปร่งใส เวลาเปิดด้วย firefox กับ opera ด้วยเครื่องที่ไม่ค่อยแรงมันกระตุกมาก) เอ้ะแต่ตอนนี้บล็อคข้าพเจ้าก็ไม่มีกรอบนี่นา ฮา = =" sad smile

/hot ~

#5 By Nyotaro on 2007-10-11 18:20

โอ้ ได้ความรู้ใหม่ๆ ขอบคุณค่า

เดี๋ยวต้องลองๆ cry

#6 By คาโอเรนจ้า on 2007-10-11 19:11

แก้ไขจุดที่พิมพ์ผิดให้ถูกต้องแล้วครับ

#7 By oatato on 2007-10-11 19:28

ของทรายก็แก้แล้วค่ะ แต่ใช้ความกว้างที่ 820

ปกติมันเล็กไป อย่างเรามันต้องใหญ่(ผิด)กว่าปกติ

#8 By + [ P ] Z ๑ + บ๋องๆบวมๆ on 2007-10-11 20:21

ตอบ:

#1
เผยแพร่ได้ตามสบายครับ ไม่มีปัญหา

#2
ชอบภาพในบล็อกคุณ q ครับ วาดสวยดี นึกถึง mary grandpre'

#3
เพราะเราตั้งใจให้เหมือนครับ เหอ เหอ

#4
เผอิญผมเห็นขนาดจอ LCD 14'-15' ในสมัยนี้
ส่วนใหญ่ก็จะมีมาตรฐานขนาด pixel อยู่ที่ 1024x768 ไปแล้ว
เลยคิดว่าขนาด 980 pixel ก็น่าจะไม่ทำให้คนแอบบ่นถึงมากนัก
ป.ล. แอบไปวัดความกว้างหน้าแรกของเอ็กทีนมา .. 980 เหมียนกัลลลล open-mounthed smile

#5
วิธีข้างต้นคงจะเป็นสำหรับคนที่อยากเปลี่ยนแค่ความกว้าง
แต่ยังไม่อยากเปลี่ยนธีม หรือเปลี่ยนรูป ประมาณนั้นน่ะครับ
ต่อไปผมก็คงเอามันออกไปเหมือนกัน ช่วงนี้ขอไฮโซซะหน่อย

#6,#8 ขอให้โชคดีไม่มีบั๊กมากวนใจครับ question

#9 By oatato on 2007-10-11 20:49

ขอบคุณมากคะ กำลังหัดทำblog เป็นครั้งแรกคะ งง มึนตึ้บไปเลย แต่สนุกดีคะ จะลองดูคะ

#10 By *.Freshy.* on 2007-10-11 21:01

ขอบคุณค่ะ
ต้องขอยืมไปทดลองก่อนแล้ว big smile

#11 By '๏'.εΐз.'๏'เอมิ '๏'.εΐз.'๏' on 2007-10-11 21:58

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

คุณโอ้ธนี่เก่งจังนะครับ ขยันศึกษาสิ่งใหม่ๆมาให้เราอ่านกัน

#12 By แพนด้ามาจากญี่ปุ่น on 2007-10-11 22:32

ขอบคุณมากครับคุณโอ๊ต..ที่สนองneed ปอนขนาดนี้..มีกำลังใจจะขยายบล็อกแล้วหล่ะครับ..เดี๋ยวตรวจข้อสอบเสร็จปอนคงได้ฤกษ์เบิกโรงแน่ๆ ครับ confused smile

#13 By ปอนปอน on 2007-10-11 23:35

คลิกไปคลิกมา บวกรีเฟรซ ในที่สุดก็ได้แล้วครับ confused smile

#14 By วัชระ on 2007-10-12 01:02

แก้ไขปัญหาคลิกยากได้แล้วครับ แจ้งทางเว็บมาสเตอร์ไปแล้วด้วย

http://board.exteen.com/help/read/176

#15 By oatato on 2007-10-12 01:11

อืม...ยากดีจัง ไม่ค่อยรู้เรื่องเลยครับ sad smile

แต่คลิกได้ก็มีความสุขแล้วล่ะ confused smile

#16 By วัชระ on 2007-10-12 01:17

กำลังอยากขยายหน้าเว็บบล็อกอยู่พอดีเลย แบบนี้ผมต้องลองศึกษาดู แล้วพรุ่งนี้ผมจะลองเปลี่ยนดู

คำถาม - ถ้าผมใช้หน้าจอขนาด 1024x768 แล้วต้องการขยายให้เต็มความกว้างเลย ไม่เอาขอบแบล็คกราวน์ด้านนอก ต้องกำหนดเป็นกี่ px คือผมไม่ได้ใช้ Sidebar ด้านข้าง เป็นเนื้อหาล้วน ช่วยแนะนำทีครับ

#17 By Dream-Box on 2007-10-12 01:45

ก็น่าจะซัก 1000 pixel ละครับ
ที่จริงจะ 980 pixel ก็ดี เพราะแก้จากธีมที่ให้มาได้ง่าย

เหลือขอบ ๆ เอาไว้บ้างก็ดีครับ อย่ากำหนดเต็ม 1024
เผื่อหักลบความกว้างของ scrollbar เอาไว้ด้วย

ถ้าาใช้สูตรความกว้าง 980px
ก็ใช้ข้อมูลเลขในเอ็นทรี + 200 เข้าไปได้เลยครับ
เช่น 780px+200px ก็ได้ 980px ส่วนเลขอื่นก็ทำเหมือนกัน

#18 By oatato on 2007-10-12 02:07

งวดนี้ให้เยอะมากๆๆ ต้องค่อยๆๆอ่าน แล้วลิงค์ที่ help อ่านคร่าวๆ sad smile

เจออะไรก็เอามาลงเรื่อยๆๆนะ big smile

#19 By ตุ้มเป๊ะ on 2007-10-12 12:57

ผมใช้แบบเดิมดีกว่าครับ เพราะว่ามีเพื่อนๆ ใช้หน้าจอขนาด 800x600 กันเยอะ ผมว่าแบบขนาดเท่าเดิมที่ Exteen ให้มาพอดีอยู่แล้ว

แต่...ขอบคุณสำหรับเคล็ดลับการขยายบล็อกครับ ตอบปัญหาได้เร็วดี แถมบอกรายละเอียดเยี่ยมครับ

#20 By Dream-Box on 2007-10-12 14:44

กำลังคิดอยู่เลยว่าบลอคแคบ ขอบคุณมากสำหรับคำแนะนำในการยืดตัว (?) สำหรับบลอคทานตัวหนังสือจุค่ะ กว้างๆ แล้วคงดูสบายตาขึ้นเยอะเลย confused smile

#21 By Dahlia on 2007-10-13 10:27

ขอบคุณ ได้ความรู้ใหม่ๆ

#22 By คนหน้าตาดี on 2007-10-13 16:37

อยากรู้เกี่ยวกับ Back ground อ่ะคับคือ จะทำยังไงหั้ยเห็น Back ground อ่ะคือผมใส่ back gound เป็นรูปแต่มันไม่เห็นรูป เพราะมันไปอยู่ด้านหลัง พื้นสีขาวอ่ะ จะแก้ยังไงคับถ้ารู้ก็ช่วยบอกด้วยนะคับ

#23 By cRazY knighT on 2007-10-14 13:05

^
ถ้าอย่างนั้นใน css ก็คงต้องตัดบรรทัดที่เขียนว่า background
ในส่วนของ #belly ทิ้งไปครับ ลองแก้ที่จุดนี้ก่อนครับ

#24 By oatato on 2007-10-14 13:37

โิ้ิอ้...ขอบคุณมากค่ะ
อยากใช้ขนาดประมาณนี้แหละ

555

#25 By ..the allmost.. on 2007-10-14 14:16

สมมุติจะขยายให้เต็มหน้าบล๊อคเลย ไม่ให้เห็นบีจีทำยังไงพอจะบอกได้มั๊ยครับ?

#26 By น้องละอ่อน on 2007-10-14 21:40

ยังไม่ได้ทดลองนะครับ แต่คิดว่าน่าจะเ็ป็นประมาณนี้

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

และส่วนอื่น ๆ ก็คงต้องขยายตาม เป็น % เช่นกันครับ

#27 By oatato on 2007-10-14 22:09

เดี๋ยวจะขอแปะโป้งเอนทรี่นี้ไว้ก่อน จะมาทำตามวันหลังครับ ต้องการพอดีเลย

#28 By ก๋อง *~*$treet English *~* on 2007-10-15 15:19

ตัวบล้อกมันไม่ขยายตามอ่ะค่ะ มันขยายแต่พวก header led bely neck page footer อะไรอย่างงี้อ่ะค่ะ

ช่วยทีค่ะ T-T

#29 By เฟเน่จัง© on 2007-10-17 21:10

^
ที่จริงบล็อกขยายออกไปแล้วล่ะครับ
คุณเฟเน่จังยังใช้ไฟล์ิ background อันเก่า
ที่มันยังเป็นขนาดเดิมอยู่
ู่่
อย่าลืมแก้บรรทัดพวกนี้ด้วยนะครับ
background: url(เลือกไฟล์ header ที่แก้ไขความกว้างแล้ว) double wink

#30 By oatato on 2007-10-17 22:23

อ๋า ยังไม่เกทเลยอ่ะค่ะ

ไฟล์ header เฟก้เปลี่ยนแล้วอ่ะค่ะ

ยังไงก็ขอรบกวนอธิบาย ช้าๆชัดๆอีกครั้งนะคะ

(เปนคนเข้าใจยาก+ไม่มีความรู้เรื่องนี้เลย)

ขอบคุณค่ะ

ป.ล. ตอบเปน ems ก้ได้นะคะ

#31 By เฟเน่จัง© on 2007-10-17 22:52

ส่ง ems ไปแล้วครับ double wink

ไม่ใช่พัสดุนะ sad smile

#32 By oatato on 2007-10-18 03:10

ขอบคุณค่ะ

#33 By (¯`·._.·[กิฟท์ซี่กะพี่บอล]·._.·´¯) on 2007-10-18 08:57

ขอบคุณที่ให้ความรู้ค่ะ กำลังสับสนพอดี

เเต่ว่าตรงนี้ มันผิดอ่ะคะ

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

#34 By clazzixd on 2007-10-19 14:03

พิมพ์ผิดเฉยเลย cry

แก้ไขให้ถูกต้องแล้วครับ

ขอบคุณครับที่แจ้งมา confused smile

#35 By oatato on 2007-10-19 16:56

งงมาก photoshop ผมเซฟไม่ได้ยาวเกิน 1 หมื่นพิกเซลล์

#36 By เอกน้อย on 2007-10-25 06:04

กะลงัอยากได้อยู่เลยคะ จาลองเอาปายทำดูนะคะ

#37 By ยูกิจัง on 2007-10-27 16:00

ผมใช้มอนิเตอร์แบบไวด์สกรีนครับ ความกว้าง 1680 พิกเซล เลยอยากขยายความกว้างของblogตามไปด้วย ก็พยายามทำตามวิธีที่คุณ oatatoสอนอยู่ครับ ตอนนี้อยู่ที่หน้า CSS EDitor แต่มันมีคำเตือนด้านล่างว่า เมื่อแก้ไขด้วยCSS EDITOR แล้วจะไม่สามารถแก้ไขสีหรือรูปภาพได้อีก อันนี้หมายความว่าผมจะไม่สามารถหารูปมาเปลี่ยนตรงหัวบล็อกกับตรงพื้นแบคกราวน์หลังจากขยายความกว้างของกล็อกไปแล้ว ใช่ไหมครับ

#38 By Ripley on 2007-10-30 09:45

ขอบคุณมากหลาย
บล็อคดี มีประโยชน์ ไม่มีโทษต่อสิ่งแวดล้อม
ขอบคุณอีกครา

#39 By Random-Diary on 2007-10-30 19:47

ตอบคุณ Ripley

พอเปลี่ยนธีมใน CSS Editor แล้ว
ก็สามารถแก้ไขรูป Header และ Background

คือใส่ URL ของรูปใน CSS Editor ได้เลยครับ

ตรงนี้เป็นการกำหนดรูป background
body {}

และตรงนี้เป็นการกำหนดรูป header
#coverimage {}

#41 By oatato on 2007-10-31 09:55

ขอบคุณคุณ Oatato มากเลยครับที่ช่วยกรุณาแนะนำ ตอนนี้ผมเปลี่ยนรูปheaderได้แล้วครับ เย้ๆๆ
แต่มีปัญหาคือ หลังจากที่ได้ขยายบล็อกให้กว้างขึ้นแล้ว เวลาใส่new entryเข้ามา แทนที่มันจะไปโผล่ใต้รูปheaderข้างๆsidebarตามปกติ
แต่มันกลับย้ายลงไปโผล่อยู่ตรงพื้นที่ด้านล่างต่อจากsidebarครับ ทำให้เกิดช่องว่างอยู่กลางบล็อก ทำอย่างไรจะให้new entry เลื่อนขึ้นมาโผล่ข้างบนตามที่มันควรจะเป็นได้ครับ embarrassed

#42 By Ripley on 2007-10-31 14:09

โอว สุดยอดค่ะ อย่างนี้ต้องแอด fav

#43 By Bowajung on 2007-10-31 18:14

ตอบคุณ Ripley

#content > width:990px;

ขนาด 990 ผมว่ามันกว้างไปครับ

เพราะ 990(content) + 225(sidebar)
มันมากกว่าขนาดความกว้าง 1130 ที่กำหนดไว้ครับ
sad smile

#44 By oatato on 2007-10-31 20:06

ขอบคุณครับคุณOatato ผมก็แก้ปัญหาตามที่คุณOatatoแนะนำมาได้เรื่อยๆ ตอนนี้มาเจอปัญหาตรงที่ว่า ผมทำรูปแบคกราวน์เพื่อเอามาใส่ในส่วนของcontent(ตรงที่new entryจะขึ้นมาวาง) แต่พอผมเอาurlมาใส่ตรงbellyแล้ว รูปพื้นของconnentที่ทำมามันขึ้นมาไม่ครงแนวกับส่วนอื่นๆของบล็อกเลยครับ คือมันจะเหลื่อมมาทางซ้ายมือนิดหน่อย ทำยังไงจะขยับให้มันตรงแนวกับส่วนอื่นๆได้ครับ

#45 By Sanphet on 2007-11-02 14:01

commentที่45ข้างบนนี้ของผมเองครับ ขอโทษทีเผลอส่งจากอีกบล็อกนึง ปัญหาข้างบนนี้เป็นของบล็อก ripley นี้ตะหาก คลิกเข้าไปดูก็จะเห็นปัญหาครับ ขอบคุณคุณOatatoมากๆๆ question

#46 By Ripley on 2007-11-02 14:14

คุณ oatato ครับ ขอวิธีทำให้บล็อกมันมี 2 ข้างแบบของคุณหน่อยครับ ผมทำไม่เป็นอ่ะ

#47 By L.Kasei Shirota on 2007-11-02 19:20

^
^
ตามลิ้งค์นี้ไปเลยครับ
http://sa-i.exteen.com/20071010/entry

#48 By oatato on 2007-11-02 21:04

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

#49 By Ripley on 2007-11-03 15:02

#48 ขอบคุณ มากครับ คุณ oatato (เปลี่ยนธีมอีกแล้ว ครั้งนี้สะอาดตาดีครับ)

#50 By L.Kasei Shirota on 2007-11-03 16:09

ในCSSของผม ตรง.comment.postนั้น มันมีแต่float:right; กับ width:330px; แค่สองอย่างนี้เองครับ ไม่มีหัวข้อ color ให้เติมเบอร์สีแต่อย่างใด แต่ผมก็ลองเพิ่มคำว่า color:#FFFFFF; ต่อมาอีกบรรทัดตามที่คุณ Oatato บอกทุกประการแล้วครับ แต่ฟ้อนท์ในcommentก็ยังเป็นสีดำเหมือนเดิม ทำไงดีครับ embarrassed

#51 By Ripley on 2007-11-03 18:46

potato tomato & oatato

Perfect Point of Nowhere

Pages

Categories

Archives

Favourites