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

Question

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>

iframe[Attributes Style] {
    width: 100%;
    height: 800px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;

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

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

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

Answer 1

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

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

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

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

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

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

Comments

[azousan]

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

[退会済みユーザー]

> この中のwidthとhightを削除するのは出来ないと思います。
自社で管理してるHTMLファイルですよね…？

まぁ削除したくないのであれば!importantしてください。
table,
table img:not([src="up-new.gif"]) {
width: 100%!important;
height: auto!important;
}

[Lhankor_Mhy]

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

[azousan]

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

[退会済みユーザー]

> Lhankor_Mhyさん
存じ上げてませんでした。ありがとうございます。

> azousanさん
CSSファイルを別途用意して、iframeで表示しているHTMLファイルに読み込ませる事も出来ないのでしょうか？提示の参考サイトを確認したら、そのようになっているようですが。

[退会済みユーザー]

HTMLファイルを編集するのが難しいようなら、iframeの外側からjQuery等使ってCSSを操作するか、linkタグを埋め込めば良いです。

参考
親ページからiframe内の要素にCSSを適用させる方法
http://www.koikikukan.com/archives/2015/03/03-005555.php

[Lhankor_Mhy]

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

[azousan]

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

[退会済みユーザー]

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

[azousan]

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

[Lhankor_Mhy]

昔のマニュアルひっくり返してみましたが、たしかに「お勧め物件一覧」のヘッダはカスタマイズができないようですね。
アットドリームのコードはクソだからなあ……

aozukiさんのご回答のほか、PHPで強引に書き換える、というのも手かもですね。