【Twenty Ten】オリジナルヘッダー画像にする

カスタムヘッダーを使いオリジナルのヘッダー画像にするためにヘッダー画像を用意します。このとき、「画像をアップロード」の右に説明文と一緒に表示されているサイズと自分が用意した画像のサイズが同じ場合は、そのままアップロードします。

違う場合は、functions.phpファイルを先に変更しておきます。
私の場合は、幅940px、高さ100pxの画像を用意したので、functions.phpにあるHEADER_IMAGE_HEIGHTの値を198から100に変更します。

【変更前：functions.php】

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 198 ) );

【変更後：functions.php】

define( 'HEADER_IMAGE_WIDTH', apply_filters( 'twentyten_header_image_width', 940 ) );
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyten_header_image_height', 100 ) );

functions.phpでサイズの変更をしたら、次に「外観」⇒「ヘッダー」をクリックしてカスタムヘッダー画面にして、「画像をアップロード」のところにある参照をクリックして画像をアップロードします。

オリジナルヘッダーに変更した後のヘッダーは以下のようになります。

このままでも良いのですが、タイトル画像の位置と、「一般設定」の「キャッチフレーズ」で設定したサイト説明文が見づらいので位置と文字色を変更します。

ヘッダーには、今回画像が1つしかないのでstyle.cssにある#branding imgで、margin-topとmargin-leftを追加してタイトル画像の位置を変更します。
【変更後：style.css】

#branding img {
  display: block;
  float: left;
  margin-top: 30px;
  margin-left: 10px;
}

サイト説明文の位置と色の変更をしますので、私のサイトの場合、site-descriptionにあるmarginの値の変更とcolorを追加します。
【変更前】

#site-description {
  clear: right;
  float: right;
  font-style: italic;
  margin: 15px 0 18px 0;
  width: 220px;
}

【変更後】

#site-description {
  clear: right;
  float: right;
  margin: 30px 0 18px 0;
  width: 220px;
  color: #FFF;
}

【変更後のヘッダー】