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 (2022/11/28 17:44:19時点 Amazon調べ-詳細)

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

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

ピックアップ記事

  1. 以前のTwitter画面に戻せる拡張機能「GoodTwitter」が便利「Twi…
  2. 【iPhone】音声読み上げを利用する方法
  3. [レビュー] レノボ 「TAB4 8 Plus」 画面が美しく動画もマンガも満喫…
  4. 【WordPress】ロリポップサーバーで不要になったWordPressサイトを…
  5. [Amazon] アマゾンで「NHKこどもパーク」開始!月額390円で「ワンワン…

関連記事

  1. WordPress

    Google Docs から WordPress へ!

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

  2. Photo by rawpixel on Unsplash
  3. WordPress

    Web

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

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

  4. Wordpress ビジュアルエディタ

    WordPress

    [WordPress] ビジュアルエディタならExcelの表を簡単にはりつけ可能

    こんにちは。タグは手打ち派 @OfficeTAKUです。普…

  5. WordPress

    Web

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

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

  6. Web

    WordPress:Instagramの写真を表示するプラグイン 「Instagram Embed」…

    こんにちは。写真、撮られるのは嫌いだけど撮るのは好きな@OffieTA…

LINE公式アカウント:OfficeTAKU

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

最近の記事

人気の記事

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

    【楽天モバイル】Rakuten Miniがやってきた-その1:申し込みから商品到…
  2. Lenovo Chromebook S330

    Hard・Acc

    【レビュー】シニアにもおすすめ!レノボ「Lenovo Chromebook S3…
  3. Mac

    【Mac】音声読み上げを利用する方法
  4. マンガ『スティーブズ』

    電子書籍

    [KIndle] Appleの創始者である2人のスティーブを描いた漫画『スティー…
  5. Word

    【Word】「均等割り付け」ボタンを押したらいきなり文字列が右端まで広がってしま…
PAGE TOP