テキスト側のカラムは、好きなブロックを追加できる。
幅広か全幅のクラスが付く。
モバイルで重ねた場合は、左カラムが上に来る。
デフォルト表示
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="wp-block-media-text alignwide">
<figure class="wp-block-media-text__media">
<img src="example.jpg" alt="" class="wp-image-{ID}">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">テキスト</p>
</div>
</div>
自動で幅広になる
文字サイズ「大」がデフォルト
左右入れ替え
左右入れ替えはツールバーから行う。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="wp-block-media-text alignwide has-media-on-the-right">
<figure class="wp-block-media-text__media">
<img src="example.jpg" alt="" class="wp-image-{ID}">
</figure>
<div class="wp-block-media-text__content">
<p class="has-large-font-size">テキスト</p>
</div>
</div>
ブロック設定パネル
メディアと文章の設定
モバイルで重ねる(.is-stacked-on-mobile)
カラム全体を塗りつぶすように画像を切り抜く(.is-image-fill)
色設定
色設定は背景色のみ
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
垂直配置を変更
カラムのツールーバーから変更
縦位置を上に | .is-vertically-aligned-top |
縦位置を中央に | .is-vertically-aligned-center |
縦位置を下に | .is-vertically-aligned-bottom |
<div class="wp-block-media-text alignwide is-vertically-aligned-top">
スタイル設定
標準スタイル
.wp-block-media-text {
display: -ms-grid;
display: grid;
-ms-grid-rows: auto;
grid-template-rows: auto;
-ms-grid-columns: 50% 1fr;
grid-template-columns:50% 1fr
}
.wp-block-media-text .has-media-on-the-right {
-ms-grid-columns: 1fr 50%;
grid-template-columns:1fr 50%
}
.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media {
-ms-grid-row-align: start;
align-self:start
}
.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media, .wp-block-media-text .wp-block-media-text__content, .wp-block-media-text .wp-block-media-text__media {
-ms-grid-row-align: center;
align-self:center
}
.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, .wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media {
-ms-grid-row-align: end;
align-self:end
}
.wp-block-media-text .wp-block-media-text__media {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row: 1;
margin:0
}
.wp-block-media-text .wp-block-media-text__content {
word-break: break-word;
padding:0 8%
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media, .wp-block-media-text .wp-block-media-text__content {
-ms-grid-column: 2;
grid-column: 2;
-ms-grid-row: 1;
grid-row:1
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row:1
}
.wp-block-media-text > figure > img, .wp-block-media-text > figure > video {
max-width: unset;
width: 100%;
vertical-align:middle
}
.wp-block-media-text.is-image-fill figure {
height: 100%;
min-height: 250px;
background-size:cover
}
.wp-block-media-text.is-image-fill figure > img {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border:0
}
@media (max-width: 600px) {
.wp-block-media-text.is-stacked-on-mobile {
-ms-grid-columns: 100% !important;
grid-template-columns:100% !important
}
.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row:1
}
.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media, .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 2;
grid-row:2
}
.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
-ms-grid-column: 1;
grid-column: 1;
-ms-grid-row: 1;
grid-row:1
}
}
ブロック制御コメント
<!-- wp:media-text {"mediaId":232,"mediaType":"image"} -->
<!-- /wp:media-text -->
<!-- wp:media-text {"mediaPosition":"right","mediaId":227,"mediaType":"image"} -->
<!-- /wp:media-text -->
<!-- wp:media-text {"backgroundColor":"very-light-gray","mediaId":234,"mediaType":"image","isStackedOnMobile":true,"imageFill":true} -->
<!-- /wp:media-text -->