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

                                 จะแก้ไขปัญหานี้ได้อย่างไร...

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

มาดูวิธีใส่โค้ดกันเถอะ     เริ่มจาก
1) ไปที่แผงควบคุม > กดแก้ไข ที่บล็อกที่ต้องการ
2) ที่ช่อง CSS ให้ใส่ code ด้านล่างนี้ลงไป แล้วกดบันทึกเก็บค่ะ

คำว่า "BLOG" เป็นตัวอย่างให้เห็นนะคะว่าขนาดแตกต่างกันจะต้องใช้โค้ดที่ต่างกันในส่วนของ front sizeค่ะ


ขออธิบายตัวโค้ดนะคะ
div#title{padding: 10px 4px 35px;
font-size: big; color:#9b2542; 
background:#9b2542;

font-size: big; คือ ขนาดของตัวอักษรค่ะ ซึ่งสามารถแก้ไขได้หลายรูปแบบในที่นี้ จะขอยกตัวอย่างที่นิยมใช้กันนะคะ ได้แก่
font-size: big;
font-size: medium;
font-size: small;

color:#9b2542; คือ สีของภาพที่เราจะใช้เป็นพื้นหลังค่ะ ในที่นี้เป็นสีแดง ก็ใช้รหัสสีนี้ค่ะ(ถ้าหากใครยังงงเรื่องรหัสสีนะคะ ดิฉันจะแนะนำในครั้งต่อไปค่ะ) ที่ใช้รหัสสีเนื่องจากว่า เราจะได้ให้สีของ "ชื่อบล็อก"กลมกลืนไปกับสีของพื้นหลังที่เราจะใช้เป็น"หัวบล็อก"ค่ะ

background:#9b2542; คือ สีของพื้นหลัง อาจจะให้เหมือนกันกับสีของรูปภาพที่เป็นหัวบล็อกก็จะดูกลมกลืนค่ะ

ป.ล.

1)ถ้าเราต้องการ "ชื่อบล็อก" ขนาดใหญ่ เราก็ไม่ต้องเปลี่ยนหรือแก้ไขอะไรเลยค่ะ เพราะว่า ค่าเริ่มต้นที่กำหนดไว้ก็กำหนดให้ font size เป็นขนาดใหญ่อยู่แล้วค่ะ
2)บางครั้งเราต้องการใส่ ภาพในส่วนของ"หัวบล็อก"เราก็จะมีโค้ดที่เป็น div#title อยู่แล้วเราก็แค่เพิ่มเติมโค้ดส่วนที่เหลือลงไปอีกบรรทัดหนึ่งก็ได้แล้วค่ะ อย่าใส่ div#title ซ้ำกับโค้ดที่มีอยู่แล้วนะคะ จะไม่ได้ผลตามนี้ค่ะ
หลายคนคงจะงง มาลองดูตัวอย่างกันดีกว่าค่ะ ดังนี้ค่ะ

โค้ดที่มีอยู่เดิมนะคะ
div#title{padding: 10px 4px 35px;
background:#9b2542;       
background-image:url("/file/jantana811/banner1.gif");    
background-repeat:no-repeat;  
background-position:center center;  
height:35px;}

เราสามารถแก้ไขได้โดยเพิ่มโค้ดที่อธิบายเข้าไปได้ ดังนี้ค่ะ
div#title{padding: 10px 4px 35px;
font-size: big; color:#e2c7c5;      
background:#9b2542;  
background-image:url("/file/jantana811/banner1.gif");    
background-repeat:no-repeat;  
background-position:center center;  
height:35px;}
div#title span {display:none;}

เป็นอันเสร็จสมบูรณ์ค่ะ ลองเอาไปทำดูกันนะคะ แล้วมาโชว์ให้ดูด้วยนะคะว่าได้ผลเป็นอย่างไรกันบ้าง