X-T9でスライドショーの画像の縦幅を広げたい
-
こんにちは。
メインビジュアルの画像をクリックして選択 -> 画像の下部分でマウスカーソルが変わるところで、ドラック&ドロップで下方向に向かって広げて、最後に「保存」ボタンをクリックすれば、縦幅(高さ)を大きくすることができました。
Yukinobu Asakawa(@yukinobu) さん、レスありがとうございました。
すみません、ちょっとやり方がわからないのですが。
テーマのバージョンは1.30.0で、子テーマを利用しています。
現在触っているのはテンプレートの子テーマのフロントページを触っています。
ここで、画像をクリックしても、下の方にカーソルの形が変化するところは現れないのですが。
もう少し詳しくやり方を教えていただけませんか。よろしくお願いします。再現テストはできていないので、画像から判断します。
カバーブロックをお使いになっている、あるいはスライダーアイテムに背景画像を設定されているのだと思います。
この2つは、手前に載っているものの高さによって表示される領域が変わります。
そして、上記画像の中で私が黄色の枠で囲んだものは、おそらく「スペーサーブロック」。
このスペーサーブロックの高さを調節してみてください。
画像の高さも、それに合わせて変わります。(違ったらすみません!)
(そして @yukinobu さん、横からすみません<(_ _)>)
瀬戸内ことり (Setouchi Kotori)(@setouchikotori)さん
いつもありがとうございます。
教えて頂いたとおり、その部分は背景画像になっていました。また、レスポンシブスペーサーになっていたのでその部分を広げたら、編集画面では広がるようになりました。しかし、実際のページでは、今までと同じでした。どこが悪いのでしょうか?よろしくお願いします。試しに、レスポンシブスペーサーを上にもう1つ、下にもう1つ置いてみてください。広がるのではないかなと!
瀬戸内ことり (Setouchi Kotori)(@setouchikotori)さん
いつもありがとうございます。
教えて頂いたとおり、レスポンシブスペーサーを上下に1つずつ追加したのですが、やはり、編集画面では広がっていますが、実際のページでは、今までと同じでした。どこが悪いのでしょうか?よろしくお願いします。あれ。残念。
すみません。では、スライダーブロック全体のコードをご共有いただけますか。
瀬戸内ことり (Setouchi Kotori)(@setouchikotori)さん
いつもありがとうございます。よろしくお願いします。
画像ではなくコードが欲しいです。
手元での再現・検証のためです。画像からだと、それぞれの詳細設定が読み取れません。
よろしくお願いいたします。
瀬戸内ことり (Setouchi Kotori)(@setouchikotori)さん
いつもありがとうございます。ちょっとやり方がわからないのですが、ページの白紙で右クリック、ソースコードを表示でそれをコピペしたら良いのでしょうか。あるいは、他のやり方が必要でしょうか。
https://setouchi-kotori.com/copy-and-share-html/
撮りました。
参考になさってください。左側の「ドキュメント概観」で「スライダーブロック全体」の HTML をご共有ください。
瀬戸内ことり (Setouchi Kotori)(@setouchikotori)さん
いつもありがとうございます。なるほど。
<!-- wp:vk-blocks/slider {"unit":"rem","autoPlay":false,"width":"full","loop":false,"blockId":"6b08647c-eea8-4d2d-a089-4e01306e10b1","metadata":{"categories":["wp-textbook-material"],"patternName":"%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%80%e3%83%bc","name":"スライダー 素材"},"className":"vk_block-margin-0\u002d\u002dmargin-top .slider-container { height: 600px; /* 希望の高さに調整 */ }"} -->
<div class="wp-block-vk-blocks-slider swiper swiper-container vk_slider vk_slider_6b08647c-eea8-4d2d-a089-4e01306e10b1 alignfull vk_block-margin-0--margin-top .slider-container { height: 600px; /* 希望の高さに調整 */ }" data-vkb-slider="{"autoPlay":false,"autoPlayStop":false,"autoPlayDelay":2500,"pagination":"bullets","blockId":"6b08647c-eea8-4d2d-a089-4e01306e10b1","width":"full","loop":false,"effect":"slide","speed":500,"slidesPerViewMobile":1,"slidesPerViewTablet":1,"slidesPerViewPC":1,"slidesPerGroup":"one-by-one","centeredSlides":false}"><div class="swiper-wrapper"><!-- wp:vk-blocks/slider-item {"bgColor":"bg-primary","bgImage":"http://localhost:10010/wp-content/uploads/2025/01/Top01.jpg","bgImageTablet":"http://localhost:10010/wp-content/uploads/2025/01/Top01.jpg","bgImageMobile":"http://localhost:10010/wp-content/uploads/2025/01/Top01.jpg","opacity":0.3,"bgSize":"cover","blockId":"6393a0ec-0b11-4145-93fa-ca8032985873","style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"var:preset|spacing|90","right":"var:preset|spacing|90"}}}} -->
<div class="wp-block-vk-blocks-slider-item vk_slider_item swiper-slide vk_valign-center vk_slider_item-6393a0ec-0b11-4145-93fa-ca8032985873 is-layout-constrained vk_slider_item-paddingVertical-none" style="padding-top:0;padding-right:var(--wp--preset--spacing--90);padding-bottom:0;padding-left:var(--wp--preset--spacing--90)"><style>
@media screen and (max-width: 575.98px) {
.vk_slider_item-6393a0ec-0b11-4145-93fa-ca8032985873{background-image: url(http://localhost:10010/wp-content/uploads/2025/01/Top01.jpg); background-size:cover!important; background-position:center!important;}
}
@media screen and (min-width: 576px) {
.vk_slider_item-6393a0ec-0b11-4145-93fa-ca8032985873{background-image: url(http://localhost:10010/wp-content/uploads/2025/01/Top01.jpg); background-size:cover!important; background-position:center!important;}
}
@media screen and (min-width: 992px) {
.vk_slider_item-6393a0ec-0b11-4145-93fa-ca8032985873{background-image: url(http://localhost:10010/wp-content/uploads/2025/01/Top01.jpg); background-size:cover!important; background-position:center!important;}
}
</style><div class="vk_slider_item-background-area has-background has-bg-primary-background-color has-background-dim has-background-dim-3" style="padding-left:0;padding-right:0"></div><div class="vk_slider_item_container container"><!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom","className":"vk_block-margin-xxl\u002d\u002dmargin-bottom vk_block-margin-xxl\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_block-margin-xxl--margin-bottom vk_block-margin-xxl--margin-top"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer -->
<!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom","className":"vk_block-margin-xxl\u002d\u002dmargin-bottom vk_block-margin-xxl\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_block-margin-xxl--margin-bottom vk_block-margin-xxl--margin-top"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer -->
<!-- wp:heading {"textAlign":"center","className":"is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-xs\u002d\u002dmargin-bottom"} -->
<h2 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-top vk_block-margin-xs--margin-bottom" id="コンセプトやキャッチコピー-1"></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"vk_block-margin-sm\u002d\u002dmargin-bottom vk_block-margin-xs\u002d\u002dmargin-top"} -->
<p class="has-text-align-center vk_block-margin-sm--margin-bottom vk_block-margin-xs--margin-top">スライドテキストスライドテキストスライドテキストスライドテキスト</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"fontSize":"small","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons has-custom-font-size has-small-font-size"><!-- wp:button {"className":"is-style-outline","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button" href="/gallery/" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">詳しくはこちら</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom","className":"vk_block-margin-xxl\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_block-margin-xxl--margin-top"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer -->
<!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom","className":"vk_block-margin-xxl\u002d\u002dmargin-bottom vk_block-margin-xxl\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_block-margin-xxl--margin-bottom vk_block-margin-xxl--margin-top"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer --></div></div>
<!-- /wp:vk-blocks/slider-item -->
<!-- wp:vk-blocks/slider-item {"bgColor":"black","bgImage":"http://localhost:10010/wp-content/uploads/2025/01/Top02.jpg","bgImageTablet":"http://localhost:10010/wp-content/uploads/2025/01/Top02.jpg","bgImageMobile":"http://localhost:10010/wp-content/uploads/2025/01/Top02.jpg","opacity":0.7,"bgSize":"cover","blockId":"cba590e1-b7a7-4705-aebb-2abf05c56751","style":{"spacing":{"padding":{"left":"0","right":"0"}}}} -->
<div class="wp-block-vk-blocks-slider-item vk_slider_item swiper-slide vk_valign-center vk_slider_item-cba590e1-b7a7-4705-aebb-2abf05c56751 is-layout-constrained vk_slider_item-paddingVertical-none" style="padding-right:0;padding-left:0"><style>
@media screen and (max-width: 575.98px) {
.vk_slider_item-cba590e1-b7a7-4705-aebb-2abf05c56751{background-image: url(http://localhost:10010/wp-content/uploads/2025/01/Top02.jpg); background-size:cover!important; background-position:center!important;}
}
@media screen and (min-width: 576px) {
.vk_slider_item-cba590e1-b7a7-4705-aebb-2abf05c56751{background-image: url(http://localhost:10010/wp-content/uploads/2025/01/Top02.jpg); background-size:cover!important; background-position:center!important;}
}
@media screen and (min-width: 992px) {
.vk_slider_item-cba590e1-b7a7-4705-aebb-2abf05c56751{background-image: url(http://localhost:10010/wp-content/uploads/2025/01/Top02.jpg); background-size:cover!important; background-position:center!important;}
}
</style><div class="vk_slider_item-background-area has-background has-black-background-color has-background-dim has-background-dim-7" style="padding-left:0;padding-right:0"></div><div class="vk_slider_item_container container"><!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom","className":"vk_block-margin-xxl\u002d\u002dmargin-bottom vk_block-margin-xxl\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_block-margin-xxl--margin-bottom vk_block-margin-xxl--margin-top"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer -->
<!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom","className":"vk_block-margin-xxl\u002d\u002dmargin-bottom vk_block-margin-xxl\u002d\u002dmargin-top"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer vk_block-margin-xxl--margin-bottom vk_block-margin-xxl--margin-top"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer -->
<!-- wp:heading {"textAlign":"center","className":"is-style-vk-heading-plain vk_block-margin-0\u002d\u002dmargin-top vk_block-margin-xs\u002d\u002dmargin-bottom","textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center is-style-vk-heading-plain vk_block-margin-0--margin-top vk_block-margin-xs--margin-bottom has-white-color has-text-color" id="コンセプトやキャッチコピー-1"><strong><strong>スライドタイトル</strong></strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"vk_block-margin-sm\u002d\u002dmargin-bottom vk_block-margin-xs\u002d\u002dmargin-top","textColor":"white"} -->
<p class="has-text-align-center vk_block-margin-sm--margin-bottom vk_block-margin-xs--margin-top has-white-color has-text-color"><meta charset="utf-8">スライドテキストスライドテキストスライドテキストスライドテキスト</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"fontSize":"small","layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons has-custom-font-size has-small-font-size"><!-- wp:button {"textColor":"white","className":"is-style-outline","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" href="/school/" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">詳しくはこちら</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer -->
<!-- wp:vk-blocks/spacer {"unit":"rem","pc":4,"tablet":3,"mobile":2,"spaceSize":"custom"} -->
<div class="wp-block-vk-blocks-spacer vk_spacer"><div class="vk_spacer-display-pc" style="margin-top:4rem"></div><div class="vk_spacer-display-tablet" style="margin-top:3rem"></div><div class="vk_spacer-display-mobile" style="margin-top:2rem"></div></div>
<!-- /wp:vk-blocks/spacer --></div></div>
<!-- /wp:vk-blocks/slider-item --></div><div class="swiper-button-next swiper-button-mobile-bottom"></div><div class="swiper-button-prev swiper-button-mobile-bottom"></div><div class="swiper-pagination swiper-pagination-bullets"></div></div>
<!-- /wp:vk-blocks/slider -->これでいいですかね。よろしくお願いします。
スライダーの親を選択してください。
―
すると右側に高さ調整のできる項目が表示されます。
―
スライダーですから、複数の子要素 (スライダーアイテム) は背景画像の高さが均一でないとならない。だから、子要素ひとつひとつの高さを調整できるようにはなっておらず (必要ない)、親要素で調整するよう設定されているのかなと。
見つけ方というか、考え方というか・・・
「子要素では設定が変えられない (反映されない)。ということは、もしかしたら親要素で設定するのかもしれない」というふうに考えて、ブロックの選択範囲を変えつつ全体を観察されるといいかもしれません。
瀬戸内ことり (Setouchi Kotori)(@setouchikotori)さん
いつもありがとうございます。無事出来ました。考え方を教えて頂きありがとうございました。まだ、ブロック編集というのになれなくて。どうもありがとうございました。
解決してよかったです^^
- このトピックに返信するにはログインが必要です。