===wordpressのカスタマイズ (2)===

 =====高さの調整=====
 PC用
 .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: 1200px;
 height: 100vh;
 max-height: 100%;
 overflow: hidden;
 }
 のmax-height: 100%;を300pxへ
 これで高さ300pxになりますが、画像の位置調整が必要になるかも?
 その場合
 style.cssの1730行目あたり
 
 @supports ( object-fit: cover ) {
 .has-header-image .custom-header-media img,
 .has-header-video .custom-header-media video,
 .has-header-video .custom-header-media iframe,
 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
 height: 100%;
 left: 0;
 -o-object-fit: cover;
 object-fit: cover;
 top: 0;
 -ms-transform: none;
 -moz-transform: none;
 -webkit-transform: none;
 transform: none;
 width: 100%;
 }
 }
 のheight: 100%;を500pxとかに変更して調整(数値はお好みで)
 
 あと以下も調整
 style.cssの1674行目あたり
 .has-header-image .custom-header-media img,
 .has-header-video .custom-header-media video,
 .has-header-video .custom-header-media iframe {
 position: fixed;
 height: auto;
 left: 50%;
 max-width: 1000%;
 min-height: 100%;
 min-width: 100%;
 min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
 width: auto;
 top: 50%;
 padding-bottom: 1px; /* Prevent header from extending beyond the footer */
 -ms-transform: translateX(-50%) translateY(-50%);
 -moz-transform: translateX(-50%) translateY(-50%);
 -webkit-transform: translateX(-50%) translateY(-50%);
 transform: translateX(-50%) translateY(-50%);
 }
 のmin-height: 100%;を100pxとかに変更して調整(数値はお好みで)

コメントを残す

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

CAPTCHA