- このトピックには15件の返信、2人の参加者があり、最後に
により4年、 6ヶ月前に更新されました。
-
投稿
-
トピックを新しく立てる方は次の項目も記述してください（要望トピックの場合は不要です）。
【お使いの Snow Monkey のバージョン】バージョン: 10.2.1
【お使いのブラウザ】chrome
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）スライダーにクラスを付けて position: relative; 指定でテキストやアニメーションを position:absolute ;するとその後新しくブロックを追加するたび全てのセクションが一番上に集まりスライダー画像が消えてしまします。使っているスライダーは snow monkey のスライダーです。
ちなみにセクショにクラスを付けると(例toppc）下記クラス名が正しいのでしょうか？
.wp-block-snow-monkey-blocks-slider smb-slider sme-hidden-sm toppc
それとも .topp が正しいのでしょうか？
現在レイアウトは修正していますが、新しくセクションう追加するとレイアウトが崩れそうなので今は何もできていません。
宜しくお願い致します。
いいねをした人: 居ません状況がよくわからないのですが、これは実際のページでの現象ではなくて、エディター上での現象のことでしょうか？
ちなみにセクショにクラスを付けると(例toppc）下記クラス名が正しいのでしょうか？
.wp-block-snow-monkey-blocks-slider smb-slider sme-hidden-sm toppc
それとも .topp が正しいのでしょうか？
すみません、こちらも文脈によって意味が変わってきますので返答がむずかしいです。例えば、CSS でセレクタ指定するのであれば、
.wp-block-snow-monkey-blocks-slider.smb-slider.sme-hidden-sm.toppc {}や
.topp {}が正しいでしょうし、ブロックの「追加 CSS クラス」に入力するのであれば「sme-hidden-sm toppc」という入力になるのが正しいと思います。
いいねをした人: 居ませんお忙しい中申し訳ありません。
こちらのサイトを見て頂いても宜しいでしょうか？
NEWSと書いている箇所のセクションはフロントページ（スライダー）のあとに表示されるはずですが、新しくセクションを追加するとスライダーに追加している画像が消え一番上から重なって表示されてしまいます。（スマホ時）
PC表示では問題がないのですが、PC時にもスライダーの画像は消えてしまします。
一度見てもらっても宜しいでしょうか？
いいねをした人: 居ませんHTML をみてみると、余計な
</div>があって、マークアップが崩れてしまっています。positionによる崩れの可能性に言及されていますが、この</div>によるマークアップの崩れが原因の可能性もあるので、まず HTML を正しい構造に直してみてください。ブロックエディターのビジュアルモードでブロックを入れると本来このようなマークアップの崩れは起きないと思うのですが、カスタム HTML ブロックを使ったり、テキストモードで記述されたりしていますか？もしそうならその辺でマークアップがズレてしまっている可能性があるので確認してみてください。
いいねをした人: 居ません確認していろいろ試してみたのですが上手くいきません。
ちなみにお気づきの個所を教えて頂いても宜しいでしょうか？
たびたび申し訳ありません。<div class="wp-block-snow-monkey-blocks-slider alignfull smb-slider sme-hidden-sm toppc"> <div class="smb-slider__canvas" dir="rtl" data-smb-slider="{"slidesToShow":1,"slidesToScroll":1,"mdSlidesToShow":1,"mdSlidesToScroll":1,"smSlidesToShow":1,"smSlidesToScroll":1,"dots":false,"arrows":false,"speed":1000,"autoplay":true,"autoplaySpeed":4000,"fade":false,"rtl":true}"> <!-- wp:snow-monkey-blocks/slider--item {"imageID":185} --> <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item"> <div class="smb-slider__item__figure"><img src="http://comls.co.jp/wp-content/uploads/2020/04/siz22-1-1024x576.jpg" alt="" /></div> </div> <!-- /wp:snow-monkey-blocks/slider--item --> <!-- wp:snow-monkey-blocks/slider--item {"imageID":776} --> <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item"> <div class="smb-slider__item__figure"><img src="http://comls.co.jp/wp-content/uploads/2020/04/topimg2253-5-1024x504.jpg" alt="" /></div> </div> <!-- /wp:snow-monkey-blocks/slider--item --> </div> <div class="visionpc" data-aos="flip-left" data-aos-easing="ease-out-cubic" data-aos-duration="3000"> <a href="#anchor">vision</a></div> <div> <p class="pcsata"> <top>L</top> <top>O</top> <top>O</top> <top>K</top> <top> </top> <top>U</top> <top>P</top> <top> </top> <top>A</top> <top>N</top> <top>Y</top> <top>T</top> <top>I</top> <top>M</top> <top>E</top> <top> </top> <top> <br>U</top> <top>N</top> <top>F</top> <top>I</top> <top>N</top> <top>I</top> <top>S</top> <top>H</top> <top>D</top> <top> </top> <top> <br>E</top> <top>V</top> <top>O</top> <top>L</top> <top>U</top> <top>T</top> <top>I</top> <top>O</top> <top>N</top> <top> </top> <top>I</top> <top>S</top> <top> </top> <top>T</top> <top>H</top> <top>E</top> <top>R</top> <top>E</top> <top></top> <topp> <br> <br>上</topp> <topp>を</topp> <topp>見</topp> <topp>れ</topp> <topp>ば</topp> <topp>常</topp> <topp>に</topp> <topp>未</topp> <topp>完</topp> <topp>成</topp> <topp> </topp> <topp>進</topp> <topp>化</topp> <topp>は</topp> <topp>そ</topp> <topp>こ</topp> <topp>に</topp> <topp>あ</topp> <topp>る</topp> <topp> </topp> <topp> </topp> <topp> </topp> </p> </div> </div>いいねをした人: 居ませんお世話になります。
1度消して入れ直ししていますが、他ブロックを作成すると、崩れてしまいます。
一貫性がないのでわからないのですが、下記内容のタイミングでくずれるケースがあります。
1.他ブロックにclass名を付けた時
2.他ブロックを移動させた時
3.他ブロックのスマホ非表示などを設定した時などです。
上記内容の場合でも崩れない時もあります。
からこれ40回程度、崩れています。
ご教授下さい。いいねをした人: 居ません先にも書きましたが、
ブロックエディターのビジュアルモードでブロックを入れると本来このようなマークアップの崩れは起きないと思うのですが、カスタム HTML ブロックを使ったり、テキストモードで記述されたりしていますか？もしそうならその辺でマークアップがズレてしまっている可能性があるので確認してみてください。
です。他の方から同様の報告はないので、おそらく Snow Monkey や Snow Monkey Blocks 自体の問題ではなく、独自に入れた HTML にマークアップのズレがあるのではないかと思います。なんらかの条件によってそのズレが有効になったり無効になったりしているのかもしれません。
カスタム HTML ブロックを使ったり、テキストモードで記述されたりしていますか？ もしカスタム HTML ブロックを使っているのであれば、その部分だけ一度消してみて崩れが発生するか確認してみてください。「テキストモードで記述」されているのであれば、一度テキストエディターに貼り付けてきれいにインデントしてズレがないか確認してみてください。
いいねをした人: 居ませんお世話になります。
slickスライダーに画像など入れた後にビジュアルエディターからテキストエディターに変換しています。
ちなみにカスタムhtmlは使わない方がいいのでしょうか？いいねをした人: 居ませんslickスライダーに画像など入れた後にビジュアルエディターからテキストエディターに変換しています。
テキストエディターに変換しているということは、おそらく変換後になんらか HTML に手を加えられていると思います（ですよね？）。その変更で HTML の閉じずれ等がおこっていないか確認してください。
ちなみにカスタムhtmlは使わない方がいいのでしょうか？
使っても良いとは思いますが、そこに入力した HTML にズレがあると問題がおこりますので HTML に問題がないことを確認してからカスタム HTML に記述するのが良いです。
いいねをした人: 居ませんお世話になります。
閉じタグを修正いたしましたが、スライダー上の
img画像が消えてしまします。消えるタイミングは編集ページから一度出て再度編集ページに戻ると消えています。
そして更新をかけるとWEB上でも消える状況です。閉じタグに間違いがあるかも知れないのでテストで簡単なものを入れて試していますが上手くいきません。
<div>テスト</div>目的としてはスライダー上のテキストを固定表示させたいです。
スライダーに画像を入れてHTMLで編集を押すと下記内容が出ます。最後の
</div>タグの一つ前に<div>テスト</div>と入れた試しましたが、消えてしまいます。
<div class="wp-block-snow-monkey-blocks-slider smb-slider"> <div class="smb-slider__canvas" dir="ltr" data-smb-slider="{"slidesToShow":1,"slidesToScroll":1,"mdSlidesToShow":1,"mdSlidesToScroll":1,"smSlidesToShow":1,"smSlidesToScroll":1,"dots":false,"arrows":true,"speed":300,"autoplay":false,"autoplaySpeed":0,"fade":false,"rtl":false}"> <!-- wp:snow-monkey-blocks/slider--item {"imageID":1124} --> <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item"> <div class="smb-slider__item__figure"> <img src="http://comls.co.jp/wp-content/uploads/2020/04/topimg245535-1024x576.jpg" alt="" /> </div> </div> <!-- /wp:snow-monkey-blocks/slider--item --> <!-- wp:snow-monkey-blocks/slider--item {"imageID":1124} --> <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item"> <div class="smb-slider__item__figure"> <img src="http://comls.co.jp/wp-content/uploads/2020/04/topimg245535-1024x576.jpg" alt="" /> </div> </div> <!-- /wp:snow-monkey-blocks/slider--item --> <!-- wp:snow-monkey-blocks/slider--item --> <div class="wp-block-snow-monkey-blocks-slider--item smb-slider__item"> <div class="smb-slider__item__figure"> <img src="" alt="" /> </div> </div> <!-- /wp:snow-monkey-blocks/slider--item --> </div> </div>↑ ここに追加
<div>テスト</div>この状況で更新してブラウザで確認すると『テスト』がスライダー左下に表示されるので問題ないと思いますが編集ページから一度でて戻るとimg画像の個所が消えて下記表示になっています。
<div class="wp-block-snow-monkey-blocks-slider smb-slider"><div class="smb-slider__canvas" dir="ltr" data-smb-slider="{"slidesToShow":1,"slidesToScroll":1,"mdSlidesToShow":1,"mdSlidesToScroll":1,"smSlidesToShow":1,"smSlidesToScroll":1,"dots":false,"arrows":true,"speed":300,"autoplay":false,"autoplaySpeed":0,"fade":false,"rtl":false}"> </div> <div>テスト</div></div>更新をしなければ目的の形がとれるのですが、更新内容があるたびに入れなおしています。
もう一度見て頂けないでしょうか。
お忙しい中、申し訳ありません。いいねをした人: 居ませんたびたび申し訳ありません。
↑ ここに追加 <div>テスト</div>
の箇所が投稿した後で表示崩れで場所が変わっています。
実際に記入した箇所はラストの<!– /wp:snow-monkey-blocks/slider–item –></div>●ここです●</div>
いいねをした人: 居ませんあ、もしかして下記のような手順をとられていますか？
1. スライダーブロックで画像をいれる
2. ブロックを HTML 編集モードにする
3.<div>テスト</div>を追加
4. ブロックをビジュアルモードに戻す
5. 画像が消えるもしそうだとすると、これは Snow Monkey ではなくブロックエディター自体の仕様です。ブロックを HTML 編集モードで編集した場合はビジュアルモードには戻せません。ブロックは自身がどういう HTML 構造たるかという情報を持っており、HTML 直接編集するとその HTML 構造と一致しなくなるため「ブロックが壊れる」 or 「なるべくその HTML 構造にするために独自にタグを消したりして無理やり（ブロック的に）正しい HTML に自動修正する」という動作をとります。これはそういう仕組みでないと「ブロック」を維持できないので仕方がない動作です。
ということで、もし僕が上記で上げた動作で画像が消えているのであれば、とれる方法は下記かなと思います。
– HTML モードにして編集したあとはビジュアルモードに戻さない
– HTML を編集しなくても CSS で頑張って希望の見た目に（近いものに）できるのであればそれで頑張る
– 希望の動作をするスライダープラグインを探すいいねをした人: 居ません
- トピック「スライダーを親ブロックで position: relative; すると新しくブロックを追加するたびレイアウトが崩れる」には新しい返信をつけることはできません。