iframeでdivがついてしまう

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

このトピックには7件の返信が含まれ、2人の参加者がいます。3 年、 1 ヶ月前 ひとぅ さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #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できました!

トピック「iframeでdivがついてしまう」への新規返信追加は締め切られています。

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