【Twenty Ten】ヘッダーのタイトル文を画像にする

タイトル文を画像にするので作成した画像をWordPressにアップロードします。この例では、TwentyTenフォルダのimagesフォルダにアップロードしています。
*imgタグは、作成した画像ファイル名に合わせて/images/○○.pngにします。
【変更前:header.php】

<a href="<?php echo home_url( '/' ); ?>" title=
"<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?></a>

【変更後:header.php】

<a href="<?php echo home_url( '/' ); ?>" title=
"<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php bloginfo('template_url'); ?>/images/title.png" 
alt="<?php bloginfo('name');?>"></a>

変更後のヘッダーが以下の表示になります。

ヘッダーのコードを変更した後、タイトル画像の上下にボーダーが入っているのでstyle.cssのborder設定を削除します。
【変更前:style.css】

#branding img {
  border-top: 4px solid #000;
  border-bottom: 1px solid #000;
  display: block;
  float: left;
}

【変更後:style.css】

css変更後
#branding img {
  display: block;
  float: left;
}

style.cssを変更した後の表示は以下のようになります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です