Simplicityのヘッダー画像の大きさをカスタマイズ

PR 2014/7/12 2014/8/13 テーマ改造

Simplicityのver20140812から、こちらのカスタマイズは、管理画面からできるようになりました。

「外観→カスタマイズ→ヘッダー画像」から行ってください。

もちろんCSSで行ってもOKです。

photo by Nakib Ahmed

Simplicityデフォルトでは、ヘッダー画像の大きさは1070×100pxと少し横長の画像になっています。

こんな感じ。

これではちょっと横に長すぎるので、縦幅の高さを増やしたいなんて時には以下のようにカスタマイズします。今回は縦幅が200pxになるように変更したいと思います。

functions.phpの編集

まずエディターで、functions.phpを開いてください。

検索機能などで「custom_header_defaults」を検索してください。

すると以下の部分が検索にヒットすると思います。

//カスタムヘッダー
$custom_header_defaults = array(
 'random-default' => false,
 'width' => 1070,
 'height' => 100,
 'flex-height' => false,
 'flex-width' => false,
 'default-text-color' => '',
 'header-text' => false,
 'uploads' => true,
);
add_theme_support( 'custom-header', $custom_header_defaults );

これの以下の部分を

'height' => 100,

このように変更します。

'height' => 200,

style.cssの編集

テーマファイルのstyle.cssをテキストエディタで開いてください。

検索機能で「#h-top」と検索します。すると以下のような箇所がヒットすると思います。

#h-top{
  height:100px;
  background-repeat: no-repeat;
  background-position: top left;
}

これのheightを100px→200pxに変更します。

ファイルの編集が終わったら、編集したファイルをサーバーにFTPか何かでアップロードします。

ヘッダー画像の変更

あとは、Wordpress管理画面からヘッダー画像を変更します。

ヘッダー画像の変更方法は以下を参照してください。

Simplicityにヘッダー画像を追加・変更をする方法

カスタマイズ結果

これらのカスタマイズを行った結果、ヘッダー画像は以下のように大きくなりました。