INO'S BLOG

投資している会社員のブログ

i-mobile Ad Networkのネイティブワイド広告を2つ横並びにする方法

Googleアドセンスの代わりとしてi-mobile Ad Networkを利用している人もいると思います。以前、レスポンシブデザインのサイトにおいてPC用とスマホ用のタグを使い分ける方法を書きました。

今回は、ネイティブワイド広告を2つ横並びにして表示する方法を紹介します。ネイティブワイド広告を利用しようとしている人の参考になれば幸いです。

f:id:toushi-ino:20200909130415j:plain

i-mobileの広告を2つ横並びにする方法を紹介します

ネイティブワイド広告を2つ横並びにする方法

ネイティブワイド広告を2つ横並びにする手順を簡単に押さえておきます。

  • 広告スポットの申請
  • テンプレートの設定
  • 広告表示要素の設置
  • 広告タグの設置

それぞれ簡単に説明します。

広告スポットの申請

まだ、ネイティブワイドの広告スポットをお持ちでない人は、最初に広告スポットの申請をします。他の広告スポットの時と同じように、新規広告スポットから申請をします。

このとき、

  • 広告スポット名:お好みで(わかりやすい方が良い)
  • 広告スポットサイズ:ネイティブワイド
  • 表示個数:2

としておきます。サイズ以外は後で何度でも変更できますので、間違えても問題はありません。


他の項目については、次のようにします。

  • 最大タイトル文字数などはお好みで変更をしてください(実際に表示される広告を見て必要に応じて変更するのが良いと思います)。
  • 表示個数を2にすると、セパレータという項目が出てきます。ここもお好みで入力します(私は<div id="separator"></div>としています)。
  • 広告表示位置は何もしなくて大丈夫です

次にテンプレートの設定をします。

テンプレートの設定

公式で紹介されているものもありますが、このままではPCで見たときに不自然なので、私が改造したコードを紹介します。

<style>
.imobile_nativead {
width: 46%;
height: auto;
float: left ;
box-sizing: border-box;
background-color: #FFF; /*背景色*/
margin: 1%;
white-space: normal;
}
.imobile_nativead a{
text-decoration: none;
}
.imobile_link {
text-decoration: none;
}
.imobile_image_area {
margin: 0 auto;
display: table;
}
.imobile_image {
position: relative;
display: table-cell;
margin: 0 auto !important;
vertical-align: middle;
text-align: center;
}
.imobile_image img {
width: 100%;
height: auto;
vertical-align: middle;
}
.imobile_pr {
position: absolute;
top: 0;
right: 0;
background-color: #696969;
color: #fff;
font-size: 11px;
line-height: 1.6;
padding: 0 4px 0 4px;
}
.imobile_text_area {
height: auto;
}
.imobile_text {
font-size: 14px;
padding: 5px;
color: #000; /*テキスト色*/
line-height: 1.3;
}
.imobile_button {
height: 30px;
background: #696969; /*ボタン背景色*/
color: #FFF; /*ボタンテキスト色*/
text-align: center;
font-size: 14px;
line-height:28px;
margin-top: 5px;
border: solid 1px #fff;
border-radius: 5px;
width: 90%;
margin: 0 auto;
}
</style>
<div class="imobile_nativead">
<a href="{{click_url}}" target="_blank">
<div class="imobile_image_area">
<div class="imobile_image">
<img src="{{image_url}}" />
<div class="imobile_pr">PR</div>
</div>
</div>
<div class="im_bottom">
<div class="imobile_text_area">
<div class="imobile_text">{{description}}</div>
</div>
<div class="imobile_button">詳細を見る</div>
</div>
</a>
</div>

このコードを広告テンプレートに貼り付けてください(最初にあるものは消す)。なお、色などは必要に応じて変更をしてください。

サーバ側のテンプレートを使うはチェックを入れたままにして新規登録をします。

f:id:toushi-ino:20200909084350p:plain

このコードを使うと上のような感じになります。

広告表示要素の設置

先ほど作った広告のタグを取得する画面にいくと、広告表示要素というものがあると思います。これを広告を表示したいところに設置します。


例えば、はてなブログの記事下に表示したい場合、

  • デザイン>カスタマイズ>記事>記事下

に広告表示要素を張り付けます。

 

好きな位置に設置すれば良いと思いますが、2つ横並びの広告は記事下が一般的だと思います。

広告タグの設置

公式にもあるように、ネイティブワイドの広告タグはbody閉じタグ直前に貼ります。


はてなブログの場合、

  • デザイン>カスタマイズ>フッタ

に貼り付ければOKです。

注意点

以下の3点に注意してください。

  • スマホでは2つ横並びはおすすめしない
  • 1つしか表示されないときがある
  • デザインが崩れる可能性がある

スマホではおすすめしない

ネイティブワイド広告を2つ横並びに表示する方法を紹介しましたが、スマホでは1つだけになるようにしておいた方が良いと思います。


実際に見ればわかりますが、スマホで2つ横並びになるとそれぞれの広告が小さくなりますので、こちらの方法を応用してスマホのときは1つだけになるようにすることをおすすめします。

toushi-ino.hatenablog.com

1つしか表示されないときがある

原因は不明ですが、1つしか広告が表示されないときがあります。1つしか表示されないときは、左側に寄った状態で表示されます。

解決方法はないので、自然と2つ表示されるようになるまで待ちましょう。

デザインが崩れる可能性がある

お使いのサイトのCSSなどにより、広告が他の文字などの上に表示されたり、デザインが大きく崩れることがあります。

原因はfloatにある可能性が高いので、こちらの記事を参考に対処することをおすすめします。

参考:CSSのfloatプロパティで要素を横並びにする方法 - WEBST8のブログ

まとめ

i-mobile Ad Networkのネイティブワイドを使うと、広告を2つ横並びに表示することができます。特にPCの記事下にレクタングルが1つしかないのはスペースがもったいないので、導入してみてはいかがでしょうか。


まだ、i-mobileに登録していない人は登録をしましょう。簡単な使い方と一緒に紹介していますので、こちらを確認ください。

toushi-ino.hatenablog.com