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 (2023/12/05 10:17:02時点 Amazon調べ-詳細)

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

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

ピックアップ記事

  1. 【Instagram】iPhoneアプリ版インスタグラムアカウントを非公開アカウ…
  2. [レビュー] リンダ・リウカス『ルビイのぼうけん こんにちは!プログラミング』:…
  3. [レビュー] 『親子で学ぶ プログラミング超入門 ~Scratchでゲームを作ろ…
  4. 公認会計士と司法試験/予備試験合格の勉強のプロが教えてくれる「メモリーツリー」勉…
  5. [PPT] あなたのPowerPointプレゼンテーションを劇的に変えてしまうで…

関連記事

  1. WordPress

    Web

    WordPress HTMLタグの入力を楽にする「Wp Zen Coding」プラグイン

    ブログの記事を欠く時、タグの入力とか面倒なので以前はエディタで書いて貼…

  2. Photo by rawpixel on Unsplash
  3. WordPress

    [lolipop] WordPress に ログインしようとしたら 403 エラー

    こんにちは。@OfficeTAKUです。オリジナルドメイン…

  4. Web

    [WordPress] ログイン履歴を記録してくれるプラグイン Crazy Bone を導入してみた…

    こんにちは。しょっちゅうパスワードを忘れてしまう @OfficeT…

LINE公式アカウント:OfficeTAKU

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

最近の記事

  1. AirPods Pro 第2世代

人気の記事

  1. Photo by Samuel Zeller on Unsplash
  1. WebService

    【U-NEXT】シニアや映画好きがいま無料体験するならこの動画配信サービス!
  2. WordPress

    【WordPress】ワードプレスで会話風吹き出しを簡単に作れる「Speech …
  3. Web

    2020年プログラミング教育必修化が不安!!というお母さんお父さんに伝えたいこと…
  4. iPhone

    【iPhone】iOS 15.2 デジタル遺産プログラム「故人アカウント管理連絡…
  5. Hard・Acc

    【レビュー】Hypamer アルミ合金製 軽量 ノートパソコンスタンド
PAGE TOP