Snow Monkey Blocksの「Facebook埋め込み」で、スマホだとFacebookブロックがはみ出してしまいます

0
いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #8274
    関 美奈子
    参加者
    4

    初投稿です。

    Snow Monkey BlocksでFacebookの埋め込みをよくやるのですが、iPhoneで埋め込まれた記事をみると、Facebookの埋め込みブロックがはみ出してしまってます。
    PCからだと大丈夫なのですが、スマホで見づらいのはキツイです。

    iPhone XSでの表示

    上記の記事→https://www.neppie.com/blog/?p=375764

    InstagramやTwitterはスマホでもきちんと表示されています。

    CSSなどでサイズを調整する方法がありましたら教えていただけないでしょうか。
    よろしくお願いします。

    【お使いの Snow Monkey のバージョン】v4.4.31
    【お使いの Snow Monkey Blocks のバージョン】v2.1.0
    【お使いのブラウザ】iPhone XS
    ———-

    0
    いいねをした人: 居ません
    #8278
    キタジマ タカシ
    参加者
    2227

    この埋め込み、Facebook から埋め込みコードを取得して貼り付けたものでしょうか?
    もしそうでしたら、Facebook 投稿の URL だけを貼った場合はどうでしょうか?

    https://www.facebook.com/neppie22/posts/2285727388166383

    0
    いいねをした人: 居ません
    #8280
    関 美奈子
    参加者
    4

    確認ありがとうございます!
    「Facebook 投稿の URL だけを貼った場合」に画像がはみ出てしまう現象が起こります。

    「Facebook から埋め込みコードを取得して貼り付けたもの」を上に追加して編集してみました。

    上がFacebookの埋め込みタグ、下がBlocksでのFacebook埋め込みブロックで入れたものです。

    管理画面ではこんな表示がされています。

    という感じですが、ご確認のほどよろしくお願いします。

    0
    いいねをした人: 居ません
    #8291
    キタジマ タカシ
    参加者
    2227

    試していただいてありがとうございます。TwentySeventeen でもはみだすので、多分コアの Facebook 埋め込みブロックの不具合なのかなと思います。ちょっと CSS で強制的に縮めて埋め込みコード貼り付けたのと同じ見え方になるようにできるか調べてみますね(その場合でも写真ははみだしてるみたいですが…

    0
    いいねをした人: 居ません
    #8292
    キタジマ タカシ
    参加者
    2227

    何度かリロードしてるとちゃんと表示されるときもあるみたいですね…。読み込みのタイミングとかでそうなるのかもしれませんね。とりあえず、下記の CSS をカスタマイザーの追加 CSS か、子テーマの CSS ファイルに追加してみるとどうでしょうか?

    .wp-block-embed-facebook .fb_iframe_widget,
    .wp-block-embed-facebook .fb_iframe_widget > span {
      max-width: 100% !important;
    }
    0
    いいねをした人: 居ません
    #8784
    関 美奈子
    参加者
    4

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

    .wp-block-embed-facebook .fb_iframe_widget,
    .wp-block-embed-facebook .fb_iframe_widget > span {
    max-width: 100% !important;
    }

    このCSSを子テーマのCSSに追加したら、折返しができて文字が読めるようになりました。
    写真ははみでたり縮小されたりという感じですが…。

    この記事で比較してみました。
    https://www.neppie.com/blog/?p=376457

    <CSS追加前>

    <CSS追加後>

    これで様子をみてみます。
    ありがとうございました!

    0
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「Snow Monkey Blocksの「Facebook埋め込み」で、スマホだとFacebookブロックがはみ出してしまいます」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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