GotoKnow
  • เข้าระบบ
  • สมัครสมาชิก
  • แผงจัดการ
  • ออกจากระบบ
GotoKnow

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

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

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

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

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

บันทึกนี้เขียนที่ GotoKnow โดย 

คำสำคัญ (keywords): titlebar
หมายเลขบันทึก: 60659
เขียน:
แก้ไข:
ความเห็น: 10
อ่าน:
สัญญาอนุญาต: สงวนสิทธิ์ทุกประการ

ความเห็น (10)

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

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

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

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

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

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

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

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

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