วิธีการใส่รูปให้กล่องคอมเมนต์

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

วิธีการใส่รูป

• หากต้องการให้แสดงกล่องคอมเมนต์เหมือนกันทุกๆ บล็อก ให้ copy Css Style Sheet อันนี้ ไปไว้ที่ช่องจัดการ Script area ได้เลยค่ะ


• แต่ถ้าต้องการให้แต่ละบล็อกแสดงกล่องไม่ซ้ำกันล่ะก็ ให้ copy Css Style Sheet นี้ไปไว้ที่ช่องที่เราเขียนบล็อกนั่นแหละค่ะ เปลี่ยนรูปแบบ เปลี่ยนรูปภาพ ได้ตามใจฉันเลยค่ะ

อธิบายโค้ด

• ที่ตัวหนังสือสีแดง no-repeat คือการกำหนดการแสดงผลของรูปค่ะ สามารถเปลี่ยนค่าได้ดังนี้
  
  
  
  • no-repeat : กำหนดให้แสดงภาพเพียงครั้งเดียว ไม่แสดงซ้ำ
  
  
  • repeat : กำหนดให้แสดงภาพซ้ำจนเต็มกรอบ
  
  
  • repeat-x : กำหนดให้แสดงซ้ำในแนวนอน
  
  
  • repeat-y : กำหนดให้แสดงซ้ำในแนวตั้ง
  
  


• เอ๊า! แล้วมันมีประโยชน์ยังไงล่ะ ก็ภาพคอมเมนต์เค้าก็ทำไว้ให้พอดีๆ กล่องอยู่แล้วนิ?


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


• ต่อมา ก็มาที่ตัวหนังสือสีเหลือง right top คือ position หรือตำแหน่งของรูปภาพ อาจจะกำหนดหรือไม่กำหนดก็ได้ ซึ่งปกติ หากไม่ได้กำหนด จะแสดงรูปภาพที่ตรงกลาง แต่ถ้าเราอยากจะกำหนดตำแหน่งรูปภาพใหม่ ก็แก้ไขค่าตรงนี้ได้ค่ะ จากตัวอย่าง right top คือการกำหนดให้แสดงรูปบริเวณด้านบนขวาของรูป
  
  การกำหนดตำแหน่งภาพ
  
  • กำหนดโดยระบุตำแหน่งเพียงค่าเดียว เช่น top, bottom, left, right, center
  
  
  • กำหนดโดยระบุตำแหน่งสองค่า เช่น top left, bottom left, top right, bottom right
  
  
  • กำหนดโดยระบุตำแหน่งเป็นเปอร์เซนต์ เช่น 80% 60%
  
  
  • กำหนดโดยระบุตำแหน่งเป็น px เช่น 25px 200px
  
  


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


• มาที่ตัวอักษรสีเขียวกันค่ะ ตรงนี้ให้ใส่โค้ดสีที่เราอยากได้ลงไป จากโค้ดด้านบนจะมะ 3 แห่งใช่ไหมคะ อันแรก อยู่กับ background หมายถึง เราต้องการให้สีเป็นพื้นหลัง ดูตัวอย่างที่คอมเมนต์ด้านล่างค่ะ จะใช้พื้น BG เป็นสีฟ้า และประดับ icon เล็กๆ ในตำแหน่งที่ชอบ แต่ถ้าหากว่าเรากำหนดให้ภาพในกรอบคอมเมนต์เป็นภาพขนาดใหญ่อยู่แล้วสีของ BG ก็จะถูกทับด้วยภาพของพื้นหลัง การกำหนดสีพื้นหลังควรกำหนดให้สีตัดกับสีอักษร เพื่อที่เราจะได้อ่านตัวอักษรได้ง่ายด้วยค่ะ
  
  
  
  • การกำหนดสี กำหนดได้ทั้งแบบระบุสีโดยตรง เช่น red, green, yellow, orange red ….. แต่การกำหนดสีแบบนี้อาจแสดงผลต่างกันในบราวเซอร์ที่ต่างกันค่ะ
  
  
  • กำหนดโดยระบุตำแหน่ง rgb เช่น(255,255,255) ซึ่งจะให้สีขาว
  
  
  • กำหนดโดยระบุเป็นเลขฐานสิบหก ซึ่งเป็นที่นิยม และมีสีให้เลือกมากมายค่ะ เช่น #000000
  
  


• ต่อมาเป็น ตัวอักษรสีเหลืองส้มค่ะ dotted อยู่ในแท็ก border ซึ่งก็คือเส้นขอบนั่นเองค่ะ ซึ่งเส้นขอบนี้ จะกำหนดหรือไม่กำหนดก็ได้ค่ะ สามารถเปลี่ยนขนาด สี และรูปแบบได้ เราพอรู้เรื่องสีบ้างแล้ว มารู้จักรูปแบบของ border กันค่ะ ซึ่งเราสามารถเปลี่ยนรูปแบบได้หลายอย่าง ดังนี้ค่ะ




• dotted


• dashed


• solid


• double


• groove


• inset


• outset


• none สำหรับกำหนดให้ไม่มีเส้นขอบค่ะ





• สำหรับตัวอักษรสีฟ้า ก็ง่ายที่สุดเลยค่ะ เติมค่าเป็นตัวเลขลงไป ซึ่งหน่วยที่ใช้ในที่นี้ก็คือ px ค่ะ




• ตรง border:2px ก็คือความหนาของเส้นขอบค่ะ ตัวเลขมาก เส้นก็หนาขึ้น


• ตรง width คือความกว้างของกรอบคอมเมนต์


• ตรง height คือความสูงของกรอบคอมเมนต์


• และ font-size คือขนาดตัวอักษรเวลาที่เราเขียนคอมเมนต์ค่ะ




• อันสุดท้ายแล้วค่ะ ตัวอักษรสีชมพู สำหรับทำภาพเป็นแบบโปร่งใสค่ะ(ถ้าไม่อยากให้ภาพโปร่งใส ก็ลบโค้ดตรงสีชมพูนี้ออกไปเลยค่ะ ^w ^) ปรับเปลี่ยนค่าตรงตัวเลข เช่น 80 หมายถึง 80% = 0.8 ค่ะ ค่าเท่ากัน แต่มีโค้ดหลายอัน เพราะแต่ละบราวเซอร์นั้นใช้โค้ดต่างกัน หากต้องการให้โปร่งใสนิดหน่อย ก็ใส่ค่าใกล้ 100 หรือ 1 ไว้ ถ้าอยากให้โปร่งใสมากก็ใส่ค่าน้อยๆ ไว้ค่ะ เช่น 0.2--> ภาพจะจางมาก 0.8--> ภาพจะจางลงนิดหน่อย


• สุดท้ายหวังว่าคงพอเข้าใจ และนำไปใช้ประโยชน์ได้บ้างนะคะ