Bloggang.com : dont wanna no - เก็บภาพใส่ในกล่อง

เก็บภาพใส่ในกล่อง

ตกแต่งกล่อง comment: background

วันนี้ว่าด้วยการตกแต่งกล่อง comment ที่อยู่ข้างล่างด้วยภาพพื้นหลังครับ

เก็บภาพใส่กล่อง

เนื่องจากว่ามันเป็น script มาแล้ว ก็ขออธิบายตาม script ไปนะครับ script ที่นำมาเล่านี่ มาจากไหนไม่แน่ใจนะครับเพราะว่าส่ง ๆ ต่อ ๆ กันมา หาต้นตอไม่เจอแล้ว ยังไงถ้าหากเจ้าของเข้ามาเจอก็ขอให้แจ้งด้วยครับ เผื่อจะได้ลบทิ้งหรือว่าให้แจ้งจะได้ปฏิบัติตัวถูกนะครับ

คำสั่งที่ใช้เป็น CSS อีกแล้วครับ โดยการดัดแปลงช่อง text area หรือช่องที่เราจะให้คนพิมพ์ข้อความ ของ Form ซึ่งเป็นลักษณะหนึ่งของการประยุกต์ใช้ html เหมือนตาราง (table) นั่นล่ะครับ คำสั่งที่จะใช้ก็คือ

มาดูทีละบรรทัดนะครับ

มาดูความหมาย และส่วนที่แก้ไขได้ - (ส่วนที่เป็นสีแดงน่ะ) - กันครับ ที่นี้เราก็สามารถจะปรับปรุงได้ตามใจชอบแล้วครับ

Text area และ Input

textarea เป็นการกำหนดส่วนของกล่องที่จะพิมพ์ความเห็นครับ textarea นี้เป็นส่วนหนึ่งของคำสั่งในเรื่องของ Form หรือ แบบฟอร์ม เหมือนที่เรากรอกเวลาลงทะเบียนทางอินเตอร์เนตน่ะครับ
input เป็นส่วนของคำสั่งที่เราระบุเป็นข้อความสั้น ๆ เช่น ชื่อผู้พิมพ์ ชื่อ log in ระบุ password เป็นต้น ก็เป็นส่วนหนึ่งของ Form เช่นกันครับ ในที่นี้ bloggang ใช้เป็นช่อง - ชื่อ - น่ะครับ

