こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、無料WordPressテーマ:Stinger7のヘッダー画像の高さを変更する方法を紹介したいと思います。

ここではヘッダー画像の高さを変更していきますが、ヘッダー画像の横幅を広げる方法についても記事を書いたので、よかったら参考にして下さい!

Stinger7:ヘッダー画像を横幅いっぱい(横幅100%)に広げる方法

カスタマイズ前

↓ 管理画面の「外観」→「ヘッダー」でヘッダー画像を選択するときの画面(初期状態の高さは400px)

stinger7-custom-header-image-height-before

カスタマイズ後

カスタマイズ 1

↓ ヘッダー画像の高さを400pxから200pxに変更

stinger7-custom-header-image-height-after-2

カスタマイズ 2

↓ ヘッダー画像の高さを500pxに変更

stinger7-custom-header-image-height-after-4

※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. functions.php を編集

Stinger7では子テーマを配布してくれているので、ここでは子テーマを使用してヘッダー画像の高さを変更していきます。

子テーマフォルダに入っている functions.php に以下のコードを追加します。

// カスタムヘッダー
$custom_header = array(
    'random-default' => false,
    'width' => 1060,
    'height' => 200,     // ← ヘッダー画像の高さ
    'flex-height' => true,
    'flex-width' => false,
    'default-text-color' => '',
    'header-text' => false,
    'uploads' => true,
    'default-image' => get_stylesheet_directory_uri() . '/images/af.png',
);
add_theme_support( 'custom-header', $custom_header );

これでヘッダー画像の高さを200pxにすることができました。

↓ 「外観」→「ヘッダー」の画面

stinger7-custom-header-image-height-after-1

stinger7-custom-header-image-height-after-2

2. お好みの高さにするには

ヘッダー画像をお好みの高さにするには、 'height' => ○○ の○○部分を変更すれば大丈夫です。

例えばヘッダー画像の高さを500pxにする場合、下のようなコードになります。

// カスタムヘッダー
$custom_header = array(
    'random-default' => false,
    'width' => 1060,
    'height' => 500,     // ← ヘッダー画像の高さ
    'flex-height' => true,
    'flex-width' => false,
    'default-text-color' => '',
    'header-text' => false,
    'uploads' => true,
    'default-image' => get_stylesheet_directory_uri() . '/images/af.png',
);
add_theme_support( 'custom-header', $custom_header );

このような要領で、height というキーとペアになる値('height' => ○○ の○○部分)を編集すれば、ヘッダー画像の高さを変更することができます。
(○○にはpxが入らず数字だけということに注意が必要です)

stinger7-custom-header-image-height-after-3

stinger7-custom-header-image-height-after-4

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。