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

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

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

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

WordPress

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

CSS

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

Q&A

解決済

1回答

2159閲覧

スマホでのiframeが見切れる【再質問】

azousan

総合スコア14

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

WordPress

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

CSS

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

0グッド

1クリップ

投稿2018/01/26 04:24

PCでは正しく表示されるのにスマホではiframeが見切れてしまう。
wordpress4.9.1
テーマ Bizvektor1.10.0

<iframe src="bukken/option/picturetable2.htm" align="center" width="640" height="800" name="uri" frameborder="0" scrolling="no"></iframe>
<iframe align="center" frameborder="0" height="800" name="uri" scrolling="no" src="bukken/option/picturetable2.htm" width="100%"></iframe>

Bizvektor子テーマCSSに以下記述

1iframe[Attributes Style] { 2 width: 100%; 3 height: 800px; 4 border-top-width: 0px; 5 border-right-width: 0px; 6 border-bottom-width: 0px; 7 border-left-width: 0px;

参考サイト
http://cielhome.net/
⇒高知大学生向けの物件のようにPCとスマホで見切れないように設定したいのですがうまくいきません。

当社サイト
http://azou.co.jp/
⇒おすすめシングル一覧の欄

どなたかご教授頂くと幸いです。宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

前回の質問に回答したソースコード(CSS)が適用されてないよう見えますが…。

問題はiframeではありません。iframeの中で表示しているtableが問題です。
開発者ツールを使用し、要素の検証で確認してみてください。tableがはみ出しているのを確認できると思います。

レスポンシブ対応するにはwidthを絶対値(px)で指定せず、相対値(%)で指定するのが一般的です。

まず、tabletdにインライン(style="...")で記述されているwidthheightを削除してください。

次に、iframe内で表示しているhtmlファイル(/bukken/option/picturetable2.htm)を開き、</body>の直前で良いので下記CSSを追記します。

<style> table, table img:not([src="up-new.gif"]) { width: 100%; } </style>

投稿2018/01/26 04:47

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

azousan

2018/01/26 05:46

再度のご回答ありがとうございます。 iframeの中のtableがはみ出ているのは確認できましたが、シエルホームさんも削除していないので、この中のwidthとhightを削除するのは出来ないと思います。 他の方法はございませんか?
退会済みユーザー

退会済みユーザー

2018/01/26 05:53

> この中のwidthとhightを削除するのは出来ないと思います。 自社で管理してるHTMLファイルですよね…? まぁ削除したくないのであれば!importantしてください。 table, table img:not([src="up-new.gif"]) { width: 100%!important; height: auto!important; }
Lhankor_Mhy

2018/01/26 06:21

横からすみません。 これ、@dream(アットドリーム)という不動産専門のホームページ作成ソフトから生成されているコードだと思います。 なので、コードの改変をしても次の更新時に元に戻ってしまうと思います。
azousan

2018/01/26 06:33

まさにそうなんです。 ですので何か良い方法はありませんでしょうか? 以下をCSSに記述----- div.iframeWrapper { position: relative; width: 100%; padding-top: 75%; } div.iframeWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } その後記事をdivで囲んでみましたがうまくいきません。
退会済みユーザー

退会済みユーザー

2018/01/26 06:43

> Lhankor_Mhyさん 存じ上げてませんでした。ありがとうございます。 > azousanさん CSSファイルを別途用意して、iframeで表示しているHTMLファイルに読み込ませる事も出来ないのでしょうか?提示の参考サイトを確認したら、そのようになっているようですが。
退会済みユーザー

退会済みユーザー

2018/01/26 06:45

HTMLファイルを編集するのが難しいようなら、iframeの外側からjQuery等使ってCSSを操作するか、linkタグを埋め込めば良いです。 参考 親ページからiframe内の要素にCSSを適用させる方法 http://www.koikikukan.com/archives/2015/03/03-005555.php
Lhankor_Mhy

2018/01/26 07:18

リングアンドリンクのサポートを受けているなら、サポートデスクで質問するのが一番だと思います。 私の勤務先でも使用していましたが、そのiframeの中のHTMLテンプレートは変更することができたはずです。おぼろげな記憶ですが。
azousan

2018/01/26 07:33

リング&リンクはwordpressのサポートはしていないようです。iframeも特別レスポンシブにする方法も知らないようです。HTMLテンプレートの変更はpx指定や色変更等の簡易的なものしかありません。 いまだに解決に至りません。
退会済みユーザー

退会済みユーザー

2018/01/26 07:37

> いまだに解決に至りません。 HTMLファイルの編集が不可能なら、上に書いたようにjQueryでiframeの外側(WordPress側)からCSS操作するしかないです。リンクを参考に。
azousan

2018/01/26 08:14

jQuery良く分からないので少し勉強してからまた質問あげます。
Lhankor_Mhy

2018/01/26 08:54

昔のマニュアルひっくり返してみましたが、たしかに「お勧め物件一覧」のヘッダはカスタマイズができないようですね。 アットドリームのコードはクソだからなあ…… aozukiさんのご回答のほか、PHPで強引に書き換える、というのも手かもですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問