読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

これでバッチリ! 忍者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-

 

まとめ

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