デフォルト表示
<figure class="wp-block-image size-large">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
<figcaption>キャプション</figcaption>
</figure>
幅広
<figure class="wp-block-image alignwide size-large">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
<figcaption>キャプション</figcaption>
</figure>
全幅
<figure class="wp-block-image alignfull size-large">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
<figcaption>キャプション</figcaption>
</figure>
左揃え
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
<div class="entry-content">
<div class="wp-block-image">
<figure class="alignleft size-thumbnail">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
<figcaption>左揃え</figcaption>
</figure>
</div>
<p>あのイーハトーヴォの〜〜〜〜</p>
</div>
中央揃え
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
<div class="entry-content">
<div class="wp-block-image">
<figure class="aligncenter size-medium">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
<figcaption>中央揃え</figcaption>
</figure>
</div>
<p>あのイーハトーヴォの〜〜〜〜</p>
</div>
右揃え
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
山路を登りながら、こう考えた。智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。住みにくさが高じると、安い所へ引き越したくなる。どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
<div class="entry-content">
<div class="wp-block-image">
<figure class="alignright size-thumbnail">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
<figcaption>左揃え</figcaption>
</figure>
</div>
<p>あのイーハトーヴォの〜〜〜〜</p>
</div>
画像ツールバー
リンク(URL指定 / メディアファイル / 添付ファイルのページ)
添付ファイルのページは、attachment.php
が読み込まれる。
添付ファイルのページでは、メディア管理のタイトルがページタイトル(H1)に表示され、説明がに入る。
ブロック設定パネル
スタイル設定
指定なし | (なし) |
デフォルト | .is-style-default |
丸型 | .is-style-circle-mask |
高度な設定にクラス名入る
<figure class="wp-block-image size-thumbnail is-style-circle-mask">
<img src="example.jpg" alt="代替テキスト" class="wp-image-{ID}">
</figure>
画像設定
Altテキスト(代替テキスト)
画像サイズ(クラスは別表)
画像の寸法 (幅と高さのpx指定 / 25%,50%,75%,100%)
画像サイズ | figureに付くクラス名 |
---|---|
サムネイル | .size-thumbnail |
中 | .size-medium |
大 | .size-large |
フルサイズ | .size-full |
スタイル設定
標準スタイル
.wp-block-image {
max-width: 100%;
margin-bottom:1em
}
.wp-block-image img {
max-width:100%
}
.wp-block-image.aligncenter {
text-align:center
}
.wp-block-image.alignfull img, .wp-block-image.alignwide img {
width:100%
}
.wp-block-image .aligncenter, .wp-block-image .alignleft, .wp-block-image .alignright, .wp-block-image.is-resized {
display: table;
margin-left: 0;
margin-right:0
}
.wp-block-image .aligncenter > figcaption, .wp-block-image .alignleft > figcaption, .wp-block-image .alignright > figcaption, .wp-block-image.is-resized > figcaption {
display: table-caption;
caption-side:bottom
}
.wp-block-image .alignleft {
float: left;
margin-right:1em
}
.wp-block-image .alignright {
float: right;
margin-left:1em
}
.wp-block-image .aligncenter {
margin-left: auto;
margin-right:auto
}
.wp-block-image figcaption {
margin-top: .5em;
margin-bottom:1em
}
.is-style-circle-mask img {
border-radius:9999px
}
.blocks-gallery-caption, .wp-block-embed figcaption, .wp-block-image figcaption {
color: #555d66;
font-size: 13px;
text-align:center
}
例)追加スタイルサンプル
幅広(.alignwide)と全幅(.alignfull)のクラスは準備されてないため、自前で用意する。
全幅は、複数カラムある場合要注意。
幅広は、ガターのスペースに注意。
このCSS指定では、メディアと文章ブロックなどにも影響するため、.wp-block-image.alignwide
を指定したほうが良い。
.alignwide,
.alignfull {
position: relative;
left: 50%;
width: 100vw;
max-width: 100vw;
margin-left: -50vw;
}
@media screen and (min-width: 768px) {
.alignwide {
left: 0;
width: auto;
max-width: calc( 100vw - 160px);
margin: 16px -50px 0 -50px;
}
.alignfull {
margin-left: calc( 50% - 50vw) ;
/* サイトによって最後の84pxの所で微調整
margin: 0 calc( ( 50% - 50vw ) - 84px ) ;
*/
}
}
ブロック制御コメント
<!-- wp:image {"id":227,"sizeSlug":"large"} -->
<!-- /wp:image -->
<!-- wp:image {"align":"wide","id":230,"sizeSlug":"large"} -->
<!-- /wp:image -->
<!-- wp:image {"align":"full","id":235,"sizeSlug":"large"} -->
<!-- /wp:image -->
<!-- wp:image {"align":"left","id":223,"sizeSlug":"thumbnail"} -->
<!-- /wp:image -->
<!-- wp:image {"align":"center","id":233,"width":300,"height":200,"sizeSlug":"medium"} -->
<!-- /wp:image -->
<!-- wp:image {"align":"right","id":224,"sizeSlug":"thumbnail"} -->
<!-- /wp:image -->
<!-- wp:image {"id":223,"sizeSlug":"medium","className":"is-style-circle-mask"} -->
<!-- /wp:image -->