เก็บภาพใส่ในกล่อง ตกแต่งกล่อง 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 24 comments Last Update : 3 ธันวาคม 2549 0:01:54 น. Counter : 1123 Pageviews. Share Tweet

ว้าว.... ดีครับ.... มีสาระอีกละ.. จาได้ปรับปนรุงหน้าบล็อกของตัวเองใหม่ซะที... ขอบคุณคร้าบ...   โดย: star_hunt 30 กรกฎาคม 2548 0:14:08 น.

ขอบคุณมากค่ะ   โดย: iampum 30 กรกฎาคม 2548 0:25:29 น.

อูวว มากันเร็วจนน่าตกใจเลยครับ!! ขอบคุณครับที่มาเยี่ยม   โดย: dont wanna no 30 กรกฎาคม 2548 0:31:20 น.

แวะมาเยี่ยมค่ะ อืมมม มีสาระจัง ดูของตัวเองแล้ว รู้สึกโหวงๆเลย แหะ แล้วจะมาเยี่ยมบ่อยๆค่ะ   โดย: youkay (youkay ) 30 กรกฎาคม 2548 0:35:56 น.

ดีจังค่ะ น่ารักจังเลย   โดย: พลอยสีรุ้ง 30 กรกฎาคม 2548 0:42:22 น.

ขอบคุณก๊าบ.... ที่เว็บของ ตุ๊กตา....... ดูดีมีสกุลก็เพราะว่า....มาหาความรู้จากที่ Blog คุณ dont wanna no นี่แหละค๊า....... ขอบคุณมากนะคะ......   โดย: tukata001 30 กรกฎาคม 2548 1:03:49 น.

ชมกันอีกครับ ชมอีก 5 5 5   โดย: dont wanna no 30 กรกฎาคม 2548 1:05:39 น.

โดย: แม่สาย 30 กรกฎาคม 2548 1:35:49 น.

ขอบคุณคะ   โดย: โอน่าจอมซ่าส์ 30 กรกฎาคม 2548 1:39:38 น.

ขอบคุณคะ   โดย: zaesun 30 กรกฎาคม 2548 1:45:12 น.

เออ....   โดย: Angel Tanya 30 กรกฎาคม 2548 2:42:16 น.

ขอบคุณมากๆ เลยค่ะ อธิบายเห็นภาพชัดเจนเลยค่ะ   โดย: JewNid 30 กรกฎาคม 2548 3:55:19 น.

รับสาระตอนพระอาทิตย์กำลังจะขึ้นครับ   โดย: Mint@da{-"-} 30 กรกฎาคม 2548 4:07:54 น.

โดย: FaCtOrY cHeeSeCaKe 30 กรกฎาคม 2548 7:21:11 น.

ขอบคุณคะ   โดย: beautyswan 30 กรกฎาคม 2548 11:02:59 น.

รับ รับ รับความรู้มาเต็มๆ ขอบคุณคะ   โดย: asariss 30 กรกฎาคม 2548 13:24:10 น.

ไม่ได้มาเยี่ยมค่ะ มานั่งเรียน..   โดย: ป้ามด 30 กรกฎาคม 2548 13:47:58 น.

มาเก็บ ทริค ไปไว้เก็บภาพครับ... หวัดดีคร้าบบ...   โดย: กุมภีน 30 กรกฎาคม 2548 16:00:21 น.

ขอบคุณค๊า สบายดีมั้ยคะ   โดย: yadegari 30 กรกฎาคม 2548 16:54:01 น.

พึ่งหัดสร้าง BLog ยังงง..งง อยู่ค่ะ ถ้าติดขัดตรงไหน ต้องขอรบกวนด้วยนะค่ะ   โดย: MoNa (mona_t ) 31 กรกฎาคม 2548 0:03:43 น.

โดย: noom_no1 31 กรกฎาคม 2548 0:21:46 น.

สบายดีครับ ขอบคุณที่แวะมา ถ้าอยากถามอะไรก็ไปถามได้เลยครับ ตอบได้จะตอบให้   โดย: dont wanna no 31 กรกฎาคม 2548 1:59:09 น.

เดี๋ยวจะตามไปอ่านเรื่องท่องเทียว ของคุณ dont นะคะ ขอบคุณที่สอนทำBlog จ๋วย ๆ ด้วยค๊า.........   โดย: tukata001 4 สิงหาคม 2548 0:30:12 น.

Thanks.   โดย: Tante Ta (Tante Ta ) 4 มีนาคม 2549 23:51:33 น.