今回の記事では、無料WordPressテーマ：Stinger7のヘッダー画像の高さを変更する方法を紹介したいと思います。
ここではヘッダー画像の高さを変更していきますが、ヘッダー画像の横幅を広げる方法についても記事を書いたので、よかったら参考にして下さい！
Stinger7：ヘッダー画像を横幅いっぱい（横幅100%）に広げる方法
カスタマイズ前
↓ 管理画面の「外観」→「ヘッダー」でヘッダー画像を選択するときの画面（初期状態の高さは400px）
カスタマイズ後
カスタマイズ 1
↓ ヘッダー画像の高さを400pxから200pxに変更
カスタマイズ 2
↓ ヘッダー画像の高さを500pxに変更
※ 今回はPHPファイルを編集していきます。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。
1. functions.php を編集
Stinger7では子テーマを配布してくれているので、ここでは子テーマを使用してヘッダー画像の高さを変更していきます。
子テーマフォルダに入っている functions.php に以下のコードを追加します。
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にすることができました。
↓ 「外観」→「ヘッダー」の画面
2. お好みの高さにするには
ヘッダー画像をお好みの高さにするには、 'height' => ○○ の○○部分を変更すれば大丈夫です。
例えばヘッダー画像の高さを500pxにする場合、下のようなコードになります。
PHP
コピーする
// カスタムヘッダー$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が入らず数字だけということに注意が必要です）
今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。