การเขียนบล็อก IV - เปลี่ยนสีตัวหนังสือและเปลี่ยนสีลิ้ง


บล็อกนี้เว้นช่วงห่างจากบล็อกที่แล้วซะหลายวันเลย ก็เนื่องจากมัวแต่ไปทำเว็บไซต์อีกแห่งหนึ่ง

ตอนนี้เรามาต่อกันด้วยเรื่องการเปลี่ยนสีตัวหนังสือ การเปลี่ยนแบบอักษรและการเปลี่ยนสีลิ้งนะค่ะ
ในการเปลี่ยนสีตัวหนังสือในบล็อกนั้น จะแยกออกเป็น 2 แบบ คือ

1. การเปลี่ยนสีตัวหนังสือตามปกติ ซึ่งมักจะใช้ในเวลาเขียนบล็อกบล็อกใหม่ ซึ่งโค้ดที่ใช้ก็คือ


<font color=สีตัวหนังสือ>ข้อความที่ต้องการ</font>


ตัวอย่าง

<font color=red>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<font color=blue>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<font color=green>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

หรือเราอาจจะใช้โค้ดสีที่เป็นตัวเลขแทนเช่น

<font color=#0000cc>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<font color=#ffffcc>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ

<font color=#00cc99>ข้อความที่ต้องการ</font>---แสดงผลออกมาเป็น--->ข้อความที่ต้องการ


2. การเปลี่ยนสีตัวหนังสือในแบบที่ 2 จะเป็นการเปลี่ยนสีตัวหนังสือทั้งหน้าเว็บพร้อมทั้งเปลี่ยน font ด้วยคะ ใช้โค้ดนี้ค่ะ


