これでバッチリ! 忍者AdMaxのネイティブ広告を、より自然体に修正してみた

f:id:kminebg1110:20160102201055j:plain

ブログデザインのプチ記事です。以下の記事「はてなブログに忍者Admax・スマホ向けネイティブ広告を入れてみた 」のとおり、忍者AdMaxのネイティブ広告を取り入れてみました。

がしかし、「nendのネイティブ広告がかなり自然体」になりそうな予感(nendの広告承認中のため実証待ち)であるため、忍者AdMaxのデザインはイマイチ納得がいかない。

nendのネイティブ広告は多少のデザイン修正はできるため、「もしや忍者AdMaxも修正できるかも」と設定画面を確認してみると、ちゃっかり修正できました。以下はその簡易レポートです。

スポンサーリンク

修正前後の画像比較

こちらが修正前。画像の位置が上のものとズレている・画像が小さい・フォントも小さいなど不自然です。

f:id:kminebg1110:20160102192605p:plain

▼こちらが修正後。当然ながら広告であることを明示しなければいけないため、右に「AD」と表示がありますが、より自然になりました。ホントは、上に薄いボーダー、番号欄のところに「AD」と表示できればよいのですが、未熟者の私にはこれが限界です。

f:id:kminebg1110:20160102192637p:plain

修正した事項

忍者AdMaxの広告枠設定を開くと、以下の赤丸のとおり「修正」ボタンがあります。

私が修正したのは四角枠の部分(後述)。

画像①

f:id:kminebg1110:20160102192703p:plain

左上にある「?」マークをクリックすると青枠の「主な設定項目」が表示されます。

ここにあるように「必須」項目は変更しないようにしましょう。特に、読者の方を惑わすことがないよう、「AD」「広告」などの広告表記を削除してはダメです。

画像②

f:id:kminebg1110:20160102192621p:plain

実際に修正した箇所は、画像の位置合わせ・サイズは以下の赤文字とおり。(画像①を参照ください)

  • padding : 5px (上の画像からの位置)35px(左端からの位置)
  • 画像のサイズを「注目記事」の画像にあわせ、width: 70px;height;70px
  • フォントについては、画像①の下の赤枠2箇所を実際のスマホ画面にて出来具合を確認しつつ修正。

<a href=”${CLICK_URL}” target=”_blank” style=”box-sizing:border-box;display:table;table-layout:fixed;width:100%;padding:5px 35px;”> <div style=”display:table-cell;width:70px;height:70px;background-

まとめ

びっくりするほど簡単に修正でき、自然にみえるよう収まったと思いますがいかがでしょうか。広告を貼ることによる効果よりも、「何か違うぞ」と感じていただけると十分です。今回はプチ修正ですが、それにしても、ブログでのデザイン修正・カスタマイズは時間を忘れて没頭してしまいます。

スポンサーリンク

シェアする

フォローする

関連記事