デフォルトテーマ「Twenty Ten」のヘッダロゴ部分の変更
2011/01/18
というわけで、WordPress関連最初の投稿。
インストールしたWPにはデフォルトテーマとして、Twenty Tenなるテーマがインストールされています。
このテーマ、さすがというべきかいろんな機能が盛り込まれており、ちょいと見た目を自分好みに改造すると、いい感じにブログができあがるという、結構使えるテーマとなっております（多分）
デフォルトテーマということは使っている人も多いはずなので、改造に関するTipsもウェブ上には落ちているはず！ とも思ったのでこのブログは基本的に、Twenty Tenをベースにしていこうと思います。
すでに多くの人がTwentyTenに関する記事を書いているとは思いますが、まぁ、せっかくなのでToogieも書いてみたいと思います。
先に述べますが、あくまでToogieがやってみた処理を書いてみるだけなので、間違っている箇所があるかもしれませんが、そこは生暖かい目で見つつ、指摘してもらえるとありがたい感じです。
前置きはさておき、このエントリーでは件名にもある通り、ヘッダロゴ部分のデザイン変更を書いてみます。
このサイトのロゴマーク及び、ロゴ画像は実際にこの作業で作られています。
まずはロゴマーク画像を作成し、テーマディレクトリ以下にlogoディレクトリを作成し、FTPにてアップロードします。
管理パネル左メニュー【外観】→【テーマ編集】に入り、「スタイルシート（style.css）」の編集画面を開きます。
なんだかズラズラと書かれていますが、所詮はCSSです。解読出来れば改造も出来るはず。頑張って見ていきましょう。
CSSを見ると、その名のとおりヘッダーと書かれた部分が見つかります。
以下、全文。
/* =Header
-------------------------------------------------------------- */
#header {
padding: 30px 0 0 0;
}
#site-title {
float: left;
font-size: 30px;
line-height: 36px;
margin: 0 0 18px 0;
width: 700px;
}
#site-title a {
color: #000;
font-weight: bold;
text-decoration: none;
}
#site-description {
clear: right;
float: right;
font-style: italic;
margin: 14px 0 18px 0;
width: 220px;
}/* This is the custom header image */
#branding img {
border-top: 4px solid #000;
border-bottom: 1px solid #000;
clear: both;
display: block;
}
公開側画面のHTMLソースから解析するに、
<div id="branding" role="banner">
<div id="site-title">
省略
</div>
</div><!-- #branding -->
このあたりがヘッダ、サイトロゴというべきサイト名が入っている箇所のようです。
idがbrandingとsite-titleで構成されているので、ブラウザの検索機能を使い箇所を見つけて書き換えてみます。
#site-title {
background-image: url(images/logo/wataamefrog_logomark.png);
background-position: top left center;
background-repeat: no-repeat;
padding: 10px 0 0 55px;
margin: 0;
}
こんな感じにしてみました。
次に、サイト名も画像にしてみます。
これはCSSだけでは出来ない作業なので、テーマのテンプレートを編集します。
CSS編集画面を開いた画面から同様に「ヘッダー（header.php）」を開きます。
なにやら色々と書いていますが、60行目付近の
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
この辺りが該当箇所っぽいです。
以下ように書き換えます。
<<?php echo $heading_tag; ?> id="site-title">
<span>
<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php /*bloginfo( 'name' );*/ ?><img src="<?php bloginfo('template_url'); ?>/images/logo/wataamefrog_logo.gif" alt="<?php bloginfo('name'); ?>" width="278" height="50" /></a>
</span>
</<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div>
画像widthとheightの直打ちはどうなのかとは思いますが、個人サイトなのであまり深く考えないようにします。
やってることは、ブログ名をテキスト出力している箇所を、imgタグを使い画像にしているだけです。
画像パスはWordPressの関数「bloginfo('template_url');」を使用して読み込んでいます。
あとはブラウザでアクセスし、微調整を行えば出来上がり。
こんな感じで進めていき、このサイトのロゴ部分は画像化されています。
他の箇所を編集した際はまたその手順も書いてみたいと思います。