iframeでdivがついてしまう

Simplicityの特徴 フォーラム 不具合報告 iframeでdivがついてしまう

  • このトピックには7件の返信、2人の参加者があり、最後にひとぅにより5年、 11ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #1830
      ひとぅ
      ゲスト

      不具合か分からないのですが質問をさせてください。

      記事中に、Amazonアソシエイトのコードを挿入して、横に2つ並べて表示をしたいのですが、2つめが改行されて2行目に表示されてしまいます。

      ソースを見ますと、Amazonアソシエイトのコードの前後に<div class=”video-container”><div class=”video”>〜</div></div>が挿入されています。

      Amazonアソシエイトは<frame>がつかわれています。

      以下の記事の最下部に2つ並べた箇所がありますが、そこが該当箇所になります。
      http://hitoxu.com/03602

      大変トン恐縮ですが、よろしくお願いします。

    • #1834
      わいひらわいひら
      キーマスター

      確かにiframeは、そうなるようにしてあります。
      なぜそうなるのかというと、youtubeやInstagramの動画をレスポンシブ表示するためです。
      WordPressでYouTubeやInstagramのiframeをレスポンシブ対応にする方法

      しかし、Amazonデフォルトの商品紹介タグがiframeということは盲点でした。
      なるべく、YouTubeとInstagram以外はレスポンシブ表示用のラップをしないように変更してみようと思います。難しい処理なので、必ずできるかどうかは、ちょっとやってみないとわからないんですけど。

    • #1835
      わいひらわいひら
      キーマスター

      簡単な解決方法を思いつきました。javascript.jsの以下の部分を

      ///////////////////////////////
      //Instagramコンテナのクラス付け替え
      ///////////////////////////////
      jQuery(function(){
        //srcにinstagramが含まれているiframe要素を探す
        jQuery('.video-container .video iframe[src*="instagram"]').each(function(){
          //親コンテナ要素のclassの付け替え
          jQuery(this).parent().removeClass('video').addClass('instagram');
          //親の親コンテナ要素のclassの付け替え
          jQuery(this).parent().parent().removeClass('video-container').addClass('instagram-container');
        });
      });

      以下のように変更すれば、横並びに表示されると思います。

      ///////////////////////////////
      //Instagram、Amazonコンテナのクラス付け替え
      ///////////////////////////////
      jQuery(function(){
        //srcにinstagramが含まれているiframe要素を探す
        jQuery('.video-container .video iframe[src*="instagram"]').each(function(){
          //親コンテナ要素のclassの付け替え
          jQuery(this).parent().removeClass('video').addClass('instagram');
          //親の親コンテナ要素のclassの付け替え
          jQuery(this).parent().parent().removeClass('video-container').addClass('instagram-container');
        });
        //srcにAmazonが含まれているiframe要素を探す
        jQuery('.video-container .video iframe[src*="amazon"]').each(function(){
          //親コンテナ要素のclassの付け替え
          jQuery(this).parent().removeClass('video').css('display', 'inline');
          //親の親コンテナ要素のclassの付け替え
          jQuery(this).parent().parent().removeClass('video-container').css('display', 'inline');
        });
      });

      うまくいくようでしたら、この変更を次のバージョンアップに適用したいと思います。

    • #1875
      ひとぅ
      ゲスト

      さっそくご返事をいただき、ありがとうございました。
      javascript.jsをご教示いただいた内容で修正しましたら
      Amazonアソシエイトの広告が横に並んで表示できました。
      ありがとうございます!!

      子テーマを利用していますので、元javascript.jsをLOCALにDL、
      編集後、子テーマにULしました。

      質問が逸れてしまいますが、この場合、VerUP時、手作業で都度VerUP手続きが
      必要になりますよね??

    • #1876
      わいひらわいひら
      キーマスター

      子テーマにjavascript.jsを追加したのであれば、バージョンアップは親テーマを上書きすれば手作業は不要になります。

      ただ、今回のSimplicity20140918で、YouTubeとInstagram以外のiframeはPHP側でdivでラップしないように修正してみました。

      今回のバージョンを使用すれば、JavaScript関係なく動作すると思います。

    • #1913
      ひとぅ
      ゲスト

      ありがとうございます!!
      ところで、Simplicity20140918はどこからダウンロードできますでしょうか?
      ダウンロードページはまだ反映されてないようなので。。。

    • #1918
      わいひらわいひら
      キーマスター

      Simplicity20140918をダウンロードページに反映させるの忘れていました;
      ダウンロードペーでにダウンロードできるようにしておきました。

    • #2038
      ひとぅ
      ゲスト

      ありがとうございます。
      無事DLできました!

7件の返信スレッドを表示中
  • トピック「iframeでdivがついてしまう」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)