忍者AdMax レスポンシブ広告でPC・スマホの表示を切り替える

予めPC・スマホで切り替えたい広告枠を追加しておく。表示できる広告は1ページにつき3つまでなので3つずつ作成。
忍者AdMaxの登録＆広告の設置


ログイン後にサイドバーの「PC/SP広告切替」をクリック。


「切替タグの作成」をクリック。


同じ場所に表示したい広告枠を選択し、なるべく分かりやすい切替タグ名を付けてOKで完了。


同様の手順で記事本文の下にも切替タグを作成。

まだPC・スマホで設置できる広告枠が1つずつ残っているが、当ブログはそれぞれの設置場所がサイドバー・ヘッダー下と違うのでそれに関しては通常の広告枠を利用した。


後は普通にテンプレートの設定からHTMLでタグを適当な場所に貼り付けるだけ。レスポンシブデザインにする前の広告枠が残っていれば予め消しておく。

最後に右クリックから検証(Chromeの場合)でデベロッパーツールを開き、スマホのページでもちゃんと広告が表示されるか確認。

以下は当ブログの広告設置場所のメモ。


◆ヘッダー下・オーバレイ(スマホ)

<!--------------------▼忍者AdMax ヘッダー下・オーバーレイ(スマホ)▼-------------------->
<div align="center">
<!-- admax -->
広告表示タグ
<!-- admax -->
</div>
<!--------------------▲忍者AdMax ヘッダー下・オーバーレイ(スマホ)▲-------------------->

</header>の直後に設置。スマホに合わせてセンタリグ表示。


◆記事本文と追記の間(PC/スマホ)

<!--------------------▼忍者AdMax 記事本文と追記の間(PC/スマホ)▼-------------------->
<!--permanent_area-->
<div align="center">
<!-- admax -->
広告表示タグ
<!-- admax -->
</div>
<!--/permanent_area-->
<!--------------------▲忍者AdMax 記事本文と追記の間(PC/スマホ)▲-------------------->

<!--more-->の直前に設置。スマホに合わせてセンタリグ表示。permanent_areaタグで個別記事でだけ表示されるようにした。

#postscript {
  margin-top: 0px;
  padding-top: 20px;
}

そのままだと広告のすぐ下に本文や画像がきて余白が無かったので、CSSで広告下に余白を確保。marginを-40pxから0pxに変更。paddingも40pxから20pxに変更。



◆記事本文の下(PC/スマホ)

<!--------------------▼忍者AdMax 記事本文の下(PC/スマホ)▼-------------------->
<!--permanent_area-->
<div align="center">
<!-- admax -->
広告表示タグ
<!-- admax -->
</div>
<!--/permanent_area-->
<!--------------------▲忍者AdMax 記事本文の下(PC/スマホ)▲-------------------->

記事本文の下の広告は<!--/more-->の直後に設置。スマホに合わせてセンタリグ表示。permanent_areaタグで個別記事でだけ表示されるようにした。



◆サイドバー(PC)

<!-- admax -->
広告表示タグ
<!-- admax -->

プラグインの設定からフリーエリアに設置するだけ。

関連記事

• amazletからAmaQuickへ移行 2020/04/28
• 忍者AdMaxのポイントをAmazonギフト券に交換 2018/11/14
• 忍者AdMax レスポンシブ広告でPC・スマホの表示を切り替える 2017/11/03
• Amazonアソシエイトの登録 2016/01/11
• 忍者AdMaxの登録＆広告の設置 2015/12/14