【WordPress】Excelの埋め込みリンク（iframe）を貼り付けたらiPhoneではみでてしまう問題

こんにちは。
@OfficeTAKUです。

前回の記事で、Office for the web を利用して、ExcelやWordを記事の中に埋め込みました。
iframeタグを貼り付けるだけなので簡単！
[clink url=”https://office-taku.com/202004/msoffice/16035.html”]

iframeがはみ出してしまう

iPhone で確認したところ、横幅はみ出してしまうので、みっともなく読みづらい状態になってしまいました。

実は以前からこの問題には悩まされてはいたのですが、面倒だな、と思って放置していました。

iPhoneではみ出さないよう(レスポンシブル)にするCSS

この機会に解決しようと思ってググったら、簡単にみつかりました。
それがこちら

iframeのレスポンシブ対応の方法。iphoneではみ出る問題も解決済み | デジタルマーケティング専門家/デジタルマーケッター松原潤一のブログ

上記のページの3番めの項目
【完成版】iPhoneでもiframeをキレイに埋め込むためのHTMLとCSS
それをそのまま使わせていただきました。多謝。
元の記事ではちゃんとCSSの説明をしてくださっていますので、ぜひご覧ください。

【完成版】iPhoneでもiframeをキレイに埋め込むためのHTMLとCSS

HTMLでのクラス指定

[code lang=”html” classname=”mySyn”]
<div class="iframe-wrap">
　<iframe src="埋め込むページのURL" frameboader="0"></iframe>
</div>[/code]

CSS

[code lang=”css” classname=”mySyn”].iframe-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
overflow:auto;
-webkit-overflow-scrolling:touch;
border:2px solid #ccc;
}
.iframe-wrap iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
display:block;
}[/code]