質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1951閲覧

facebook埋め込み投稿の横幅指定

amakawa

総合スコア17

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Facebook

Facebookは、実名登録制のSNS(ソーシャル・ネットワーキング・サービス)です。開発者用のデベロッパーサイトが存在し、一般ユーザーによるFacebook向けアプリケーション開発が可能です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/06/25 03:07

編集2022/01/12 10:55

wordpressの固定ページにfacebookの投稿を埋め込む作業をしているのですが、タブレット表示にすると掲載にズレが生じてしまいます。

3つのfacebook投稿を横3列に表示したいため、プラグイン【Page Builder by SiteOrigin】を使って作成しています。

イメージ説明

再現したいイメージ↓

イメージ説明

facebookの埋め込み投稿を、コードジェネレーターでコードを取得し、IFrameでページビルダーのカラム内にそれぞれ貼り付けました。
投稿の横幅は350pxで指定し、コードを作成しました。(下記facebookの埋め込みコード例です)

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=350&show_text=true&height=328&appId" width="350" height="328" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="e![イメージ説明](617d298c6e6a473b2e960e281823ad2e.jpeg)ed-media"></iframe>

PCとモバイルでの読み込み時にはイメージ通りに表示されているのですが、タブレットではカラムからはみ出たサイズになってしまい、重なって表示されてしまいます。
横幅350pxの指定が固定されているということでしょうか。

問題の図↓

イメージ説明

試した対処↓

  • IFrame内のwidthを100%に、heightをautoに書き換えた。

⇒widthが350px-750pxにしか対応していないらしく、タグ自体が作動しなくなった。

  • ページビルダーのそれぞれのカラムにmax-width:100%;を記述した。

⇒変化なし

  • ページビルダーのそれぞれのカラムにbox-sizing: border-box;を記述した。

⇒変化なし

色々調べたいく中で、JavaScriptを使用すると解決できるかも、という策があったのですが、JavaScriptについて詳しくないため、他の方法で対処できないかと試行錯誤しているのですが見つからず。

cssの追記などで解決できる方法がありましたらご教授ください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問