PCからChromeで見ると、忍者728×90の広告の右端が切れる(IEでは正常表示)

Simplicityの特徴 フォーラム 不具合報告 PCからChromeで見ると、忍者728×90の広告の右端が切れる(IEでは正常表示)

このトピックには8件の返信が含まれ、2人の参加者がいます。6 ヶ月、 3 週間前 キラク さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #49076 返信

    キラク

    こんにちは。
    Simplicityを使わせていただいております。

    色々調べたのですが、わからなかったため質問させていただきました。

    <現象>
    忍者ADMAXの728×90の広告を設置したのですが、PCからChromeやFirefoxで見ると広告の右端が切れてしまいます。
    なお、IE11で見た場合は正常に表示されます。
    ブラウザキャッシュの削除は行っています。

    広告設置の方法は、インデックスリストトップと、投稿タイトル上に、パソコン用広告ウィジットで設置しています。また、ウィジットの左端マージンのピクセル数にマイナスの値を入れて、位置調整をしています。

    広告表示の状態としては、左端はウィジットでのマージン調整のとおりテキストの表示領域より外側にも広告が表示されているのですが、右端はテキスト表示領域の外側が表示されていないようです。

    IE11では正常に表示されるため、ブラウザの非互換でしょうか。

    Simplicityのバージョンは、2.2.5です。

    サイトのURLは以下です。
    http://whitegold.site/

    ご確認よろしくお願いいたします。

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

    style.cssの以下の部分を削除すると、正常表示されるかと思います。

    /************************************
    ** とりあえず何でもレスポンシブ化するスタイル
    ************************************/
    img,canvas,iframe,video,svg{max-width:100%}.overflow-container{overflow-y:scroll}.aspect-ratio{height:0;padding-top:56.25%;position:relative}.aspect-ratio--object{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:100}

    今ちょっと見た限りでは、この記述は不要のような気もするので、今回テスト的に削除して自分のサイトで表示を確認してみようと思います。
    それで、問題ないようであれば、次のバージョンで削除してしまおうかと思います。

  • #49082 返信

    Hidekichi

    pcの時だけ正しく動作させるのであれば、

    @media screen and(min-width: 1024px) {
      #main {
        position: relative;
      }
      #widget-index-top .ad-space {
            margin-left: -23px; /*これ不要*/
        width: 100%;
        transform: translate(-50%);
        left: 50%;
        position: absolute;
      }
      #list {
        margin-top: 180px;
      }
    }

    こんな感じでしょうか。
    #widget-index-top .ad-spaceのmargin-left: -23px;は現在style属性で入っているものですがこれはいりません。

    #mainをposition: relativeで配置して、その中の.ad-spaceを左から50%の位置に配置し、それ自体の半分を左に寄せることでセンターに入れます。現在入っている広告サイズが703pxとかなので#mainの中に入りますがこれより大きくなった場合でも#mainのセンターに揃います。

    #listは広告の高さ分が確実に入るだけmargin-topを確保する必要があります。

    そもそも、広告が入り切らないのは#mainの幅にpaddingが入っていて740pxの幅が680pxしか使えないという所に問題があるわけです。よって、

    .home #main {
      padding: 20px 0;
    }
    .home #list {
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
    }

    などとすれば、トップを開いている時の#mainの横paddingは無くなるので740pxまで使えるようになります。後は#mainの中に入るその他の要素の幅を決定し、marginで横をautoにすれば自ずとセンターにそのサイズで入りますからpaddingは不要というのが理解してもらえると思います。
    こうしておけば最初のスタイルのようにtransformを使う必要もなくなります。

    上記は.homeだけに適用していますが、全体的に#mainからはpaddingを取るほうが僕はメリットがあると思います。最初の設定が面倒くさいですけどね。

    サンプル: #mainの中身をmarginでレイアウト | codepen

    paddingが無くても見た目変わらないでしょう?
    paddingがなくなれば、widthでサイズ指定とmargin: 縦 auto;でその中身が勝手にセンタリングされるのでその時(PC タブレット スマホ閲覧時)の#mainの幅いっぱい使えると覚えておくとよいかと思います。

  • #49083 返信

    Hidekichi

    ちなみにIE11で正常に表示されるということですが、サイズとpadding的にそうなるはずはない値なので、もし正しく見えているとすれば不正な表示です。
    overflowが効いていないなどの他のバグが露呈しているだけかと思います。

    IE11がfirefoxやchromeより正しく表示されるということは過去を含め未来永劫有りえません(笑)

  • #49084 返信

    みき

    IE11がfirefoxやchromeより正しく表示されるということは過去を含め未来永劫有りえません(笑)

    まじそれなです

    IEでサイトを開く
    Enterキー パーン

    本当に表示されてるー 笑

  • #49085 返信

    みき

    な、なんともいえないですね

    chromeの場合(右側が切れている)

    ———————————–
    |——————————- |
    || | |
    ||_____________________________| |
    |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|

    IEの場合(正常)

    ———————————–
    |———————————|
    || ||
    ||_______________________________||
    |_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _|

    なんというか中途半端に切れています

  • #49086 返信

    みき

    凡ミスした
    (解像度を忘れていた)
    すみません

    https://1drv.ms/i/s!Am5FaiBsdNRKk0i_7K9u1rEQvmsn

    上がchromeで
    下がIEです

    黒い部分が背景で
    水色の部分が広告です

    見ていただいたほうが一番わかりやすと思われますが
    念のため..

  • #49088 返信

    Hidekichi

    まぁ
    <div class="ad-space" style="margin-left: -23px;margin-right:-23px">
    でもいいんですけどね。ネガティブマージンはいずれにせよあまりよくありません。

  • #49089 返信

    キラク

    わいひら さん
    Hidekichi さん
    みき さん

    ご確認ありがとうございました。
    明日から旅行に行くもので、簡単に対処できる、わいひらさんにご回答いただいた方法で対処し、正常に表示されるようになりました。

    Hidekichi さん
    詳しい説明ありがとうございました。
    旅行から戻ったら、いろいろ試してみようと思います。

    みき さん
    フォローありがとうございました。

返信先: PCからChromeで見ると、忍者728×90の広告の右端が切れる(IEでは正常表示)
あなたの情報:




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