ขนาดของกล่องข้อความ
ปกติก็เลือกขนาดพอดี ๆ กับภาพครับ หากไม่กำหนดเลย ก็จะได้ขนาด default เท่ากับที่ทาง bloggang กำหนดมา คือ กล่องขนาด 320 x 164 pixels รวม scroll bar ข้าง ๆ (ขนาด 18 x 164 pixels ครับ ปกติก็ระบุตามขนาดภาพเรา + ความกว้างของ scroll bar นะครับ

ภาพในกล่องข้อความ
ก็ แทรกภาพธรรมดานี่ล่ะ

background-position : กำหนดตำแหน่งของภาพสัมพัทธ์กับกล่องข้อความนะครับ ค่า default คือ top left อื่น ๆ ก็ตามตำแหน่งล่ะครับ เช่น top left, top right, bottom left, bottom right, right middle, top อะไรแบบนี้ครับ แต่ว่า คำสั่งเหล่านี้ จะไม่มีประโยชน์เมื่อสั่งให้ภาพเล็ก และสั่ง no-repeat ครับ (คล้าย ๆ เรื่อง การเปลี่ยนพื้นหลังของ bloggang น่ะครับ
background-attachment : ก็ระบุ fixed จะให้ภาพนั้นมีตำแหน่งติดที่เดิม ไม่เลื่อน เวลาพิมพ์ยาว ๆ แล้ว ก็ไม่ทำให้ภาพเลื่อนจนเห็นภาพเป็น tile น่ะครับ ถ้าไม่อยากให้ภาพเลื่อนไปมา ก็เอาออกทั้งคำสั่ง background-attachment: fixed; ออกทั้งยวงเลยครับ เอาออกให้ครบนะครับ มี ; ข้างหลังด้วย ลองดูกล่องความเห็นข้างล่างน่ะครับ ลองพิมพ์ยาว ๆ หรือกด enter หลาย ๆ ที แล้วดูผลนะครับ ส่วนแบบ fixed เป็นแบบที่หน้าสมุดเยี่ยมครับ ลองกด enter ยาว ๆ ดูนะครับ
background-color: ระบุสีพื้นหลังของกล่องข้อความครับ ถ้าเรากำหนดเป็น transparent และขนาดของภาพเล็ก เราก็จะเป็นสีของพื้นหลังของหน้า blog น่ะครับ แต่ถ้าหากใส่สี เวลาภาพเล็ก ก็จะเห็นสีที่เราต้องการครับ

ตัวหนังสือในกล่องข้อความ
ทั้งตัวหนังสือที่อยู่ในกล่องข้อความ และในช่องชื่อเจ้าของความเห็น จะมี tags คำสั่ง และ attributes แยะ สำหรับตัวคำสั่งแรกที่จะระบุตามหลัง font ก็ให้ใส่ hyphen แล้วระบุ tags ที่ต้องการต่อไปเลย เช่น font-size หรือ font-face เป็นต้น แต่ว่าเฉพาะตัวแรกนะครับ ตัวอื่น ๆ ก็ไม่ต้องแล้ว

size: ระบุขนาดของตัวอักษร งวดนี้ หน่วยจะเป็น pt หรือ point น่ะครับ ก็ลอง ๆ ดูเอาว่าขนาดเท่าไหร่จะชอบ
color: ก็ระบุสีไปครับ
face: ก็ระบุเป็นชื่อของ font เช่น tahoma, san-serif อะไรแบบนี้ แต่ว่า ไม่ค่อยมีประโยชน์หรอครับ เพราะว่า พอพิมพ์และ enter ไปแล้วมันก็จะกลายเป็น font แบบที่เรากำหนดไว้ทั้ง blog ไปเองครับ

สีพื้นหลังของกล่องข้อความ
ก็เลือกสีที่ต้องการลงไปได้เลยครับ ดู สีที่ใช้ใน web ได้เลยครับ ถ้าภาพเราใหญ่เต็มช่อง ก็จะมองไม่เห็น แต่ถ้าภาพเล็ก ก็จะเห็นเป็นสีครับ แต่ถ้าระบุเป็น transparent เราก็จะมองทะลุไปเห็น background ของ blog ได้ เช่น ถ้าพื้นหลังของทั้ง blog เป็นสีเขียว เราระบุให้ใส ก็จะเห็นพื้นหลังในส่วนที่พ้นจากภาพเป็นสีเขียว อะไรแบบนี้แหละครับ

ตำแหน่งที่จะใส่ code
ช่องที่เราจะเอา tag คำสั่งยาว ๆ นี้ไปใส่

ช่อง profile หรือช่อง slogan ของ blog : ลงแค่ช่องใดช่องหนึ่งพอนะครับ ผลที่ได้ ก็คือทุก blog จะมีกล่องความเห็นเหมือนกันหมดครับ
ในส่วนของแต่ละ blog : คือใส่เข้าไปเวลาเราเปิดหน้าใหม่ แล้วระบุ code นี้ลงไป ผลที่ได้ ก็จะได้กล่องความเห็นเฉพาะใน blog ที่เราลง code ไว้เท่านั้นครับ เหมาะกับคนที่ชอบเปลี่ยนแบบ เปลี่ยน background เปลี่ยนสีทุก ๆ หน้านะครับ

คำเตือน

คำสั่งนี้ ผมไม่ได้คิด เอามาจากของชาวบ้านคร๊าบบ เพราะฉะนั้น ถ้ามีผลดีประการใด ผมขอน้อมรับคนเดียว แต่ถ้ามีข้อผิดพลาดของคำสั่ง ก็ต้องบอกเจ้าของ code นะครับ... เอ๊ะ อ่านแล้ว งง ๆ แฮะ...สงสัยจะกลับกัน เอิ๊กส์
เวลา copy code ขอให้อยู่ในบรรทัดเดียวกันนะครับ ห้ามเว้นบรรทัด
ภาพที่เอามา กับสีของตัวหนังสืออย่าลืมให้มันคนละสีกัน และตัดกันหน่อยนะครับ เดี๋ยวจะพิมพ์เป็นหมึกล่องหนซะ คนมาลงความเห็นจะนึกว่า ผีเจ้าของ blog หลอก
ขนาดของตัวหนังสือที่กำหนดในช่องความเห็นนี้ จะเห็นผลเฉพาะตอนที่พิมพ์ตอบอยู่ พอกดแล้ว ก็จะกลายเป็นความเห็นในหน้า blog ที่มีขนาดตัวหนังสือ และสีเหมือนกันกับที่เรากำหนดไว้ใน blog ล่ะครับ
ดังนั้น เรื่อง font ทั้งขนาด สี และชนิด หน้าตานี่ไม่ต้องกังวลมากครับ
สำหรับตัวหนังสือที่ระบุในช่อง inset นั้น จะเป็นแค่ช่องชื่อ และพอส่งความเห็นแล้ว ก็จะกลายเป็นตัวเล็ก ๆ เหมือนกันหมด เพราะฉะนั้น ไม่ต้องกังวลเช่นกันครับ ผมก็เลยไม่ได้ลงไว้ในตัวอย่าง แต่ถ้าเริ่มพลังยุทธแก่กล้าจะใส่เองก็ทำได้เลยครับ
ภาพ ถ้าหากว่าโป๊ ไม่ควรมาลงใน blog ควรจะส่งมาให้ผม sensor ให้ก่อนครับ เอิ๊กส์...
เช่นเคยครับ ถ้าภาพใหญ่ ก็จะใช้เวลา load นาน เหมือนเดิมครับ เวลาในการเปิดหน้าจะนานขึ้น
สำหรับเครื่องหมาย ".." หรือ quotation นั้น จะไม่ใส่ก็ได้ แต่ถ้าหากมีเครื่องหมายบางอย่าง อาจจะทำให้แปลผลผิดได้ เพราะฉะนั้น ควรจะมีทุก ๆ ครั้งที่ กำหนดค่า อะไรก็ตาม แต่กรณีที่รู้ว่าไม่มีเครื่องหมายผิดปกติแน่ ๆ เช่น code สี, ตัวเลข ไม่ต้องใส่ก็งงน้อยลงดีน่ะครับ
ไม่รู้จะใส่อะไรแล้ว งงหรือยังล่ะครับเนี่ย.....

ออ อย่าลืมลองเลื่อน ๆ ดูที่กล่องความเห็นนะครับ...

[ถามมาก็ตอบไป] [สมุดเยี่ยม]

Create Date : 30 กรกฎาคม 2548
Last Update : 3 ธันวาคม 2549 0:01:54 น.
Counter : 784 Pageviews.

24 comments

	วิ่งเพื่อน้อง รักผืนป่าห้วยขาแข้ง อ.บ้านไร่ จ.อุทัยธานี สองแผ่นดิน (11 ม.ค. 2564 23:39:08 น.)		พิพิธภัณฑ์ท้องถิ่นวัดหนองขุนชาติ อ.หนองฉาง จ.อุทัยธานี สองแผ่นดิน (2 ม.ค. 2564 21:16:12 น.)
	Food For Fun : Hot Work Misson #55 อาหารผู้สูงอายุ คนผ่านทางมาเจอ (11 ม.ค. 2564 18:46:09 น.)		10 มค 64 นางพญาเสือโคร่ง - Wild Himalayan Cherry mcayenne94 (10 ม.ค. 2564 21:47:42 น.)