วิีธีกำหนดขนาดและ Style ของรูปภาพในบทความบน Blogger ด้วย CSS

blogger CSS Blogspot SEO สอนทำบล็อก สร้างบล็อก วิธี แต่ง blog

รูปภาพใน Post (บทความ) ของ Blogger สามารถกำหนดให้มี Style อย่างที่เราต้องการได้ เช่นถ้าในกรณีเราใช้รูปภาพที่มีขนาดใหญ่เกินไป หรือใน 1 บทความนั้นมี รูปภาพหลาย ๆ ขนาด ซึ่งกว้างยาวกว่ากันเล็กน้อยก็จะดูไม่สวยงาม เช่นรูปในตัวอย่างด้านล่างนี้

วิธีสร้าง blog สอนทำ บล็อก Blogger SEO

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

บทความนี้ผมจะนำเสนอวิธีง่าย ๆ ที่ทำให้ปัญหาเรื่องขนาดรุปภาพในบทความของ blogger หมดไป และนอกจากนี้ผมจะนำเสนอการกำหนด Style ให้กับรูปภาพในบทความให้ดูมีลูกเล่นสวยงามมากขึ้นด้วย


วิธีที่ 1 กำหนดให้ขนาดของรูปภาพในบทความ Blogger พอดีกับแม่แบบ


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

เริ่มต้นให้ Login เข้าไปที่ Blogger.com >> เข้าไปที่ การแก้ไข HTML   >> และค้นหาโค้ด ]]></b:skin>
เมื่อพบแล้วให้วาง CSS code ต่อไปนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>
.entry-content img{max-width:630px;}
ตัวเลข 630 ปรับให้เหมาะกับความกว้างของแม่แบบของคุณ ซึ่งในที่นี้ผมใช้ 630px เพราะส่วนบทความของผมกว้างประมาณ 650 px หักลบค่า padding และ margin แล้ว 630px จึงจะดูสวยงาม 

เมื่อปรับตัวเลขแล้วบันทึกแม่แบบ ก็สำเร็จครับ

blogger blogspot ทำบล็อก แต่ง blog สร้างบล็อก

หมายเหตุ ในกรณีแม่แบบรุ่นเก่าคุณอาจจะต้องใช้โค้ด
.post img{
max-width:630px;
}
ซึ่งถ้าใช้ตามที่แนะนำแล้วยังไม่สำเร็จหรือมีปัญหาก็สอบถามกันได้เลย


วิธีที่ 2 กำหนให้ขนาดของรูปภาพในบทความ Blogger มีขนาดขั้นต่ำตามที่ต้องการ

ในกรณีที่คุณต้องการให้รูปมีขนาดความกว้างและความสูงของภาพในขั้นต่ำที่เราต้องการ ให้ทำเช่นเดียวกับวิธีที่ 1 แต่เปลี่ยนโค้ดเป็น
.entry-content img{
min-width:630px;
min-height:300px;
}
ตัวเลข 630 และ 300 ปรับให้ตรงกับความกว้างและความสูงขั้นต่ำที่คุณต้องการ

หมายเหตุ วิธีนี้ยังมีข้อเสียที่ควรทราบคือ
1. จะทำให้ภาพที่มีขนาดเล็กในบทความถูกขยายให้ใหญ่ทั้งหมด ทำให้บางรูปที่มีขนาดเล็กมาก  ๆ เมื่อถูกบังคับให้ใหญ่ก็จะเบลอและไม่ชัด
2. การใช้โค้ดนี้ อาจจะยังคงมีปัญหาในเรื่องความกว้างของรูปภาพที่เกินออกนอกขอบของบทความอยู่ ดังนั้นจึงควรใช้โค้ดในวิธีที่หนึ่ง และวิธีที่สองผสมกัน ซึ่งจะได้โค้ดดังนี้
.entry-content img{
max-width:630px;
min-width:630px;
min-height:300px;
}


วิธีที่ 3 กำหนดขนาดที่ตายตัวให้กับทุกรูปในบทความใน Blogger

ถ้าต้องการให้รูปมีขนาดตายตัวเท่ากันหมดในทุกบทความ และทุกรูป ให้ใช้โค้ด
.entry-content img{
width:630px;
height:300px;
}
อย่าลืมปรับค่าตัวเลข 630 และ 300 ให้ตรงกับความกว้างและความสูงของรูปภาพที่คุณต้องการ


วิธีที่ 4 กำหนดให้รูปภาพในบทความ Blogger มีเส้นขอบและพื้นหลังทุกรูป

เราสามารถกำหนดให้รูปภาพในบทความมีเส้นขอบได้โดยใช้โค้ด
.entry-content img{
border:5px solid #9E9E9E; /* เส้นขอบสีเทา และหนา 5px ปรับแต่งได้ */
}
SEO blogger Customize image

