WordPress

 

 / 最終更新日: 2020.04.10

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


こんにちは。
@OfficeTAKUです。

前回の記事で、Office for the web を利用して、ExcelやWordを記事の中に埋め込みました。
iframeタグを貼り付けるだけなので簡単!

iframeがはみ出してしまう

iPhone で確認したところ、横幅はみ出してしまうので、みっともなく読みづらい状態になってしまいました。
iPhoneでiframe がはみ出してしまう
実は以前からこの問題には悩まされてはいたのですが、面倒だな、と思って放置していました。

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

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

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

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

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

HTMLでのクラス指定

<div class="iframe-wrap">
 <iframe src="埋め込むページのURL" frameboader="0"></iframe>
</div>

CSS

.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;
}

上記のCSSを適用した後のiPhoneでの表示
iPhoneでiframe がはみ出してしまう

のちほどじっくりとCSSについては解析したいと思います。

WordPressにスタイルシートを記述

WordPressでとりあえず上記のCSSを簡単に適用する方法を念のため。

  1. メニューの[外観]-[CSS編集]をクリックします
    iPhoneでiframe がはみ出してしまう
  2. [追加CSS]にスタイルを書き込む(上記のCSSコードをそのままコピペ)
    iPhoneでiframe がはみ出してしまう
  3. 記事内では、クラス指定したdivタグ内にiframeタグを記述します

まとめ

CSSの書式、プロパティなど、理解して自分で書くことができればそれに越したことはありません。
しかし、まずは、表示の不具合の解消を優先し、とりあえずコピペでよいと思います。
先達の知恵を拝借する、そこで得た知識を記録することで、また、誰かの役にたつのです。

と、なまぐさものの言い訳でした。

あらためて「ジュンイチのデジマブログ」さんに感謝。

created by Rinker
¥3,386 (2021/09/28 13:22:21時点 Amazon調べ-詳細)

【Office】Excelの表も簡単にブログへの埋め込みできる!無料で使えるWeb用オフィス Office for the web前のページ

Hipstersound:集中して勉強や仕事ができる環境音を提供してくれるおすすめサイト次のページhipstersound.com

ピックアップ記事

  1. [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
  2. 災害時に役立つTwitterアカウント、情報サイト等まとめ
  3. 記憶と記録をデジタル化しておくことの重要性と検討すべき項目を整理してみた
  4. Amazonプライム・ビデオで今見ておくべき作品
  5. [レビュー] リンダ・リウカス『ルビイのぼうけん こんにちは!プログラミング』:…

関連記事

  1. Web

    [WordPress] Jetpackでブログの更新情報をFacebook、Google+、Link…

    こんにちは。@OfficeTAKUです。ブログ記事の更新情…

  2. 『.htaccess』によるログインページ(wp-login.php)へのアクセス制限
  3. WordPress

    [WordPress] ロリポップさんからお願いされていた 『SiteGuard WP Plugin…

    こんにちは。@OfficeTAKUです。ここの大家さん(レ…

  4. Photo by rawpixel on Unsplash

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

人気の記事

  1. 日商PC検定
  2. ロジクール MX KEYS(MAC用)
  1. WebService

    Amazonプライム・ビデオで今見ておくべき作品
  2. Excel

    【Excel】アスペクト比(ディスプレイや写真の縦横比)を求める
  3. タウンページ2018.9『北陸とらいあんぐる』

    電子書籍

    『北陸とらいあんぐる』が表紙に描かれたNTTタウンページが昨日届いたので無料で読…
  4. Windows

    Surface Go予約開始 !でも、 搭載されているOS Windows 10…
  5. Word

    [Word]「文字の均等割り付け」を上手に使って見栄えの良い文書に!
PAGE TOP