スマホ閲覧時だけフッターに広告が出てくるようにしたい」
「特定の記事だけに広告を表示したい。」
そんな方も多いと思います。
僕もやりたくてプラグインややり方を調べてみたのですが探してもやり方が出てこなかったので自分で追加してみました。
「スマホ閲覧時だけフッターに広告が出てくるようにしたい」
「特定の記事だけに広告を表示したい。」
そんな方も多いと思います。
僕もやりたくてプラグインややり方を調べてみたのですが探してもやり方が出てこなかったので自分で追加してみました。
スマホで追従フッターを設定する方法
今回やりたいのはこれ。
スクロールしても常にフッターにバナー広告が表示されるようにしたいです。
スマホで追従フッターを設定する方法
①バナーを用意する
今回はAmazonのKindle Unlimitedを紹介するページに固定表示したいのでAmazon公式サイトからバナーを取得しています。(コードではなく直接画像をダウンロードしてください)
実際にやるときは各ASPからダウンロードしてください。
②ページ下部に画像を置く
どこでもいいのですがとりあえず記事の最下部に画像をドラック&ドロップします。
③画像にリンクをはる
追加した画像にアフィリエイトリンクを貼ります。
④ブロックにクラスを追加する
ブロックを選択しクラスを追加します。
今回は「fixed_ad」にしましたが名前は適当なので好きにつけてください。
ちなみにHTMLで確認するとこんな感じです。
aタグやimgタグにクラスを付与しても動作しないのでブロックレベルの要素(<p>や<div>、<figure>など)に追加するようにしましょう。
④記事にカスタムCSSを追加する
③で追加したクラスにcssを追加します。
ページ最下部のカスタムCSS項目に以下のcssを追加します。
.fixed_ad{
display:none;
}
@media screen and (max-width:480px) {
.fixed_ad{
display: block;
position: fixed;
bottom: 0px;
left: 0;
z-index: 111111;
margin: 0!important;
}
}
⑤完成
まとめ
以上、スマホでだけ表示できるフッター広告の設置方法でした。
コメント