หาวิธีเปลี่ยน blog-name เป็น image แบบเรียบร้อย

10.01.2014 - Wordpress

เพราะกลัวว่าเทคโนโลยีที่เคยใช้เมื่อหลายปีก่อนจะเก่าไปแล้ว กับการใช้วิธีนี้ทำโลโก้ของเว็บใน CSS

#blogname {text-indent: -9999px; background: /* แล้วเอารูปมาลงตรงนี้ */}

จำได้ว่าการใช้ text-indent: -9999px นั้นมีผลด้านความสวยงามและผิดหลัก box model พอสมควร วันนี้เลยตั้งหลักลองหาวิธีใหม่ๆ ดู เจอวิธีที่น่าสนใจอีก 2 วิธี

วิธีที่ 1

เจอที่ wordpress.org forum ลิ้งค์นี้ กล่าวไว้ว่าให้วางรูปไว้ข้างๆ  ชื่อบล็อก ครอบด้วย <a> ครอบด้วย <span> อีกที แล้วก็ใช้ CSS จัดการ

<div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><img src="<?php bloginfo( 'template_url' ); ?>/images/headerimage.jpg" /></a></span></div>

วิธีนี้เราว่าก็ดีแต่เวลา Disable CSS แล้วข้อความเรียงตัวกันไม่สวยงาม มีรูปมาคั่น คือถ้ารูปขนาดเท่าตัวหนังสือก็ดีไป แต่หลายครั้งเราอาจต้องการโลโก้เว็บใหญ่หรือเล็กกว่านั้น กับเราไม่เห็นความสำคัญของ <span> ที่ครอบมา วิธีนี้จึงยังไม่ถูกใจมากนัก

วิธีที่ 2

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

<div id="branding">
<a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><span class="header-img"><h1 id="blog-name"><?php bloginfo( 'name' ) ?></h1></span></a>
</div>
วิธีนี้ถ้า Disable CSS จะได้ชื่อบล็อคเปล่าๆ โดยไม่มีรูป แต่เวลาเอา CSS ไปครอบเราก็จะซ่อน <h1> แล้วขยาย <span> ใส่รูปเพื่อแสดงโลโก้ได้แนบเนียนดี

ตกลงใจว่าชอบวิธีที่สอง 🙂

› tags: css / logo / web /