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

[キラク]

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

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

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

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

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

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

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

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

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

[わいひら]

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}

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

[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の幅いっぱい使えると覚えておくとよいかと思います。

[Hidekichi]

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

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

[みき]

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

まじそれなです

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

…

本当に表示されてるー 笑

[みき]

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

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

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

IEの場合(正常)

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

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

[みき]

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

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

上がchromeで
下がIEです

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

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

[Hidekichi]

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

[キラク]

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

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

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

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

[投稿者]

投稿