レスポンシブテーマの、サイトタイトルを画像に変更する

Twentyelevenテーマで、タイトルを画像に変換する場合の、もっともオーソドックスな方法は、チャイルドテーマに、header.phpを追加し、以下のように、header.phpテンプレートを書き換えるのが一番簡単です。

サイトタイトルを画像に置き換える方法

<h1 class="site-title">

　<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
　
　<img src="http://www.example.com/images/example.jpg" style="width:26.66666em;height:auto;max-width:100%;" alt="<?php $blogname= get_bloginfo( 'name' ); echo esc_attr( $blogname );?>" />
　
　</a>
　
</h1>

インラインスタイルの、widthの　26.66666emは、概略400pxです。

Twentyelevenは、Eric Meyerさんの、リセットルールを使っています。

ベースフォントサイズは、100%ですから、16pxになるはずです。

font-sizeは、フォントの高さに相当します。

フォントの種類により、それぞれのフォントの縦横比は、異なるので、テーマの中で、チェックをすればいいと思いますが、上記のサンプルコードでは、pxを15で割って、近い幅を設定しています。

サイトタイトルの背景画像として指定する。

CSS3では、背景画像用のプロパティーが多数追加されていて、様々な振る舞いを設計できるので、背景画像として使いたいというニーズは少なからずあると思います。

しかし、Twentyelevenのようなレスポンシブなサイトのタイトル画像を背景に設定する作業は、かなり複雑な作業を必要とします。

急所になるのは、

• 背景画像がセットされるブロックエレメントの高さをどのように設定するか
• ブラウザサイズの変化に伴って変更されるフォントサイズなどと調和をとって画像を表示する指定方法を考えなければならない
• ボックスサイズに、背景をフィットさせるスタイルルール

にあります。

高さの問題を考慮しないサンプルは、以下のようになります。

高さを考慮する場合は、javascriptで、画像のサイズを取得して、縦横比を計算して、高さに割り当ててやるといいでしょう

child theme/header.php
Twentyelevenのheder.phpの、一部を書き換え、チャイルドテーマディレクトリに配置します。

<h1 id="site-title"><span><a href="" rel="home">Title</a></span></h1>

という部分を

<h1 id="site-title"><a href="" rel="home"><span>Title</span></a></h1>

のように書き換えます。

style.cssの末尾に以下をセットします

#site-title{
	background: url(http://example.com/images/example.jpg);
	-moz-background-size:cover;
	-webkit-background-size:cover;
	-o-background-size:cover;
	-ms-background-size:cover;
	background-size:cover;
	width:400px;
	max-width:100%;
	height:80px;
	margin:4.285em 0 0!important;
}
#site-title a{
	display:block;
	height:100%;
	width:100%;
}
#site-title a span{
	display:none;
}
@media (max-width: 800px) {
/*ディスプレイサイズ800px迄*/

}
@media (max-width: 650px) {
/*ディスプレイサイズ650px迄*/

}
@media (max-width: 450px) {
/*ディスプレイサイズ450px迄*/

}

http://www.w3.org/TR/css3-fonts/#font-size-prop(b:title)

http://www.ne.jp/asahi/minazuki/bakera/html/css/font(b:title)