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つのカスタマイズを、一つの子テーマとしてダウンロードできます。

    フロントページ ヘッダー画像を、固定ページ、投稿ページのヘッダー画像と同じサイズに変更する場合は、そのまま利用してください。

    フロントページ ヘッダー画像高さを変更する場合は、functions.php 内の 10 ~ 17 行目を削除してください。

“twentyseventeen カスタマイズ【フロントページのヘッダー画像 高さ 変更】” への1件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です