セクション(背景画像/背景動画)のスマホ表示について

0
いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #56732
    nashiro
    参加者
    2

    トピックを新しく立てる方は次の項目も記述してください(要望トピックの場合は不要です)。

    【お使いの Snow Monkey のバージョン】11.2
    【お使いのブラウザ】edge(表示の不具合はiPhoneのChrome)
    【当該サイトのURL】https://fp-kyoya.com/itimonittou/

    ===

    お世話になります。

    セクション(背景画像/背景動画)のスマホの表示が右側にずれて、はみ出して表示されてしまいます。

    中心の持ってくるにはどのようにすれば良いでしょうか?

    固定ページ、ランディングページ(スリム幅)でページを作成しております。

     

    0
    いいねをした人: 居ません
    #56735
    Kmical Lights
    閲覧者
    234

    セクション(背景画像/背景動画)のスマホの表示が右側にずれて、はみ出して表示されてしまいます。
    中心の持ってくるにはどのようにすれば良いでしょうか?

    調べたところ、ボタンテキストを折り返さない事による仕様からの不具合ですね。
    ボタンを折り返すかどうかは少し北島さんの考えを返答していただくとして…

    原因:

    この部分は、ボタンの幅に合わせて中央寄せとなっているんですね。
    しかし、ボタンのテキストの文字列が長い事で iPhone などの横幅の狭い端末ではボタンの長さが画面より大きいので、テキストも画面より大きい幅の中央に寄せられてしまっている状態のようです。
    その事で、テキストの位置がずれた形に見えています。
    また、画面よりはみ出す要素をhidden化していますので、テキストなどが切れた状態で表示されて不具合に至っています。

    対策:

    ボタンのテキストを変えずに対応する場合はテキストの折り返しを修正するなどを行う必要があると思いますので、
    急ぎでしたら、ボタンの「LINEの友だち追加で動画を受け取る」と書かれているテキストを短くする事で対策してみていただけますでしょうか?

    2
    いいねをした人: 居ません
    #56765
    キタジマ タカシ
    参加者
    2253

    Kmical Lightsさんありがとうございます!そういうこともあるなら折り返すようにしていたほうが良いですかね。折り返した見た目は変になると思いますが、折り返したらテキストが長いというのもわかりやすいですし。

    1
    いいねをした人: 居ません
    #56776
    Kmical Lights
    閲覧者
    234

    @北島さん

    そういうこともあるなら折り返すようにしていたほうが良いですかね。

    どうでしょうね。
    折り返さない場合、テキストが切れてしまってはしまいますが、若干長くても1行で済むようになる場合もブラウザによってはあるのでちょっと悩む所ですね。
    しかしながら、折り返すと全テキストが表示されるので閲覧者に正しくボタンの意味を伝えられることや、1行で済むテキスト長であれば影響はない事もあるので、折り返すようにしても大きな問題はでないと思ってはいます。

    強制的に折り返すのを悩む場合、「テキストを折り返す」と言ったオプションはどうでしょうか?

    2
    いいねをした人: 居ません
    #56784
    nashiro
    参加者
    2

    @Kmail Lightsさん
    @キタジマさん

    スマホの幅を超えると今回のような現象が起こるのですね。

    勉強になりました。

    文字数を減らすことで解決しました!

    ありがとうございます!

    2
    いいねをした人: 居ません
    #56797
    キタジマ タカシ
    参加者
    2253

    Snow Monkey Blocks のボタンについては「「テキストを折り返す」のオプションをつけるか検討します!

    8
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「セクション(背景画像/背景動画)のスマホ表示について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。