・ネイティブ広告を作ったけど、レイアウトが崩れる
・nendでインフィード広告が作りたい
当ブログはnendの広告を起用しているのですが、アドセンスのようなネイティブ広告(インフィード広告)を掲載したくなり、自動作成ツールを使って新しく広告を作りました。
しかし、ツール任せで作ると、「広告ではない広告」ができてしまうのです。
そこから細かい編集を苦労して行って、下のような広告ができました↓
そこで、「こんなに苦労したのだから、記事のネタにしてしまおう！」と考えた次第です。
というわけで、今回は『nendでネイティブ広告(インフィード広告)を作る方法』をご紹介したいと思います。
よかったら覗いて行ってください
ツールを使って大枠を作る
まずはnendのネイティブ広告作成ツールを使って大枠を作っていきます。
(CSSなどに理解がある人は、この項目を飛ばしても問題ありません)
作成手順
nendにログイン > “広告枠の管理”タブの広告枠をクリック > “新規広告枠の作成”をクリック
の流れで、広告作成画面に移動します。
作成画面に入ったら、以下の画面を見本に設定しましょう。
『広告画像選択』では広告を貼りたい場所に合わせて選択します(ここを間違えると作成できません)。
私はトップページの新着広告の欄に貼るため、”横長(5:3)の大きい広告画像”を選択しました。
各項目の入力ができたら、下にある“レイアウトの編集へ”をクリック。
ページ移動したら、左の“Easy Ad Editor”をクリックして、広告を貼りたいページのURLを入力。
移動したページ先で、疑似スマホ画面を操作しながら、広告を挟みたいコンテンツをクリックしましょう。
作成された広告の見本が画面左に表示されたらOKです。
(大雑把な見本です。あまりアテにはなりません。)
ここまで来たら大枠の作成は完了です。
確認のためにも、”広告コードの作成”をクリックして、広告をブログに貼ってみましょう。
(承認までに少し時間がかかります)
広告のレイアウトを確認
広告をブログに貼ってみた結果はどうでしたか？
問題なく広告の画像が表示されたり、サイズ感もぴったりなら問題ありません、お疲れさまでした。
もし、レイアウトが崩れていたり、画像が広告のものでない場合は細かい調整が必要です。
次の項目へ進みましょう。
ツールだけで文句なしのレイアウトになった試しはないです…
レイアウトの細かい調整
コンテンツと広告のレイアウトを合わせるために、HTMLを書き換えていきましょう。
私もHTMLに詳しくないので、極力簡単にやっていきます。
デベロッパーツールでレイアウトの確認
まずは広告と並べるコンテンツのレイアウトを確認しましょう。
GoogleChromeを開きます。
広告を貼るページを開いて、ブラウザ右上の設定「︙」をクリック、その他の設定 > デベロッパーツールをクリックします。
デベロッパーツールが画面右側に表示されたら、ツール画面左上の矢印マークをクリックして、ページ内の対象のコンテンツにカーソルを合わせます。
すると、コンテンツの大きさや画像サイズなどが表示されます。
ここの情報が後で必要となってきます。
このタブは開いたままにしておきましょう。
広告のソースコードを確認する
それでは実際にレイアウトを変更していきましょう。
nendにログイン > 広告枠の管理 > 広告枠 > 先ほど作成した広告にレイアウトの”レイアウト”のタブをクリック
ソースコードが表示されるので、これを編集していきます。
先程開いたデベロッパーツールを確認しながら、画像の調整などを行いましょう。
このソースコードは選択したコンテンツによって異なるため、これといった正解を提示できないのはもどかしいところ。
ただ、当ブログのようにアイキャッチ画像が広告に使われることが多いので、その際はアイキャッチの画像URLから広告画像 “{{LARGE_WIDE_IMAGE}}” への書き換えを行いましょう。
【あとがき】目先の銭かユーザーか
自力でネイティブ広告を作るのはなかなか面倒ですね。
その点、アドセンスの自動広告は便利だな～と思う訳です。
しかし、自動広告に任せっきりだと結構な数の広告が貼られますよね？
あそこまで行くとユーザーにとっては鬱陶しいだけです。
ページ移動時の画面いっぱいの広告とか
広告とユーザービリティのバランスを大事にするため、手動で広告をコントロールできるようにならないといけないですね。
今後も勉強していかねば！
