フリーソフトやChrome拡張機能の使い方、ゲーム攻略、漫画感想など雑多な内容。

0 Comments
忍者AdMax 01
最近ブログテンプレートをレスポンシブデザインに変更したのだが、忍者AdMaxがレスポンシブ広告に対応してるのを知らなくて無駄に苦労した。何故最初から公式を確認しなかったのやら…。
『忍者AdMax』「PC/SP広告切替」「サイトコピー」機能追加のお知らせ

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

忍者AdMax レスポンシブ 01
ログイン後にサイドバーの「PC/SP広告切替」をクリック。

忍者AdMax レスポンシブ 02
「切替タグの作成」をクリック。

忍者AdMax レスポンシブ 03
同じ場所に表示したい広告枠を選択し、なるべく分かりやすい切替タグ名を付けてOKで完了。

忍者AdMax レスポンシブ 04
同様の手順で記事本文の下にも切替タグを作成。

まだ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 -->

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

Comments 0

There are no comments yet.