カバー – Block Editor 検証

Contents

デフォルト表示
- パララックス
- 写真無し
ブロック設定パネル
- 見出し部分
スタイル設定
- 標準スタイル
ブロック制御コメント
WAF解除

デフォルト表示

メッセージ

<div class="wp-block-cover has-background-dim" style="background-image:url(example.jpg)">
	<div class="wp-block-cover__inner-container">
		<p class="has-text-align-center has-{SIZE}-font-size (has-background has-very-{COLOR-NAME}-background-color)">メッセージ</p>
	</div>
</div>

パララックス

メッセージ

<div class="wp-block-cover has-background-dim has-parallax" style="background-image:url(example.jpg)">
	<div class="wp-block-cover__inner-container">
		<p class="has-text-align-center has-{SIZE}-font-size (has-background has-very-{COLOR-NAME}-background-color)">メッセージ</p>
	</div>
</div>

写真無し

メッセージ

<div class="wp-block-cover has-{COLOR-NAME}-cyan-background-color has-background-dim">
	<div class="wp-block-cover__inner-container">
		<p class="has-text-align-center has-{SIZE}-font-size (has-background has-very-{COLOR-NAME}-background-color)">メッセージ</p>
	</div>
</div>

ブロック設定パネル

高度な設定

メディア設定
固定背景（.has-parallax）
焦点ピッカーで、background-positionを%指定

サイズ
最小の高さを指定。（min-height）

オーバーレイ
色と透過率

見出し部分

文字部分は通常の段落と同じ
文字サイズは、デフォルトで大（36px）になる。

スタイル設定

標準スタイル

.wp-block-cover, .wp-block-cover-image {
    position: relative;
    background-color: #000;
    background-size: cover;
    background-position: 50%;
    min-height: 430px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden
}

.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
    background-attachment:fixed
}

@supports (-webkit-overflow-scrolling: touch) {
    .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
        background-attachment:scroll
    }
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
        background-attachment:scroll
    }
}

.wp-block-cover-image.has-background-dim:before, .wp-block-cover.has-background-dim:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: inherit;
    opacity: .5;
    z-index:1
}

.wp-block-cover-image.has-background-dim.has-background-dim-10:before, .wp-block-cover.has-background-dim.has-background-dim-10:before {
    opacity:.1
}

.wp-block-cover-image.has-background-dim.has-background-dim-20:before, .wp-block-cover.has-background-dim.has-background-dim-20:before {
    opacity:.2
}

.wp-block-cover-image.has-background-dim.has-background-dim-30:before, .wp-block-cover.has-background-dim.has-background-dim-30:before {
    opacity:.3
}

.wp-block-cover-image.has-background-dim.has-background-dim-40:before, .wp-block-cover.has-background-dim.has-background-dim-40:before {
    opacity:.4
}

.wp-block-cover-image.has-background-dim.has-background-dim-50:before, .wp-block-cover.has-background-dim.has-background-dim-50:before {
    opacity:.5
}

.wp-block-cover-image.has-background-dim.has-background-dim-60:before, .wp-block-cover.has-background-dim.has-background-dim-60:before {
    opacity:.6
}

.wp-block-cover-image.has-background-dim.has-background-dim-70:before, .wp-block-cover.has-background-dim.has-background-dim-70:before {
    opacity:.7
}

.wp-block-cover-image.has-background-dim.has-background-dim-80:before, .wp-block-cover.has-background-dim.has-background-dim-80:before {
    opacity:.8
}

.wp-block-cover-image.has-background-dim.has-background-dim-90:before, .wp-block-cover.has-background-dim.has-background-dim-90:before {
    opacity:.9
}

.wp-block-cover-image.has-background-dim.has-background-dim-100:before, .wp-block-cover.has-background-dim.has-background-dim-100:before {
    opacity:1
}

.wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.alignleft, .wp-block-cover.alignright {
    max-width: 305px;
    width:100%
}

.wp-block-cover-image:after, .wp-block-cover:after {
    display: block;
    content: "";
    font-size: 0;
    min-height:inherit
}

@supports ((position: -webkit-sticky) or(position: sticky)) {
    .wp-block-cover-image:after, .wp-block-cover:after {
        content:none
    }
}

.wp-block-cover-image.aligncenter, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright, .wp-block-cover.aligncenter, .wp-block-cover.alignleft, .wp-block-cover.alignright {
    display:flex
}

.wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container {
    width: calc(100% - 70px);
    z-index: 1;
    color:#f8f9f9
}

.wp-block-cover-image .wp-block-subhead:not(.has-text-color), .wp-block-cover-image h1:not(.has-text-color), .wp-block-cover-image h2:not(.has-text-color), .wp-block-cover-image h3:not(.has-text-color), .wp-block-cover-image h4:not(.has-text-color), .wp-block-cover-image h5:not(.has-text-color), .wp-block-cover-image h6:not(.has-text-color), .wp-block-cover-image p:not(.has-text-color), .wp-block-cover .wp-block-subhead:not(.has-text-color), .wp-block-cover h1:not(.has-text-color), .wp-block-cover h2:not(.has-text-color), .wp-block-cover h3:not(.has-text-color), .wp-block-cover h4:not(.has-text-color), .wp-block-cover h5:not(.has-text-color), .wp-block-cover h6:not(.has-text-color), .wp-block-cover p:not(.has-text-color) {
    color:inherit
}

.wp-block-cover__video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    z-index: 0;
    -o-object-fit: cover;
    object-fit:cover
}

.wp-block-cover-image-text, .wp-block-cover-text, section.wp-block-cover-image h2 {
    color:#fff
}

.wp-block-cover-image-text a, .wp-block-cover-image-text a:active, .wp-block-cover-image-text a:focus, .wp-block-cover-image-text a:hover, .wp-block-cover-text a, .wp-block-cover-text a:active, .wp-block-cover-text a:focus, .wp-block-cover-text a:hover, section.wp-block-cover-image h2 a, section.wp-block-cover-image h2 a:active, section.wp-block-cover-image h2 a:focus, section.wp-block-cover-image h2 a:hover {
    color:#fff
}

.wp-block-cover-image .wp-block-cover.has-left-content {
    justify-content:flex-start
}

.wp-block-cover-image .wp-block-cover.has-right-content {
    justify-content:flex-end
}

.wp-block-cover-image.has-left-content .wp-block-cover-image-text, .wp-block-cover.has-left-content .wp-block-cover-text, section.wp-block-cover-image.has-left-content > h2 {
    margin-left: 0;
    text-align:left
}

.wp-block-cover-image.has-right-content .wp-block-cover-image-text, .wp-block-cover.has-right-content .wp-block-cover-text, section.wp-block-cover-image.has-right-content > h2 {
    margin-right: 0;
    text-align:right
}

.wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, section.wp-block-cover-image > h2 {
    font-size: 2em;
    line-height: 1.25;
    z-index: 1;
    margin-bottom: 0;
    max-width: 610px;
    padding: 14px;
    text-align: center
}

ブロック制御コメント

<!-- wp:cover {"url":"https://be.wpqw.jp/wp/wp-content/uploads/2019/12/sample07.jpg","id":229} -->
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://be.wpqw.jp/wp/wp-content/uploads/2019/12/sample07.jpg","id":229,"hasParallax":true} -->
<!-- /wp:cover -->

<!-- wp:cover {"overlayColor":"luminous-vivid-amber"} -->
<!-- /wp:cover -->

WAF解除

SiteGuard_User_ExcludeSig xss-style-8