twentyseventeen カスタマイズ【フロントページのヘッダー画像 高さ 変更】

ワードプレス オリジナルテーマ twentyseventeen の、フロントページの大きな画像を変更する二つの方法をご紹介します。

• フロントページ ヘッダー画像を、固定ページ、投稿ページのヘッダー画像と同じサイズに変更

  子テーマの functionss.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;
  }
  

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

• フロントページ ヘッダー画像高さを変更

  子テーマの style.css に下の設定を追加する。
  設定は、一例です。お好みに合わせて height 設定値を変更してください。

  .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 */
    }
  }
  

• ダウンロードファイル

  上記記載の2つのカスタマイズを、一つの子テーマとしてダウンロードできます。

  このカスタマイズをダウンロード

  ご注意

  スタイルシートを変更して、表示を確認する場合、変更内容が、正しく表示されない可能性があります。他のブラウザを使用するか、Chrome のシークレットウインドウを利用して確認されることをお勧めします。