ブログ名を画像にする!テーマTwentyelevenのカスタマイズ(1)

最近あまり人気がないのか、最新デフォルトテーマであるTwentyelevenに関するカスタマイズ記事が多くないように感じましたので、ここに(自分が試したことだけですが)情報を残します。

  1. ブログ名を画像にする
  2. H1,H2のスタイルを変更する

ブログ名を画像にする

このブログ自体がその実験場と化していますが、テーマTwentyelevenのブログ名表示を画像表示に変えました。

変更したソースは3つ。

  1. images/title.jpgの追加
  2. header.phpの変更
  3. style.cssの変更

images/title.jpgの追加

  • PS6で作成
  • サイズは386×128

header.phpの変更

73行目あたりを

<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img class="entry-img" src="<?php echo get_template_directory_uri(); ?>/images/title.jpg" />
</a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>

に変更する

style.cssの変更

930行目あたりに

.entry-img {/* customized at 20111008JST0938 */
	max-width:  386px;
	max-height: 128px;
}

を入れる。Class指定を用いています。もちろんほかの方法でも可能だと思います。現在使っている画像のサイズを最大値として指定しています。

お世話になったリンク

デフォルトテーマのカスタマイズ:ブログタイトルを画像にする

デフォルトテーマのカスタマイズ:見出しタグの変更

以上です。