<style>body, ul, li, p{font: normal , รูปแบบของฟอนต์;font-size: ขนาดของตัวหนังสือpt;color: #สีตัวหนังสือ;} </style>



มาอธิบายตรงโค้ดสีแดงที่ละส่วนนะค่ะ

รูปแบบของฟอนต์ เป็นรูปแบบของฟอนต์ที่ใช้ในบล็อก อยากรู้ว่าเราใช้ฟอนต์อะไรได้ ก็ดูในเครื่องของเราค่ะ ว่ามีฟอนต์อะไรบ้าง

หมายเหตุ--*ในการที่เราใช้ฟอนต์แปลกๆ คนที่เข้าชมเว็บเราจะต้องมีฟอนต์นั้นด้วยนะค่ะ ถึงจะมองเห็นฟอนต์ที่เราใช้อยู่ได้ ถ้าไม่มีก็จะมองเห็นเป็นรูปแบบปกติหรือบางทีอาจจะแสดงผลเพี้ยนไปเลย เช่น ตัวหนังสือใหญ่เกินไปค่ะ

ขนาดของตัวหนังสือptจะต้องเป็น pt นะค่ะ เช่น 12pt, 14 pt

สีตัวหนังสือ เราจะใส่เป็นชื่อสีเลยก็ได้เช่น red, blue, yellow หรือ ถ้าเป็นโค้ดสีก็เช่น #9900cc, #000000, #ffffff


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



<style>A:hover{color:สีเมื่อนำเม้าส์มาวางเหนือลิ้ง;text-decoration: none;position: relative;left: -2px; top: 1;}A:link{color: สีลิ้ง ;text-decoration:none;}A:visited{color: สีของลิ้งที่คลิกแล้ว ;text-decoration:yes;</style>



ให้เพื่อนๆ ดูความหมายของสีในส่วนของ hover visited และ Link ตามตัวหนังสือสีแดงเลยนะค่ะ
ส่วนโค้ดที่เป็นตัวหนังสืแดงอีกอันหนึ่งที่เพื่อนๆ เห็นคือ position: relative;left: -2px โค้ดในส่วนนี้จะเป็นการกำหนดให้ลิ้งของเรายุบลงไปเมื่อเลื่อนเม้าไปวางเหนือลิ้ง ตรงส่วนนี้เพื่อนๆ จะแก้ไขตัวเลขเป็น -1,-2,-3 หรือถ้าไม่อยากจะให้ลิ้งยุบเลยก็กำหนดให้เป็น 0px ก็ได้ค่ะ


หวังว่าคงจะไม่ยากเกินไปนะค่ะ หากเพื่อนๆ ทำแล้วไม่เข้าใจหรือติดปัญหาอย่างไร ก็เม้นทิ้งไว้นะค่ะ




Create Date : 30 มิถุนายน 2552
Last Update : 30 มิถุนายน 2552 11:14:38 น. 27 comments
Counter : 2180 Pageviews.

 
ดีจังเลยคะ

ใจดีจัง เอาโค๊ดมาลงให้ดูด้วย อิอิ

ขอบคุณมากๆนะคะ


โดย: บุปผาลีลาวดี วันที่: 30 มิถุนายน 2552 เวลา:10:08:16 น.  

 
อธิบายดีและเข้าใจมากเลยค่ะ
coffeebake ขออนุญาติ เซฟ บล็อกนี้
ไว้เป็นบุ๊กมาร์คเลยนะจ๊ะ


โดย: CoffeeBake วันที่: 30 มิถุนายน 2552 เวลา:10:29:20 น.  

 
ลืมขอบคุณ 555
ขอบคุณค่ะ


โดย: CoffeeBake วันที่: 30 มิถุนายน 2552 เวลา:10:30:46 น.  

 
สวัสดีวันสีชมพูค่ะ คุณแมว...

เห็นคุณแมวนำเรื่องฟอนต์มาแนะนำ
ป้าเลยอยากจะรบกวนคุณแมวหน่อย...นะคะ

ช่วยดูฟอนต์ที่บล๊อกของป้าให้หน่อย..ค่ะ
เมื่อวานมีเพื่อนบล๊อกบ่นว่าอ่านยากมาก
ฟอนต์ที่เขาเห็นเป็นตัวเอียง ยึกยือ ๆ
ประมาณภาษาต่างดาว....ไปโน่นเลย...

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

งานนี้ต้องรบกวนคุณครูแมวแล้ว...ล่ะค่ะ

ขอบคุณนะคะ


โดย: พรหมญาณี วันที่: 30 มิถุนายน 2552 เวลา:12:19:24 น.  

 
หวัดดีค๊าขอบคุงน๊าที่แวะไปทักทายกัน

และก้อขอบคุงด้วยน๊าที่สอนแต่งบล้อกด้วย

น้ำเข้ามาหาความรุ้ที่นี่บ่อยเหมือนกัน



โดย: numvug วันที่: 30 มิถุนายน 2552 เวลา:12:24:31 น.  

 
ป้าส่งโค๊ดตัวอักษรที่ป้าใช้อยู่ตอนนี้
ให้คุณแมวดูที่หลังไมค์...นะคะ

ตอนแรกป้าเอามาฝากไว้ที่กล่องเม้นท์
เขาไม่อนุญาติ...ก็เลยต้องไปที่หลังไมค์...ค่ะ

ขอบคุณอีกครั้ง..ค่ะ



โดย: พรหมญาณี วันที่: 30 มิถุนายน 2552 เวลา:12:25:45 น.  

 

ปอ..ป้า จ๋า แมวลองไปงมโค้ดในบล็อกปอป้ามาแว้ววว..
<style>body, ul, li, p{font: normal MS Sans Serif,Tahoma;font-size:18pt;color: Darkgreen;}</style>

มีโค้ดฟอนต์ 2 ชื่อ ทดลองเปลี่ยนใหม่ดีมั๊ยค่ะ

<style>body, ul, li, p{font: normal,MS Sans Serif,Tahoma;font-size:18pt;color: Darkgreen;}</style>

ลองเลือกเอาฟ้อนเดียวดีกว่ามั๊ยค่ะระหว่าง MS Sans Serif กับ Tahoma

แต่แมวก็มองเห็นฟ้อนในบล็อกปอป้าปกตินะค่ะ ถ้ายังไม่หายอีก ก็อาจจะเป็นที่ browser ของคนอื่นแล้วละค่ะ ก็ลองแนะนำให้เค้าปรับที่ browser ที่มุมมองเป็น ไทย(TIS-620) หรือไม่ก็เป็น ไทย(Window-874) ค่ะ


โดย: maew_kk วันที่: 30 มิถุนายน 2552 เวลา:12:37:04 น.  

 
สวัสดียามบ่ายคะหม่ำข้าวหรือยังคะ


โดย: kobnon วันที่: 30 มิถุนายน 2552 เวลา:13:10:02 น.  

 
ทั้งหมดใส่ที่ไหนคะ

จริงๆๆแล้วใจไม่กล้าพอจะเปลี่ยน
กลัวปวดหัว
ต้องให้น้องแมวมาแก้ให้อีก


โดย: หนึ่งคิด วันที่: 30 มิถุนายน 2552 เวลา:14:40:30 น.  

 
เปลี่ยนสีตัวหนังสือ - เราใช้วิธีการพิมพ์ & เปลี่ยนสีตัวหนังสือด้วย microsoft WORD / TextEditor ของ bloggang.com ค่ะ

นุ๋ maew_kk อธิบายความแตกต่างสิคะ


โดย: Elbereth วันที่: 30 มิถุนายน 2552 เวลา:15:47:10 น.  

 
ขอบคุณมากมากเลยค่ะ ที่เอาความรู้เรื่องโค้ดมาให้

จะลองทำสีตัวหนังสือ เวลาลิงค์ (แต่ไปทำที่อื่นนะจ๊ะ)

บาย บายค่ะ


โดย: Mermaid AI วันที่: 30 มิถุนายน 2552 เวลา:16:19:44 น.  

 
มาเรียนอีกแล้วค่า


โดย: หน่อย (noi&poj ) วันที่: 30 มิถุนายน 2552 เวลา:17:22:36 น.  

 
อธิบายละเอียดดีจังเลยค่ะ ตอนพี่เริ่มเล่นใหม่ๆ กว่าจะจับต้นชนปลายถูก งองูเจอกันหลายรอบ มีวันนึงลบโค้ดหายเกลี้ยงทั้งหน้า ตอนนี้พอจะเดาออกบ้างแล้วว่าโค้ดแต่ละอย่างหมายถึงอะไร

แล้วลูกศิษย์จะรอติดตามผลงานของคุณครูแมวอีกนะคะ


โดย: แม่ปุ้มปุ้ย วันที่: 30 มิถุนายน 2552 เวลา:19:19:39 น.  

 
หวัดดีค่ะ ขอบคุณนะคะที่แวะไปทักทาย

และขอบคุณ ที่เอาความรู้มาให้ค่ะ


โดย: อยู่ว่างว่าง วันที่: 1 กรกฎาคม 2552 เวลา:5:17:21 น.  

 
แม่นู่แอล หายไปนานเลยค่ะ ยิ่งไม่ทันเขาเรื่อง
บล๊อก ตอนนี้ยิ่งแย่ใหญ่เลย คิดถึงค่ะ เอาไว้จะเข้ามาขโมยไอเดียไปใช้ค่ะ


โดย: NathalieNoelle วันที่: 2 กรกฎาคม 2552 เวลา:19:03:22 น.  

 

 
ขอบคุณค่ะ ถูกใจมือใหม่มากเลยค่ะ



โดย: ชวนชมนะ วันที่: 11 กรกฎาคม 2552 เวลา:9:40:49 น.  

 
แวะมาขอแอดเป็น friend blog ด้วยคนนะคะ
สอนดีจัง บล๊อคก็สวยมากเลยค่ะ


โดย: LeaDGlasS วันที่: 15 กรกฎาคม 2552 เวลา:16:39:08 น.  

 
มีประโยชน์มากเลยค่ะ
ขอบคุณมากนะคะ

(เปลี่ยนได้แล้วเย้)


โดย: culcita วันที่: 25 กรกฎาคม 2552 เวลา:17:20:14 น.  

 
ขอบคุณค่ะ


โดย: Gin-GaL วันที่: 14 กุมภาพันธ์ 2553 เวลา:23:32:59 น.  

 
ขอบคุณครับ

เดวเอาไปแต่งซักหน่อย
แต่รูปแบบผมมันไม่ยอมเปลี่ยนอ่ะครับ


โดย: athee_p วันที่: 27 กุมภาพันธ์ 2553 เวลา:16:24:36 น.  

 
เสาะหาอยู่นายสองนาน โดยเฉพาะสีลิ้งค์
ขอบใจหลายๆ


โดย: peenuy (nuyect ) วันที่: 20 มีนาคม 2553 เวลา:14:14:59 น.  

 
ขอบคุณนะคะสำหรับโค๊ด


โดย: renting วันที่: 22 กรกฎาคม 2553 เวลา:14:29:43 น.  

 
ขอเข้ามาเรียนด้วยคนคะ แต่แอบเก็บบล็อกนี้ไว้ในบุ๊คมาร์คนานแล้ว ขอโทษทีที่ไม่ขอก่อนนะคะ

ยังมีข้อข้องใจมากๆเลยคะ ในส่วนของการเปลี่ยนสีเนี้ย เราจะวางโค้ดต่างๆไว้ส่วนไหนคะ งง มากๆคะ รบกวนด้วยนะคะคุณครู


โดย: ป้าณู วันที่: 15 ตุลาคม 2553 เวลา:3:25:26 น.  

 
ขอขอบคุณในความเอื้อเฟื้อค่ะ เปลี่ยนสีตัวอักษรได้แล้วค่ะ ขอบคุณค่ะ


โดย: dada_aeiou วันที่: 20 พฤษภาคม 2554 เวลา:2:29:28 น.  

 
อธิบายเข้าใจมากค่า


โดย: Ozabew วันที่: 7 มิถุนายน 2554 เวลา:16:30:35 น.  

 
ปายแวะมาขอโค้ดเปลี่ยนสีตัวอักษรทั้งบล็อกอ่ะค่ะ
โค้ดเก่ามันรวนเสียแล้ว ขอบคุณมาก ๆ นะคะ


โดย: คนที่ใช่ ในวันที่ผิด วันที่: 7 ธันวาคม 2554 เวลา:12:38:10 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

ผู้หญิงขี้รำคาญ
Location :


[ดู Profile ทั้งหมด]

ฝากข้อความหลังไมค์
Rss Feed
Smember
ผู้ติดตามบล็อก : 2 คน [?]




Group Blog
 
 
มิถุนายน 2552
 123456
78910111213
14151617181920
21222324252627
282930 
 
30 มิถุนายน 2552
 
All Blogs
 
Friends' blogs
[Add ผู้หญิงขี้รำคาญ's blog to your web]
Links
 

MY VIP Friend

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.