ถ้าต้องการใส่ background พร้อมกับเส้นขอบให้กับรูปภาพคุณอาจจะใช้โค้ดต่อไปนี้
.entry-content img{
padding:30px;
background-color:#EEEEEE;
border: 2px solid #6E6E6E;
}
image in Blogger post

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

.entry-content img{
padding:30px;
background-color:#EEEEEE;
border: 2px solid #6E6E6E;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-border-radius:5px;
}
ผลที่ได้จะเป็นดังรูป

แต่งบล็อก


วิธีที่ 5 ทำให้รูปภาพชิดซ้ายหรือขวาเสมอ

ถ้าต้องการให้รูปในบทความทั้งหมดชิดซ้ายใช้โค้ดดังนี้
.entry-content img{
float:left;
margin:10px;
}
สร้างบล็อก สอนทำบล็อก blog บล็อก แต่งบล็อกฟรี

ถ้าต้องการให้รูปในบทความทั้งหมดชิดขวาใช้โค้ดดังนี้
.entry-content img{
float:right;
margin:10px;
}

Blogger สร้างบล็อก Backlink SEO

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


วิธีที่ 6 ใช้วิธีทำ hover image มาทำให้รูปภาพในบทความน่าสนใจมากขึ้น


เทคนิคนี้เป็นการทำให้รูปภาพดูน่าสนใจ และดูมีชีวิตมากขึ้น CSS ที่ใช้ให้ใช้โค้ดต่อไปนี้

แบบที่ 1 ก่อนเมาส์ over ภาพจะเบลอ
.entry-content img{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;-khtml-opacity:0.5;}
.entry-content img:hover{filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;-khtml-opacity:1.0;}
แบบที่ 2 หลังจากนำเมาส์ over ภาพจะเบลอ

.entry-content img{filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0;-khtml-opacity:1.0;}
.entry-content img:hover;{filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;-khtml-opacity:0.5;}

Linkwheel facebook twitter


วิธีที่ 7 กำหนด Style และเรียกใช้กับบางรูปเท่านั้น

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

ขั้นตอนการกำหนด Style ให้กับบางภาพที่ต้องการเท่านั้น


7.1 สร้าง Class ขึ้นมาตั้งชื่ออะไรก็ได้ที่ไม่ซ้ำกับชื่อคลาสที่มีอยู่แล้วใน Blogger หรือในแม่แบบที่ใช้ เช่น ผมตั้งชื่อ Class ว่า

.hackimage{
/*เลือก style จากขั้นที่ 1- 6 มาใส่ตามใจชอบ*/
}

7.2 ต่อไปใส่ Style โดยเลือกใช้โค้ดที่สอนมาแล้วในวิธีที่ 1 - วิธีที่ 6 เช่นในที่นี้ผมกำหนด Style ดังนี้

.hackimage{
background-color:#EEEEEE;
border: 2px solid #6E6E6E;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
-border-radius:5px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
-khtml-opacity:0.5;
}
.hackimage:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.0;
-khtml-opacity:1.0;
}
นำโค้ดไปวางก่อหน้าโค้ด ]]></b:skin> ในแม่แบบและบันทึก


7.3 จากข้อ 7.2 รูปภาพจะยังไม่เกิดการเปลี่ยนแปลงใด ๆ จนกว่าเราจะเรียกใช้ Class ที่สร้างไว้กับรูปภาพที่ต้องการเจาะจง ซึ่งทำได้ดังนี้

เข้าไปแก้ไขข้อความและแทรก Class hackimage ลงไปใน tag img ดังตัวอย่างในรูปด้านล่าง

สร้างบล็อก ทำบล็อก แต่งบล็อก Blogger Blog Blogspot

7.4  วิธีในที่แสดงในข้อ 7.3 สามารถนำไปปรับใช้กับรูปภาพในตำแหน่งใดของแม่แบบ

มีปัญหาสงสัยโปรดสอบถามที่ comment ด้านล่างเพื่อเป็นกรณีตัวอย่างให้กับคนที่สงสัยในเรื่องเดียวกันได้ดูวิธีแก้ปัญหาครับ หวังว่าบทความนี้จะเป็นประโยชน์ สวสัดีครับ

ตอนนี้มีความคิดเห็น : 3 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. อยากทราบว่า ถ้ากำหนดขนาดภาพแบบนี้ ภาพมันจะถูกย่อเองใช่มะงับ

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

  1. ผมกำหนด ภาพ ให้มัน ใหญ่ 900px X 1200px ทุกรูป แต่มันยังมีภาพที่ขยาย แล้วแตกอะครับ มีโค๊ดแก้มั๊ยคับ นอกจากไปขยาย ขนาดใน แก้ไขบทความ เป็น original

    มีวิธีอื่นมั๊ยคับ

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

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel