広告の上に要素が来ないようにする

当初設定したレイアウトは以下。PCはサイドバーがあるので、その下にあるぐらいで、あとは記事の下に入れただけ。

特に問題があることはないだろうレイアウトだったけれど、色々調べている時、広告に重なる・近接したレイアウトはよろしくないという内容があり、見直すことにした。

トップへ戻るボタン

ある程度ページをスクロールすると出現する、トップへ戻るボタン。モバイルではサイドバーがないので広告に重なることはないけれど、PCでは広告の上から出現する。

たまたまこのレイアウトになってしまったものの、これはあまりよろしくない。意図していなくても、誤クリックの誘導と判断されかねない。

そこで、広告の下から出現するように修正。

PCはこれでOK。今度はモバイル表示だと、記事の下に配置した広告に重なる。気をつけないと、結構気づかないような気もする。でもトップへ戻るボタンは、標準装備なので、もしかすると自動広告レイアウトなどであれば、避けてくれるのかもしれない。

ここは重ならないよう避けられないので、トップへ戻るボタンが隠れるように修正。z-index大活躍。

ひとまずこれで安心。今後増やすなりレイアウトを変更する場合は、広告表示も合わせて注意しないといけない。