การปรับขนาดของ ชื่อบล็อก

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

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

เรามาลองดูกันเถอะค่ะ ว่าดิฉันจะแก้ไขปัญหาให้ได้อย่างไรกันบ้าง
นี่คือตัวอย่างผลงานของดิฉันค่ะ
เล่นของเล่นใหม่ทั้งวัน ... อันนี้ไม่เห็น"ชื่อบล็อก"ค่ะ
ด้านบนนะคะตรงที่มีชื่อ "การเรียนรู้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;}

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

[Sawitree]

ขอบคุณสำหรับคำอธิบายค่ะ  เข้าใจมากขึ้นเลยค่ะ แต่ว่ารู้สึกบางประโยคจะแปลกๆ พิมพ์ผิดรึเปล่าค่ะคุณขวัญข้าว(สาวจัน)

[เมตตา]

ขอบคุณค่ะ รูปแบบน่ารักเรียบ เก๋ ได้ประโยชน์มากสำหรับคนแก่อย่างพี่ค่ะช่วยทำใหพี่สัก 1 แบบซิคะ ตกลงมั๊ย

[feriona]

คุณเมตตาอยากได้ลักษณะไหนคะ เผื่อว่าดิฉันจะช่วยได้ค่ะ แต่ถ้าจะให้ดีนะคะ คุณเมตตาน่าจะลองทำดูค่ะ เพราะว่าสนุกมากนะคะ ถ้าหากสงสัย หรือ มีปัญหาตรงไหนดิฉันยินดีให้คำปรึกษาค่ะ

[เมตตา]

เอาภาพเล็กใส่ข้างบน น่ะค่ะ ทำไม่ค่อยเป็น ไม่ค่อยเข้าใจ photoshop ค่ะ คงต้องฝึกฝนอีกพักค่ะ ไม่ทันใจตัวเอง .....วันหลังคงต้องชวนน้องมาที่ สำนักงานช่วยสอนกันสักพักค่ะ....เราอยู่ มอ.ด้วยกันค่ะ

[feriona]

ได้ค่ะว่างเมื่อไหร่ก็จะช่วยสอนให้ค่ะ ถ้าหากทำเป็นแล้วจะสนุกค่ะ ยินดีที่ได้รู้จักนะคะ

[นายโน้ต]

1)ถ้าเราต้องการ "ชื่อบล็อก" ขนาดใหญ่ เราก็ไม่ต้องเปลี่ยนหรือแก้ไขอะไรเลยค่ะ เพราะว่า ค่าเริ่มต้นที่กำหนดไว้ก็กำหนดให้ front size เป็นขนาดใหญ่อยู่แล้วค่ะ <----- คำว่า font เขียนผิดนะคร้าบ

เยอะดีแหะ คนนี้ ขยันตามเคย

[feriona]

ขอบคุณค่ะ "นายโน๊ต" แก้ไขให้แล้วค่ะ

[Up to you.]

สวัสดีค่ะ ได้ทดลองทำหัวบล็อคแล้วค่ะ แต่ไม่สามารถนำขึ้นได้ อยากให้แนะนำซักนิดน่ะค่ะ

[feriona]

ไม่ทราบว่าคุณ "โรงเรียนพ่อแม่" มีปัญหาที่ส่วนใดค่ะ จะได้ช่วยแก้ปัญหาได้ถูกต้องค่ะ

[นาย โจ้]

ขออ่านด้วยคนนะครับ พอดีกำลัง เล่นเรื่องนี้ ง่า...