WordPress

【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/01/27 22:49:09時点 Amazon調べ-詳細)

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

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

ピックアップ記事

  1. 法定相続情報一覧図の作成や申出のポイントについてまとめ
  2. 公認会計士と司法試験/予備試験合格の勉強のプロが教えてくれる「メモリーツリー」勉…
  3. 【Instagram】iPhoneアプリ版インスタグラムアカウントを非公開アカウ…
  4. [iPhone] Safariでブラウズ中に表示される、「警告! あなたのApp…
  5. Apple Music や Amazon Musice でクラシック音楽の楽曲・…

関連記事

  1. WordPress

    Google Docs から WordPress へ!

    こんにちは。@OfficeTAKU です。Jet Pack…

  2. WordPress

    Web

    WordPress : カテゴリによって異なるランキングバナーを表示させる

    ブログランキングサイトに登録したままでほったらかし状態です。「…

  3. 403 ERROR 画面
  4. Photo by Burst on Unsplash

    WordPress

    [WordPress] Gutenbergからクラシックエディタへ戻しました!

    こんにちは。@OfficeTAKUです。なんでも新しいもの…

LINE公式アカウント:OfficeTAKU

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

最近の記事

人気の記事

  1. Surface Mobile Mouse
  1. Photo by rawpixel on Unsplash

    IC3

    グローバルなIT資格【IC3】 新バージョン GS5 配信スタート!対象アプリが…
  2. Excel

    【Excel】あなたはいくつ知っている? エクセルで連番を作成する7つの方法
  3. Microsoft Office Specialist

    【MOS】Excel 2016 Specialist 試験に出題される関数一覧
  4. Security

    【注意!】「2018 年間ビジターアンケート」というフィッシングサイトに騙されな…
  5. 【Facebook】不審なメッセージリクエストでグループ作成のお知らせが届いたら

    Facebook

    【Facebook】不審なメッセージリクエストでグループ作成のお知らせが届いたら…
PAGE TOP