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

今回は無料WordPressテーマ:Stinger7のヘッダー画像を横幅いっぱいに広げる方法を紹介したいと思います。

ついこないだStingerの最新バージョンがリリースされたようですが、Stingerもバージョン7になるんですね。
自分が一番最初に使ったWordPressテーマはStinger(たしか3)だったので、しみじみStinger(というかEnjiさん)すごいなぁなんて思ってしまいます。
これだけ有名になっても変わらず完全無料でテーマを公開するなんて、なかなかできることじゃないですよね。

今回はそんなStinger7のヘッダー画像を横幅いっぱいに表示する方法を紹介します。

追記:2016年2月14日

header.php と style.css のコードを修正しました。

ぴよママさん 丁寧なメッセージありがとうございました。
ただ、お問い合わせフォームに入力してもらったメアドが違ったらしく、返信出来ませんでした・・・。気になる部分があれば、またご連絡ください。

カスタマイズ前

↓ カスタマイズ前のヘッダー画像は横幅1060px

stinger7-header-image-full-width-before-1

カスタマイズ後

PCサイズ

↓ ヘッダー画像を横幅いっぱいに表示

stinger7-header-image-full-width-after-pc-bottom

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

stinger7-header-image-full-width-after-pc-3

スマホサイズ

↓ スマホサイズにしても画像がはみ出ることなく表示

stinger7-header-image-full-width-after-sp-1

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

1. 子テーマ用 header.php を作成

Stinger7では子テーマを配布されているので、今回は子テーマを使ってカスタマイズしていきます。

と言ってもカスタマイズの一番最初には、カスタマイズ用の header.php を作る必要があるので、まずは親テーマ(Stinger7本体)の header.php をコピーして、子テーマフォルダの中に header.php を作ります。

(この時点では子テーマの header.php と親テーマの header.php のコードは全く同じ)

stinger7-header-image-full-width-child-theme-folder

2. header.php を編集

Stinger7ではサイト全体を包む <div id="wrapper"...> で、ヘッダー画像を含めた横幅を最大1060px(以内)に指定しているので、まずはヘッダー画像をこのdivタグの外に移動します。

先ほど作成した(親テーマからコピペした) header.php の44行目付近に以下のコードがあるので、

<div id="wrapper" class="<?php st_wrap_class(); ?>">

これを </header> の下に移動します。
( header を <div id="wrapper"...> の中に入れたくないので、</header> の下に移動)

</header>
<div id="wrapper" class="<?php st_wrap_class(); ?>">

追記:2016年2月14日

バージョンによって変わるかもしれませんが、 header.php の中に include_once(...) というコードがある場合には、以下のように編集して下さい。

(もし include_once(...) が header.php に書かれていない場合には、上の編集のみで大丈夫です。)

↓ 編集前

<?php include_once( "st-font.php" ) //googlefont ?>

<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>

↓ 編集後

<?php include_once( TEMPLATEPATH . "/st-font.php" ) //googlefont ?>

<?php include_once( TEMPLATEPATH . "/analyticstracking.php" ) //アナリティクスコード ?>

コード編集後の header タグから下は、以下のようになりました。

※ ここでは バージョン 20160212 を使用 ← 親テーマの style.css に書いてあります。
※ 追記分も反映しています

<header>
<div class="clearfix" id="headbox">
<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
    <dl class="acordion">
        <dt class="trigger">
        <p><span class="op"><i class="fa fa-bars"></i></span></p>
        </dt>
        <dd class="acordion_tree">
            <?php
                $defaults = array(
                'theme_location' => 'primary-menu',
                );
            ?>
            <?php wp_nav_menu( $defaults ); ?>
            <div class="clear"></div>
        </dd>
    </dl>
</nav>
<!-- /アコーディオン -->
<div id="header-l">
    <!-- ロゴ又はブログ名 -->
    <p class="sitename"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">
            <?php if ( get_option( 'st_logo_image' ) ): //ロゴ画像がある時 ?>
                <img alt="<?php bloginfo( 'name' ); ?>" src="<?php echo esc_url( get_option( 'st_logo_image' ) ); ?>" >
            <?php else: //ロゴ画像が無い時 ?>
                <?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
            <?php endif; ?>
        </a></p>
    <!-- キャプション -->
    <?php if ( is_home() ) { ?>
        <h1 class="descr">
            <?php bloginfo( 'description' ); ?>
        </h1>
    <?php } else { ?>
        <p class="descr">
            <?php bloginfo( 'description' ); ?>
        </p>
    <?php } ?>

</div><!-- /#header-l -->
<div id="header-r" class="smanone">
    <?php if ( isset($GLOBALS['stdata43']) && $GLOBALS['stdata43'] === 'yes' ) {
        get_template_part( 'st-footer-link' ); //フッターリンク 
    } ?>
    <?php get_template_part( 'st-header-widget' ); //電話番号とヘッダー用ウィジェット ?>
</div><!-- /#header-r -->
</div><!-- /#clearfix -->

    <?php get_template_part( 'st-header-image' ); //カスタムヘッダー画像 ?>

</header>
<div id="wrapper" class="<?php st_wrap_class(); ?>">

これでヘッダー画像を <div id="wrapper" ...> の外に出すことができました。

stinger7-header-image-full-width-after-php

3. CSSファイルを編集

このままでは不自然すぎるので、CSSファイルを編集して見た目を整えていきましょう。

style.css などお使いのCSSファイルに以下のコードを追加します。

追記:2016年2月14日

バージョンに合わせてコードを一部修正しました。
β版をお使いの方は、コメントアウトの //部分を消去して下さい。

#headbox {
    max-width: 1060px;
    padding: 0 10px;
    margin: 0 auto;
}
#gazou-wide {
    margin: 0 0 10px;
}

@media only screen and (min-width: 781px) {
    #headbox {
        max-width: 1060px;
        margin: 0 auto;
    }
    .smanone ul {
        max-width: 1060px;
        margin: 0 auto; 
    }
/*    .header-wrapper img {
        width: 100%;
        height: auto;
    }   */
    #gazou-wide img {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        height: auto;
    }
}

これで画像が横幅いっぱいに表示されるようになりました。
ちなみにナビゲーションメニューの位置は画像の上でも下でも同じように横幅100%で表示することができます。
(ナビゲーションメニューの位置は「Stinger管理」のページから設定できます)

↓ ナビゲーションメニューを画像の下に表示

stinger7-header-image-full-width-after-pc-bottom

↓ ナビゲーションメニューを画像の上に表示

stinger7-header-image-full-width-after-pc-top

↓ スマホサイズにしても画像がはみ出ることなく表示

stinger7-header-image-full-width-after-sp-1

4. ヘッダー画像の高さを変更するには

子テーマの functions.php に以下のコードを追加すれば、ヘッダー画像の高さを変更することができます。

↓ ここではヘッダー画像の高さを 200px にしました(最初は400px)

// カスタムヘッダー
$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 );

stinger7-header-image-full-width-after-pc-3

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