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

WordPressテーマカスタマイズ

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

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

【変更後:header.php】

<a href=&quot;<?php echo home_url( '/' ); ?>&quot; title=
&quot;<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>&quot; rel=&quot;home&quot;>
<img src=&quot;<?php bloginfo('template_url'); ?>/images/title.png&quot; 
alt=&quot;<?php bloginfo('name');?>&quot;></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を変更した後の表示は以下のようになります。

スポンサーリンク

コメント

タイトルとURLをコピーしました