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/06/21 08:12:42時点 Amazon調べ-詳細)

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

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

ピックアップ記事

  1. 忙しい朝もコーヒーは欠かせない!お湯を沸かすのすら面倒な人におすすめ!ネスカフェ…
  2. VERAプロジェクト前倒し終了:『恋する小惑星(アステロイド)』にも登場した国立…
  3. [Amazon] アマゾンで「NHKこどもパーク」開始!月額390円で「ワンワン…
  4. 【iPhone】音声読み上げを利用する方法
  5. 記憶と記録をデジタル化しておくことの重要性と検討すべき項目を整理してみた

関連記事

  1. WordPress

    【WordPress】サイトヘルスチェックで指摘された問題点を解消

    こんにちは。@OfficeTAKUです。今まで気づかな…

  2. Web

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

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

  3. WordPress

    Web

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

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

  4. WordPress

    Google Docs から WordPress へ!

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

  5. WordPress

    写真サイト「Scenery in Okyouduka 御経塚通信写真部」を再開しました

    こんにちは。@OfficeTAKUです。しばらく更新を休ん…

LINE公式アカウント:OfficeTAKU

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

最近の記事

  1. Lenovo IdeaPad Flex550i
日比谷花壇_毎月楽しむお花のある暮らし特集

人気の記事

  1. ロジクール MX KEYS(MAC用)
  1. Security

    【注意!】Googleユーザーのあなた、おめでとうございます!(1)件のGoog…
  2. Security

    【注意】不在通知を装う詐欺メールがでまわっています!
  3. マンガ『スティーブズ』

    電子書籍

    [KIndle] Appleの創始者である2人のスティーブを描いた漫画『スティー…
  4. Photo by rawpixel on Unsplash

    WebService

    フリーランスや小さなお店でホームページ作りたい!という時のおすすめホームページ作…
  5. Word

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