Stinger7:ヘッダー画像の高さを変更する方法

  • Google+
  • B!はてブ
  • Pocket
  • こんにちは、ぶどうサワーです。
    サイトの閲覧ありがとうございます。

    今回の記事では、無料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

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