サポート » テーマ » ヘッダ画像について

  • 解決済 suzaku_zip

    (@suzaku_zip)


    http://www.final-stretch-unit.com
    のBlogで、ヘッダ画像を表示させたのですが、
    テーマの問題だと思いますが、周囲に余白ができてしまいます。
    テーマはTwenty twelveを少し変えただけです。
    その画像を、白い部分ではなく最上部に、背景色の中に表示させたいのですが、どうすればいいでしょうか。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • こんにちは。

    ヘッダー画像を一番上にするためには<body>の直後にヘッダーの<img>が来るようにすればよいと思います。
    ただ、WordPressの場合、phpを修正する必要がありますので注意して作業をしていただければと思います。
    (すみませんが私自身で動作確認をすることができません…ダメだった場合いつでも修正できる状態で試していただきたいと思います。)

    googleで探してみると似たようなお話で、分かりやすいブログがありましたので載せておきます。
    http://beebee.peewee.jp/2013/06/19/01/

    Twenty Twelveを少し変えただけということですので、Twenty Twelveの例で話を進めます。

    ヘッダー画像のコードが書かれているのは「header.php」というファイルです。その中に、

    <?php $header_image = get_header_image();
            if ( ! empty( $header_image ) ) : ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    <?php endif; ?>

    というような部分があるかと思います。そこを<body <?php body_class(); ?>>の直後に移動して見てください。こんな感じになると思います↓

    <body <?php body_class(); ?>>
    		<?php $header_image = get_header_image();
    		if ( ! empty( $header_image ) ) : ?>
    			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    		<?php endif; ?>
    <div id="page" class="hfeed site">

    無事、画像が上に表示された場合、画像が中心には表示されていないかもしれません。その場合は、
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    の部分の前後を
    <div id="header-img"></div>
    で囲ってcssで

    #header-img{
      text-align:center;
    }

    としてあげれば、センタリングされるかと思います。(header-imgというid指定は一例ですので、お好みで変えてください。)

    これで出来るとは思うのですが…上記のとおり、検証していませんので不具合が出るかもしれません。参考程度になればと思います。

    トピック投稿者 suzaku_zip

    (@suzaku_zip)

    解決しました。
    ありがとうございました。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「ヘッダ画像について」には新たに返信することはできません。