How to ตกแต่งนิยาย / ไอดี

ตอนที่ 13 : [CODE] วิธีลงและเลือกใช้บีจี

  • เนื้อหานิยายตอนนี้เปิดให้อ่าน
  • View : 3433
    จำนวนคนให้กำลังใจ : 6 ครั้ง
    28 มี.ค. 52


โปรแกรมที่ใช้ ทำลงแพดหรือจะทำที่หน้าเว็บเลยก็ได้
ระดับความยาก 1/5 (สำหรับโค๊ดอย่างเดียว) 3/5 (สำหรับรายละเอียดโค๊ด)
บทความที่ควรอ่านก่อน วิธีลงโค๊ดทั้งแบบดิบและสุก หากต้องการศึกษารายละเอียดเพิ่มเติม ควรอ่านเรื่อง CSS (style sheet) ด้วย

สารบัญย่อย

โค้ดและคำอธิบาย
ประเภทของบีจี
วิธีเลือกภาพ

 

โค้ดของบีจี

<style type="text/css">
body{
background-image: url(ที่อยู่ของรูปบีจี);
background-attachment:fixed;
}
</style>

นี่คือคำสั่งพื้นฐาน ตัวสีเขียวคือค่าที่เปลี่ยนได้ตามความต้องการค่ะ ปกติเปลี่ยนแค่ ที่อยู่ของรูปบีจี ก็พอค่ะ
** สำหรับพื้นหลังไอดี แนะนำให้เปลี่ยนผ่าน control panel ไม่ต้องใช้โค้ดหรอกค่ะ

คำอธิบาย

หากไม่ต้องการศึกษารายละเอียดเพิ่มเติม ข้ามหัวข้อนี้ไปเลยก็ได้ค่ะ เพราะแค่โค๊ดด้านบนก็ใส่บีจีได้แล้ว แต่ถ้าอ่าน จะสามารถเอาไปประยุกต์ใช้ต่อได้ และสามารถใส่ลูกเล่นเพิ่มเติมให้บีจีของคุณได้อีก ^^

<style type="text/css"></style>
เป็นแท็กเปิดปิดของ style sheet

body
เป็นคำสั่งบอกว่าไสตล์นี้ใช้กับแท็ก body ของภาษา html ซึ่งก็คือ มันจะมีผลครอบคลุมทั้งหน้า นอกจากแท็ก body แล้ว ยังสามารถเปลี่ยนเป็นอย่างอื่นได้แล้วแต่ว่าเราอยากจะใช้ไสตล์นี้กับแท็กไหน เช่นถ้าเป็น table ก็จะไปควบคุมที่ตัวตาราง ซึ่งเราจะค่อยๆ ทยอยบอกละกันนะคะ เพราะเราสามารถเล่นกับตรงนี้ได้เยอะเลยล่ะค่ะ ยิ่งถ้าคุณมีความรู้เรื่อง html ด้วยแล้วยิ่งเล่นได้มากจนคุณเบื่อ ขี้เกียจแต่งเลยทีเดียว (มั้ง)
เอ้อ แล้วหลังจากจบ คำสั่งที่บอกว่าจะใช้กับส่วนไหนแล้ว ให้ใส่เครื่องหมายปีกกา {} คลุมไว้ด้วยนะคะ มันเป็นคล้ายๆ ตัวกำหนดขอบเขตน่ะค่ะ

