Instagramの画像が部分的に表示されない

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも Instagramの画像が部分的に表示されない

このトピックには10件の返信が含まれ、2人の参加者がいます。1 週前 mazen さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #58798 返信

    mazen

    simplicity2とXサーバーで最近ブログを作成した者です。
    インスタグラムを埋め込む際、画像複数枚設定するとなぜか1、2枚だけ表示されません。
    インスタグラムの写真が重なるトラブル解決については対応済みです。
    よろしくお願いします。

    ▼該当ページ
    https://f-crunch.net/brand/post-201/

  • #58805 返信
    わいひら
    わいひら
    キーマスター

    該当する、iframeのheight属性が「height=”0″」のように0になっているからだと思います。コンテンツの高さを数値で指定してください。

  • #58820 返信

    かうたっく

    不具合が出ている箇所のようす(画像)

    https://gyazo.com/0c62cb11be1c914c7df07159dcb3273e

    再読み込みで高さが指定されるときと、されない時があるようです。インスタの設定で何か指定があるのか、iframeの読み込みがおかしいのか、インスタ側のお問い合わせで伺っても良いような気もしますが…

    その前にプラグインAutoptimizeを停止しても同じでしょうか?ほか何らかの圧縮系・キャッシュ系・速度アップ系のプラグインを停止したり、なんならプラグインを全停止してから、問い合わせても良いかもしれません

  • #58822 返信

    maze

    Autoptimizeを停止してみましたが特に解決に至りませんでした。
    他、キャッシュ、圧縮に関するプラグインを停止してみましたが解決できません。
    かうたっくさんがおっしゃるように更新タイミングによって表示箇所が微妙に異なることも気になっています。

  • #58825 返信

    かうたっく

    さっきの投稿時CSS対応がなぜか反映しなかったのはAutoptimizeのせいかもしれません?今テスト環境でYouTubeのiframeで幅指定できるか確認したらできたのでCSSで指定できると思います。

    ただインスタの1つのアドレスに使われる画像によって高さがそれぞれ異なるので、表示されないインスタそれぞれCSSで指定が必要になります。

    以下がそのCSSです

    iframe[src^="※1インスタの該当引用先、固有のアドレス"] {
    	height: ***px;
    }

    ※1:コピペした引用中のインスタsrcから始まる固有のURLを指定

    heightは引用しているインスタの高さをそれぞれ指定

    固有のアドレスを指定することで、そのインスタのみ高さ指定する感じです。5個表示されなければ、それぞれ固有のアドレスを指定したCSSを5個書く必要があるって事です。※100個なら100個必要

    すべてのインスタ画像の高さが違うので、自分で対応するならこのような対応になるって話だったりします。

  • #58826 返信

    かうたっく

    ※1:コピペした引用中のインスタsrcから始まる固有のURLを指定

    違った。。

    コピペしたであろう、引用タグがありますよね。そこに書かれているアドレス:固有のアドレス:URLを指定する必要があるってことです。

    もしかしたら、引用するインスタのアドレス(どのブラウザでも同じURL)で対応できるかもしれません。

  • #58834 返信
    わいひら
    わいひら
    キーマスター

    そもそも、どのようにinstagramのブログパーツを表示しているかによっても変わってくると思います。
    埋め込みタグをinstagramで取得して記事に挿入しているのか、それともプラグインとかで表示させているのかによっても違います。
    ただ、いずれにせよ原因はテーマにはないと思うので、原因究明ができなかったとしてもご了承ください。
    あと一度、全てのプラグインを無効にして試していただければと思います。
    動作不良時のガイドライン
    それにより、「プラグインが原因かどうか」の切り分けができるかと思います。

  • #58836 返信

    mazen

    かうたっくさん、わいひらさん

    ご丁寧にありがとうございます。
    また、初心者のため説明が足りておらず、そして理解が足りず申し訳ありません。

    埋め込みタグをinstagramで取得して記事に挿入しております。
    プラグインは一度全て停止してみましたが、変わりませんでした。

  • #58843 返信

    かうたっく

    インスタの設定で何か指定があるのか、iframeの読み込みがおかしいのか、インスタ側のお問い合わせで伺っても良いような気もしますが…

    上述通り、インスタ側で何らかの設定があるのかもしれないですが、インスタしてないので詳細は不明です。インスタ側にお問い合わせする内容ではないかな?と個人的に感じてます。

    埋め込みタグをinstagramで取得して記事に挿入しております。

    よく分かりませんが、埋め込みタグをコピペした状態で確認すれば、インスタが表示されてない状態:横に灰色の線が1本ある状態で、こちらサイドからifremeの高さを指定するのは、面倒なCSS対応しかないようにおもうので。#58825のCSS

    ただ詳しい人のご意見を待ってから、またご対応していただけますか

  • #58856 返信
    わいひら
    わいひら
    キーマスター

    プラグインが原因でなくて、公式タグを貼り付けているのであれば、Instagramに問い合わせていただくしかないかもしれません。
    以下のように書いて数字を調整すれば、表示はされます。

    .instagram-media {
        min-height: 800px;
    }

    けれど、instagramの縦横比率は違うので、全てに当てはまるものではないと思います。

    というか、ここまで書いて、かうたっくさんも同じようなことを書いているのに気づきました;

  • #58862 返信

    mazen

    お二人ともご親切にありがとうございます。
    教えていただいた方法を試してみつつ、難しいようでしたら問い合わせてみますね。

返信先: Instagramの画像が部分的に表示されない
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)