ファーストビューについて

0
いいねをした人: 居ません
  • このトピックには5件の返信、3人の参加者があり、最後にabchan1222により1年、 4ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #127332
    abchan1222
    閲覧者
    3

    【お使いの Snow Monkey のバージョン】バージョン: 20.4.1
    【お使いの Snow Monkey Blocks のバージョン】バージョン 19.9.0
    【お使いの Snow Monkey Editor のバージョン】バージョン 9.2.5
    【お使いのブラウザ】グーグルクロム
    【当該サイトのURL】

    ID:mirai-work
    Pass:mirai-work0000

    ### 実現したいこと

    ファーストビューを綺麗に表示したい

    ### 発生している問題

    スマホサイズにした際に画像が見切れてしまう

    ### 試したこと

    最初、背景セクションを使ってみたがそれだとPCサイズでも画像が見切れてしまったので

    カバーを使って設定をした。するとPC版でも見切れずに表示されました。

    しかし、検証ツールでみてみると見切れていました。

    これを見切れずに表示するにはどうすれば良いでしょうか
    CSSを当ててみたのですが初心者のためうまく表示できませんでした

    できれば、CSSで調節してみたいのですが

    画像の作り方やサイズに問題があるのでしょうか?

    画像のサイズは1920px×716です。

    まとまりのない文章ですがお返事お待ちしております。

    0
    いいねをした人: 居ません
    #127333
    Hajime Megane Ogushi
    参加者
    19

    画像を前面に出して、どの画面サイズでも正しい比率で横幅100%で見せたい

    ということであれば、画像ブロックをそのまま使うのはどうでしょうか。

    参考

    1
    いいねをした人:
    #127396
    アバター画像キタジマ タカシ
    参加者
    2421

    画像の上に文章などのコンテンツを重ねる必要がないのであれば、Hajime Megane Ogushi さんが書かれているように画像ブロックを使うのが良いです。

    ### 画像だけを表示したいとき
    - 画像ブロック
    
    ### 画像の上にコンテンツを重ねて表示したいとき
    - セクション(背景画像/動画)ブロック
      - 最初からある程度デザインされてる
      - 背景はコンテンツの量に応じて拡大縮小される
    - ヒーローヘッダーブロック
      - 任意のアスペクト比で背景を表示可能
      - 設定でコンテンツの量に応じて拡大縮小も可能
    0
    いいねをした人: 居ません
    #127425
    abchan1222
    閲覧者
    3

    Hajime Megane Ogushiさん、キタジマタカシさん返信ありがとうございます。

    そのまま、画像として設定する形で見切れることはなくなりました。

    ありがとうございます。

    その上でもう1点質問させて頂きたいのですが

    画像で設定するとスマホ版(414×896)にしたときに

    スマホ版でのHP閲覧ではなかなか見ない高さになってしまいます

    カバーで設定していた際は縮小しても高さの問題はなかったのですが

    ここを解消するにはスマホ版用画像を準備する必要があるのでしょうか?

    また、準備するとすれば何×何pxくらいの画像がいいのでしょうか?

    ぜひ、教えていただけると幸いです。

    0
    いいねをした人: 居ません
    #127450
    アバター画像キタジマ タカシ
    参加者
    2421

    画像で設定するとスマホ版(414×896)にしたときにスマホ版でのHP閲覧ではなかなか見ない高さになってしまいます

    画像ブロックはその画像の画角のまま表示するので、もし PC とスマホで画角の違う画像を表示したいのであれば、それぞれ用の画像を用意する必要があります。

    Snow Monkey Editor プラグインで、各ブロックごとに PC では表示しない・スマホでは表示しない、のような設定ができるのでそれを使うと簡単かもしれません。

    0
    いいねをした人: 居ません
    #127915
    abchan1222
    閲覧者
    3

    大変返信が遅くなりましたがSnow Monkey Editorでスマホサイズでも見切れなくなりました

    丁寧な対応ありがとうございました。

    1
    いいねをした人:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「ファーストビューについて」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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