パソコン版ホームページの下に広告を追従させる～WordPress,Diverテーマ～

2023年8月21日 2023年9月26日

中山テック代表

中山テック代表の中山です。

さて、最近ホームページ（パソコン版）でも最下に追従広告を配置させて頂きました。

※スマートフォン版の配置方法はこちら

CSSやHTMLでどのように配置したのか、お話したいと思います。

―――　PR　―――

Contents

1 特殊表示
2 HTML
3 CSS
4 まとめ

特殊表示

中山テックのＰＣ版追従広告はやや特殊です。

というのも、広告幅が画面の90％程度で、残10％は最上に移動のアイコン場所としているためです。

また、広告配置エリアでは、広告以外をクリックしても何も起きません。

ご安心頂ければと思います。

HTML

個別投稿ページ（page.php）のみ配置しております。

つまりブログのみ、広告を固定で最下に追従させるようにしております。

ここでは「koukoku-fixed-pc」「fixedPC」というCSSのクラスを指定してますが、固定のための重要なクラスになります。

CSS

@media only screen and (min-width: 959px){
  #koukoku-fixed-pc {⇒①
    background: rgba(255,255,255,0.50);
    &.fixedPC {
      left: 0;
      width: 90%;
      height: 90px;
      position: fixed;
      display: block;
      z-index: 1000;
      box-shadow:0px 3px 10px rgba(200,200,200);
  }

}
@media only screen and (max-width: 958px) {
  #koukoku-fixed-pc { ⇒②
    display:none;
  }
}

①について、下からふわっと出すのではなく、完全固定エリアなので難易度は低めです。

幅90％、高さ90px固定の枠を作るだけです。

※広告は合わせて高さ90pxのものを指定しております

ポジション固定で最下に出すようにしております。

HTMLの項での画像の通り、bottom:0pxというstyleを指定していることが前提であります。

②は幅959px未満は非表示としています。

※スマートフォン版は既にできているので、PC版と重ねる必要がありません