background-image: url(http://image.dek-d.com/4/728230/5734857jpg.);
background-image: url(...); เซตรูปบีจี โดยในเครื่องหมายวงเล็บจะเป็น url รูปค่ะ

background-attachment:fixed;
นี่คือตัวสั่งให้บีจีของคุณอยู่กับที่ ไม่เลื่อนลงตามหน้าเว็บค่ะ ถ้าอยากให้มันเลื่อนก็ใส่คำว่า scroll แทนค่ะ (ลองเล่นดูเองละกัน)

นอกจากนี้เราอาจแทรกลูกเล่นอื่นๆ ลงไปได้อีกเยอะเลยล่ะ เอาเฉพาะคำสั่งของบีจีก็มีประมาณนี้
(เอามาจาก http://www.w3schools.com/ แปลไทยโดยเราเอง)

Property Description Values
background-attachment เซตว่าจะให้รูปอยู่กับที่ หรือเลื่อนขึ้นลงได้ scroll
fixed
background-color เซตสีพื้นหลัง (จะแสดงก็ต่อเมื่อไม่มีการเซตรูปบีจีเอาไว้ หรือมีการเซตใหรูปแสดงไม่เต็มหน้า โดยจะไปเติมสีส่วนที่รูปไม่คลุมอยู่) โค้ดสี
transparent
background-image Url ของรูปที่จะแสดงเป็นพื้นหลัง หรือ ไม่แสดงรูปเลย (none) url(URL)
none
background-position เซ็ตตำแหน่งของบีจี เช่น bottom right ก็คือรูปจะถูกจัดอยู่มุมล่างขวาของหน้า top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
background-repeat กรณีที่ภาพเล็กกว่าหน้าจอผู้ใช้ เซ็ตว่าจะให้วนภาพซ้ำไปมาจนเต็มหน้าจอรึเปล่า เช่น repeat-x คือให้วนซ้ำแค่ในแกน x เท่านั้น repeat
repeat-x
repeat-y
no-repeat

ลองเอาไปเล่นดูละกัน โดยให้ใส่เครื่องหมาย ":" คั่นระหว่าง Property กับ Values และให้ใส่เครื่องหมาย ";" คั่นระหว่างคำสั่ง (หลัง Values) ถ้างงว่าใส่ยังไงก็ดูที่ตัวอย่างเอาน้า มีอะไรสงสัยหรือลองใส่โค๊ดแล้วไม่ได้ ก็แปะไว้ในเมนท์น่อ เราจะมาดูให้

ตัวอย่าง นี่คือโค้ดที่เราใช้กับหน้านี้

<style type="text/css">
body{
background-color:#ffffe2; เซ็ตสีให้เป็น #ffffe2
background-image: url(http://image.dek-d.com/4/728230/5871982jpg.); รูปที่ใช้ทำบีจี
background-attachment:fixed; ไม่ให้เลื่อน
background-position:bottom right; จุดเริ่มต้นของภาพจะเริ่มที่มุมขวาล่าง
background-repeat:no-repeat; ไม่ให้วนภาพซ้ำ
}
td {background:none;} ไม่ให้ช่องตารางมีรูป (หรือก็คือ ทำให้มันใสนั่นเอง)
</style>

อยากรู้ความแตกต่าง ให้ลองเปลี่ยนขนาดหน้าจอดูค่ะ ถ้าหน้าจอใหญ่กว่าภาพนี้อาจเห็นมันขาดๆ ไปบ้างแต่เราขี้เกียจทำอ่ะ ตั้งใจให้ใช้เป็นกรณีศึกษาเฉยๆ ^^

ประเภทของบีจี

เราขอแบ่งออกเป็น 2 แบบแล้วกันก็คือ
- แบบที่เอาภาพเล็กๆ มาต่อกัน
- แบบที่เป็นภาพใหญ่ภาพเดียว

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

สำหรับการแก้ปัญหาภาพวนซ้ำนั้นอาจใช้แท็ก background-repeat:no-repeat; แก้ได้ค่ะ แต่ก็จะเห็นสีพื้นหลังของเว็บในส่วนที่บีจีคลุมไม่หมดกลับมาเป็นของตอบแทน ^^

 

วิธีเลือกภาพ

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

บีจีห้ามกลืนตัวหนังสือเด็ดขาด

เพราะอะไรน่ะรึ ก็เพราะมันมองไม่เห็นน่ะเซ่ เวลาเจอบีจีแบบนี้แล้ว 90 % จะทำให้คนอ่านเริ่มหมดความตั้งใจจะอ่าน (รวมทั้งเราด้วย) การเลือกบีจีไม่ควรเลือกที่มีลวดลายมากเกินไป เพราะจะทำให้ลายตา หากอยากได้ภาพนั้นจริงๆ อาจใช้วิธีทำให้ภาพจางลง (เช่นในนิยายเรา...แอบโฆษณา อิอิ)  ซึ่งการทำให้ภาพจางลงนั้นนอกจากจะได้ภาพที่ตั้งใจจะใช้แล้ว ยังไม่เป็นการรบกวนสายตาผู้อ่านมากจนเกินไปด้วย เป็นเทคนิคส่วนตัวค่ะ (แม้จะมีคนอื่นใช้อยู่ก็ตาม...หรอ)

 

คราวหน้าเราจะมาดูวิธีตกแต่งรูปไว้ทำบีจีกันนะ

ปล. ถ้าอ่านแล้วว่าดี ช่วยเมนท์ให้หน่อยนะคะ ช่วยเป็นกำลังใจและเชื้อไฟให้เราหน่อย
ให้กำลังใจนักเขียน
นักเขียนได้รับกำลังใจแล้ว!
นักเขียนได้รับกำลังใจแล้ว 6 ครั้ง

522 ความคิดเห็น

  1. #493 spstkrm (@tkm-bb) (จากตอนที่ 13)
    วันที่ 9 พฤษภาคม 2556 / 16:09
    ขอบคุณมากนะค่ะ เป็นประโยชน์มากจริงๆ
    #493
    0
  2. #469 Na-do-i-Ko (@tookkadui) (จากตอนที่ 13)
    วันที่ 23 กันยายน 2554 / 14:57
     ขอบคุณค่ะจะลองทำดูค่ะ ว่าแต่ยากไปสำหรับเราไหมน้าาา^^
    #469
    0
  3. #465 leah_lovelove (@phantom7) (จากตอนที่ 13)
    วันที่ 1 เมษายน 2554 / 13:44
    ขอบคุณค่า 
    #465
    0
  4. #462 Jammymizz (@jammymizz) (จากตอนที่ 13)
    วันที่ 28 กุมภาพันธ์ 2554 / 20:48
    ขอบคุณมากคะ
    #462
    0
  5. #437 Spiderboy (@Josh) (จากตอนที่ 13)
    วันที่ 1 มกราคม 2553 / 13:52
    ดีครับคือว่าใส่โค้ดนี้ลงไปที่นิยายของผมแล้ว

    <style type="text/css">
    body{
    background-color:#000000;
        background-image: url(http://www.chirr.com/wbb/taylor.swift.love.story.720.jpg);
        background-attachment: fixed;
        background-position:center;
        background-repeat:no-repeat;
    }
    td{
    background:none;
    }
    </style>

    แต่ตรงที่อยากให้มันใสน่ะมีแต่ครึ่งเดียวของหน้าทำไงดีช่วยหน่อยสิครับ
    ครึ่งแรกของหน้าพื้นหลังไม่ใสแต่ครึ่งหลังมันใส งงเลยเรา ช่วยหน่อยนะครับผม

    http://writer.dek-d.com/Josh/writer/view.php?id=424571
    #437
    0
  6. #429 FONFIX (@dekdenaka) (จากตอนที่ 13)
    วันที่ 13 ตุลาคม 2552 / 15:39

    ขอบคุณมกน๊ะค๊ะ ได้ความรู้เย๊อะเลย ^^

    #429
    0
  7. #421 -=อุณหภูมิสูง=- (@temperater) (จากตอนที่ 13)
    วันที่ 12 กันยายน 2552 / 18:04
    ขอบคุณนะคะ 
    ได้ความรู้เยอะเลยจากบทความนี้ :)))))

    #421
    0
  8. #404 pe_pe (@zombiepe) (จากตอนที่ 13)
    วันที่ 29 มิถุนายน 2552 / 15:17
    ว้าว

    ขอบคุณค่า

    มีรายละเอียดเยอะแยะเลย
    #404
    0
  9. #378 //วุ้นเส้น// (@somsri12) (จากตอนที่ 13)
    วันที่ 27 มีนาคม 2552 / 13:26

    เป็นบทความที่มีประโยชน์มากๆ  ขอแอ๊ดไว้เลยนะคะ

    #378
    0
  10. #377 Suju-teukki^^ (@jj-dbsk) (จากตอนที่ 13)
    วันที่ 20 มีนาคม 2552 / 10:04
    ขอบคุณค่ะ
    #377
    0
  11. #376 5555555555 (จากตอนที่ 13)
    วันที่ 16 มีนาคม 2552 / 03:26
    หาตั้งนานแน่ะ
    #376
    0
  12. #375 vippingcream (@shinhyunjae) (จากตอนที่ 13)
    วันที่ 13 มีนาคม 2552 / 20:59
    อ้า...หาวิธีลงตั้งนาน ทำได้แล้ว สอนละเอียดดี ขอบคุณมากๆนะคะ ^^
    #375
    0
  13. #372 U Kiii (@Pigging) (จากตอนที่ 13)
    วันที่ 12 มีนาคม 2552 / 02:46
    ละเอียดมากค่ะ
    สุดยอด
    #372
    0
  14. #371 ปริยะ (จากตอนที่ 13)
    วันที่ 23 กุมภาพันธ์ 2552 / 22:53
    ทำดีแล้ว ดีค่ะ
    #371
    0