ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    How to ตกแต่งนิยาย / ไอดี

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

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

     

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

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

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×