フォーラムへの返信
-
すみません、私もちょうど背景テキストの不透明度のエラーに気がついたところだったので、便乗させていただきます。
背景テキストの不透明度の設定値が、0.1から0.9までは問題ないのですが、1にすると0.2になるようです。
.smb-section__background-text__text { opacity: var(--smb-section--background-text-opacity); } .smb-section { --smb-section--background-text-opacity: 0.2; }同じ意味合いのお話かと思いますが、ご確認いただけますと幸いです。よろしくお願いいたします。
いいねをした人:キタジマさん
お世話になっております。本件について、実際に組み込んでいる中で気付いたことがあるので追記いたします。
コンテンツスライダーのスライドを複数設定した状態で、次にスライドさせたり自動再生させたりすると、途中のスライドが全体が左に少しずれて表示されるようです。
サンプルのブロックを下記に示します。このコードはパネルの場合ですが、画像のみにしても同様の状態になりました。
お手すきの折にもご確認のほど、よろしくお願いいたします。
<!-- wp:snow-monkey-blocks/spider-contents-slider {"dots":true,"arrows":true,"interval":4,"duration":2,"lgSlidesToShow":2,"mdSlidesToShow":2,"canvasPadding":{"top":10,"bottom":10,"right":10,"left":10},"sliderClientIds":"[\u002209ef8a63-1b03-41b2-9474-e88097a2cd41\u0022,\u0022cba0c984-4e09-4c02-8447-c004e3d277ad\u0022,\u002238703ca1-424b-4204-9b01-33c6574a755e\u0022,\u002239ba472d-71cb-4cea-aa17-9b480b51cf2e\u0022,\u0022d5f94944-ec81-47e6-8e54-6c20553175d6\u0022,\u00225f736a39-d1b5-4bed-83d6-484394430e7d\u0022]"} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider smb-spider-slider smb-spider-contents-slider" data-fade="false" data-interval="4000" data-duration="2000" data-lg-slide-to-show="2" data-md-slide-to-show="2"> <div class="spider"> <div class="spider__canvas" style="padding: 10px;"> <!-- wp:snow-monkey-blocks/spider-contents-slider-item {"boxShadow":{"color":"#000000","opacity":0.1,"blur":10,"position":""}} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" style="--smb-spider-contents-slider--slide-border-radius: 0px; --smb-spider-contents-slider--slide-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);" data-id="0"> <div class="smb-spider-contents-slider__item"> <!-- wp:snow-monkey-blocks/panels {"lg":1} --> <div class="wp-block-snow-monkey-blocks-panels smb-panels" data-image-padding="false"> <div class="c-row c-row--fill c-row--margin" data-columns="1" data-md-columns="1" data-lg-columns="1"> <!-- wp:snow-monkey-blocks/panels-item --> <div class="wp-block-snow-monkey-blocks-panels-item c-row__col"> <div class="smb-panels__item"> <div class="smb-panels__item__body"> <div class="smb-panels__item__title">タイトル</div> <div class="smb-panels__item__content">内容</div> </div> </div> </div> <!-- /wp:snow-monkey-blocks/panels-item --> </div> </div> <!-- /wp:snow-monkey-blocks/panels --> </div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider-item --> <!-- wp:snow-monkey-blocks/spider-contents-slider-item {"boxShadow":{"color":"#000000","opacity":0.1,"blur":10,"position":""}} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" style="--smb-spider-contents-slider--slide-border-radius: 0px; --smb-spider-contents-slider--slide-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);" data-id="1"> <div class="smb-spider-contents-slider__item"> <!-- wp:snow-monkey-blocks/panels {"lg":1} --> <div class="wp-block-snow-monkey-blocks-panels smb-panels" data-image-padding="false"> <div class="c-row c-row--fill c-row--margin" data-columns="1" data-md-columns="1" data-lg-columns="1"> <!-- wp:snow-monkey-blocks/panels-item --> <div class="wp-block-snow-monkey-blocks-panels-item c-row__col"> <div class="smb-panels__item"> <div class="smb-panels__item__body"> <div class="smb-panels__item__title">タイトル</div> <div class="smb-panels__item__content">内容</div> </div> </div> </div> <!-- /wp:snow-monkey-blocks/panels-item --> </div> </div> <!-- /wp:snow-monkey-blocks/panels --> </div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider-item --> <!-- wp:snow-monkey-blocks/spider-contents-slider-item {"boxShadow":{"color":"#000000","opacity":0.1,"blur":10,"position":""}} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" style="--smb-spider-contents-slider--slide-border-radius: 0px; --smb-spider-contents-slider--slide-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);" data-id="2"> <div class="smb-spider-contents-slider__item"> <!-- wp:snow-monkey-blocks/panels {"lg":1} --> <div class="wp-block-snow-monkey-blocks-panels smb-panels" data-image-padding="false"> <div class="c-row c-row--fill c-row--margin" data-columns="1" data-md-columns="1" data-lg-columns="1"> <!-- wp:snow-monkey-blocks/panels-item --> <div class="wp-block-snow-monkey-blocks-panels-item c-row__col"> <div class="smb-panels__item"> <div class="smb-panels__item__body"> <div class="smb-panels__item__title">タイトル</div> <div class="smb-panels__item__content">内容</div> </div> </div> </div> <!-- /wp:snow-monkey-blocks/panels-item --> </div> </div> <!-- /wp:snow-monkey-blocks/panels --> </div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider-item --> <!-- wp:snow-monkey-blocks/spider-contents-slider-item {"boxShadow":{"color":"#000000","opacity":0.1,"blur":10,"position":""}} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" style="--smb-spider-contents-slider--slide-border-radius: 0px; --smb-spider-contents-slider--slide-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);" data-id="3"> <div class="smb-spider-contents-slider__item"> <!-- wp:snow-monkey-blocks/panels {"lg":1} --> <div class="wp-block-snow-monkey-blocks-panels smb-panels" data-image-padding="false"> <div class="c-row c-row--fill c-row--margin" data-columns="1" data-md-columns="1" data-lg-columns="1"> <!-- wp:snow-monkey-blocks/panels-item --> <div class="wp-block-snow-monkey-blocks-panels-item c-row__col"> <div class="smb-panels__item"> <div class="smb-panels__item__body"> <div class="smb-panels__item__title">タイトル</div> <div class="smb-panels__item__content">内容</div> </div> </div> </div> <!-- /wp:snow-monkey-blocks/panels-item --> </div> </div> <!-- /wp:snow-monkey-blocks/panels --> </div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider-item --> <!-- wp:snow-monkey-blocks/spider-contents-slider-item {"boxShadow":{"color":"#000000","opacity":0.1,"blur":10,"position":""}} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" style="--smb-spider-contents-slider--slide-border-radius: 0px; --smb-spider-contents-slider--slide-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);" data-id="4"> <div class="smb-spider-contents-slider__item"> <!-- wp:snow-monkey-blocks/panels {"lg":1} --> <div class="wp-block-snow-monkey-blocks-panels smb-panels" data-image-padding="false"> <div class="c-row c-row--fill c-row--margin" data-columns="1" data-md-columns="1" data-lg-columns="1"> <!-- wp:snow-monkey-blocks/panels-item --> <div class="wp-block-snow-monkey-blocks-panels-item c-row__col"> <div class="smb-panels__item"> <div class="smb-panels__item__body"> <div class="smb-panels__item__title">タイトル</div> <div class="smb-panels__item__content">内容</div> </div> </div> </div> <!-- /wp:snow-monkey-blocks/panels-item --> </div> </div> <!-- /wp:snow-monkey-blocks/panels --> </div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider-item --> <!-- wp:snow-monkey-blocks/spider-contents-slider-item {"boxShadow":{"color":"#000000","opacity":0.1,"blur":10,"position":""}} --> <div class="wp-block-snow-monkey-blocks-spider-contents-slider-item spider__slide" style="--smb-spider-contents-slider--slide-border-radius: 0px; --smb-spider-contents-slider--slide-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);" data-id="5"> <div class="smb-spider-contents-slider__item"> <!-- wp:snow-monkey-blocks/panels {"lg":1} --> <div class="wp-block-snow-monkey-blocks-panels smb-panels" data-image-padding="false"> <div class="c-row c-row--fill c-row--margin" data-columns="1" data-md-columns="1" data-lg-columns="1"> <!-- wp:snow-monkey-blocks/panels-item --> <div class="wp-block-snow-monkey-blocks-panels-item c-row__col"> <div class="smb-panels__item"> <div class="smb-panels__item__body"> <div class="smb-panels__item__title">タイトル</div> <div class="smb-panels__item__content">内容</div> </div> </div> </div> <!-- /wp:snow-monkey-blocks/panels-item --> </div> </div> <!-- /wp:snow-monkey-blocks/panels --> </div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider-item --> </div> <div class="spider__arrows"><button class="spider__arrow" data-direction="prev">Prev</button><button class="spider__arrow" data-direction="next">Next</button></div> </div> <div class="spider__dots"><button class="spider__dot" data-id="0">0</button><button class="spider__dot" data-id="1">1</button><button class="spider__dot" data-id="2">2</button><button class="spider__dot" data-id="3">3</button><button class="spider__dot" data-id="4">4</button><button class="spider__dot" data-id="5">5</button></div> </div> <!-- /wp:snow-monkey-blocks/spider-contents-slider -->いいねをした人:キタジマさん
アップデートし、バリエーションの変換、ボックスシャドウの表示、どちらも問題なく機能していることを確認しました。
トピック閉じておきます。お忙しい中ご対応いただき、ありがとうございました！
いいねをした人:キタジマさん
アップデートし、確認しました！
これ非常にいいですよね。想像以上に利便性が向上したように思います。
トピック閉じておきます。お忙しい中ご対応いただき、ありがとうございました！
いいねをした人:北山さん キタジマさん
この件、コード、CSS等は関係なくて、大きめのロゴを設定しているからではないかな？と思ったのですが、いかがでしょうか。
画像からもロゴを設定されているようですので、私の方でも試したところ、大きめのロゴで似たようになりました。大きめのロゴあり
ロゴなし
なお、最初に上げられていたコードは、特になにもしていない私の環境でも確認できていますので、特に関係ないように思います。
<style type="text/css" media="screen"> html { margin-top: 32px !important; } @media screen and ( max-width: 782px ) { html { margin-top: 46px !important; } } </style>ロゴのサイズを見直したり、削除したりしても変化がないか、ご確認いただければと思います。
いいねをした人:ご確認等々、ありがとうございます！
1つ目のバリエーションの変換について、不具合かも…としてご確認いただけることで、承知しました。
2つ目のシャドウについては、やはり仕様的な問題なのですね。丁寧にありがとうございます。
コンテンツスライダー全体のStylesは確認して間隔調整も見ていたのですが、キタジマさんに言われるまで各スライドにもStylesがあることを見落としていました。
なるほど、ここにシャドウがあるので、それで補えそうですね。ここでパディングをSなどにして試してみると、パネルのシャドウが表示されるようにもなりました。
となると、この部分をCSSで調整するとパネルの方のシャドウもいかせるかも、とも思いますので、適宜よさそうな方で使いたいと思います。最後におっしゃっていただいた「上下のシャドウは見えるけど左右は見えないという状態」についても確認したところ、たとえばスライドを画面に1枚ではなく、2枚や3枚表示させた場合ですと、そのスライダー全体の左右のシャドウは見えないけれど、2枚だと2枚にはさまれた部分のシャドウ、3枚だと真ん中の要素の左右のシャドウは見える、という状態でしたね。
こちらについては修正いただけるとのことで、承知しました。
お手数ですがよろしくお願いいたします。しばらくトピックは開けておきますね。
いいねをした人:徳本さん
なるほど！そういうことでしたか。いえいえ、こちらこそ読み取れず失礼しました。
それであれば下記のコードで全削除できると思うのですが、厳密なチェックはしていないのでご容赦くださいませ。
同じく1行表示の場合です。.l-1row-header .p-global-nav .c-navbar__item :after, :before { display: none; }当てたいスタイルまでは試せていませんが、参考になりましたら幸いです♪
いいねをした人:なるほど！WordPress6.2の際に何かしらの変更があったのかも、ですね。
しばらくするとまた変わっちゃうかも…ですが、ひとまずは問題解決としてトピックを閉じておきますね。今回アップデートいただいたことでカバーブロックの中にセクションを入れることも少なくなるように思うので、個人的には全面解決としておきます！笑
いいねをした人:キタジマさん、ご対応いただき本当にありがとうございます！
早速試してみましたが、かなり良い感じです♪これまではコアのカバーブロックの中にセクションを入れたり、セクションの高さを個別で指定したりしていたのですが、本アップデートのおかげで余計なブロックやCSSを割愛できるので、制作時もメンテナンス時も無用な手間が減らせて非常に助かります。
また、例えば100vh等で高さを指定した状態でも前回実装いただいた上下のパディング設定が同時に使えるので、表現の幅も大きく広がって大変ありがたいです。
トピック閉じておきます。ありがとうございました！
いいねをした人:
