ヘッダー画像のサイズを変更したい

  • 解決済 sacky

    (@sacky)


    7年、 5ヶ月前

    ヘッダー画像を大きく表示するのがおすすめポイントでもある
    テーマ「twenty seventeen」を使っています。

    トップページでは大きいため、もう少しヘッダー画像の高さを小さくしたいと
    考えcssなども見ているのですが、これ！といった部分が分かりません。

    その他にもレスポンシブだったり、メニューナビゲーションが分かりやすかったり…
    かなり気になるテーマのため、このまま使っていきたいのです。

    どの部分を変更したら反映されるか、教えてください。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • World Masa

    (@mtainc)

    7年、 5ヶ月前

    フロントページの画像の大きさを他のページと同じにするのが簡単ではないでしょうか？

    フロントページの画像は body class の twentyseventeen-front-page と home で設定されていますので、この二つを削除すれば、他のページと同じ大きさになります。

    functions.php 内に次を設定してはいかがでしょうか？

    // Eliminate twentyseventeen-front-page home css
    add_filter( ‘body_class’, ‘my_body_class’,20 );
    function my_body_class( $classes ) {
    unset($classes[array_search(“twentyseventeen-front-page”,$classes)]);
    unset($classes[array_search(“home”,$classes)]);
    return $classes;
    }

    （注：フロントページの記事の上部に大きなスペースが発生しますので、個別でそのスペースを調整する必要がありますが。）

    トピック投稿者 sacky

    (@sacky)

    7年、 5ヶ月前

    ご確認頂きまして、ありがとうございます。
    早速functions.phpにコードを入れてみたのですが、変化がありませんでした。

    私が何か、変更してしまっているのでしょうか？

    かなり気に入っているので、そのあたりを変更して、
    適切な画像サイズも考えたいんですけど…。

    お手数をお掛けして、申し訳ありません。

    World Masa

    (@mtainc)

    7年、 5ヶ月前

    フロントページの画像の大きさを変えることができました。

    スタイルシートのみの変更です。
    （高さ設定は一例です。）

    .has-header-image.twentyseventeen-front-page .custom-header,
    .has-header-video.twentyseventeen-front-page .custom-header,
    .has-header-image.home.blog .custom-header,
    .has-header-video.home.blog .custom-header {
    height: 50vh; /* 75vh */
    }
    .has-header-image .custom-header-media img,
    .has-header-video .custom-header-media video,
    .has-header-video .custom-header-media iframe {
    position: absolute; /* fixed */
    }

    @media screen and (min-width: 48em) {
    .has-header-image.twentyseventeen-front-page .custom-header,
    .has-header-video.twentyseventeen-front-page .custom-header,
    .has-header-image.home.blog .custom-header,
    .has-header-video.home.blog .custom-header {
    height: auto;
    }
    .twentyseventeen-front-page.has-header-image .custom-header-media,
    .twentyseventeen-front-page.has-header-video .custom-header-media,
    .home.blog.has-header-image .custom-header-media,
    .home.blog.has-header-video .custom-header-media {
    height: 75vh; /* 100vh */
    }
    }

    トピック投稿者 sacky

    (@sacky)

    7年、 5ヶ月前

    ●mtaincさん

    何度もお付き合い頂きまして、ありがとうございます！
    教えて頂きました箇所修正で、無事に調整が出来ました~。

    vhという単位について知らなかったので、もう少し調べてみたいと思います。

    あと、「inc/custom-header.php」の中に下記のような箇所があったので、
    こちらも関係してそうですよね…。

    add_theme_support( ‘custom-header’, apply_filters( ‘twentyseventeen_custom_header_args’, array(
    ‘default-image’ => get_parent_theme_file_uri( ‘/assets/images/header.jpg’ ),
    ‘width’ => 2000,
    ‘height’ => 1200,
    ‘flex-height’ => true,
    ‘video’ => true,
    ‘wp-head-callback’ => ‘twentyseventeen_header_style’,
    ) ) );

    トピック投稿者 sacky

    (@sacky)

    7年、 5ヶ月前

    解決済みにするのが抜けておりました。
    申し訳ありません。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「ヘッダー画像のサイズを変更したい」には新たに返信することはできません。