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 (2020/10/22 03:25:06時点 Amazon調べ-詳細)

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

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

ピックアップ記事

  1. VERAプロジェクト前倒し終了:『恋する小惑星(アステロイド)』にも登場した国立…
  2. 【iPhone】音声読み上げを利用する方法
  3. 【レビュー】これはおすすめ!13インチ MacBook Pro にぴったりな I…
  4. 法定相続情報一覧図の作成や申出のポイントについてまとめ
  5. 以前のTwitter画面に戻せる拡張機能「GoodTwitter」が便利「Twi…

関連記事

  1. Photo by Burst on Unsplash

    WordPress

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

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

  2. Photo by rawpixel on Unsplash
  3. WordPress

    WordPress,XAMPP,Mac OS X,ロリポップ

    今回、このサイトを構築するに当たって、MacBook、OS X 10.…

  4. WordPress

    Web

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

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

LINE公式アカウント:OfficeTAKU

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

最近の記事

  1. プレゼンテーション イメージ
  2. ビジネス統計スペシャリスト

人気の記事

  1. Surface Mobile Mouse
  1. Lenovo Mirage Camera with Daydream

    ハードウェア

    [レビュー] 手軽にVR動画を撮影できる Lenovo Mirage Camer…
  2. Security

    [Instagram] 乗っ取られる前に!インスタグラム、二段階認証でセキュリテ…
  3. WEB会議などで使える「スタジオジブリ壁紙」

    WebService

    【Zoom】スタジオジブリ・ヱヴァンゲリヲン・調布市役所さんなどバーチャル背景無…
  4. Dudios Zeus Plus Bluetooth イヤホン

    ハードウェア

    [レビュー] Dudios Zeus Plus Bluetooth イヤホン試用…
  5. MDノートダイアリー 手帳 2019年 A5 マンスリー

    おすすめ

    2019年の手帳購入! MD ノートダイアリー 手帳 2019年 A5 マンスリ…
PAGE TOP