本ブログは、i-mobileを導入していただくメディア様向けのサポートブログです。
今回は、リリースしたばかりの「インフィード広告」の仕様と、
カスタマイズ例をご紹介します。

インフィード広告の特徴は「CSSによるカスタマイズが可能」だということです。
リサイズ、色変更、枠線の追加、フォントタイプの変更、下線部の追加、画像の非表示...等
基本的にCSSで調整が可能なことはインフィード広告でも設定が可能です。
もちろん、PC、スマートフォン共にカスタマイズに対応しています。


まずは何もカスタマイズしていないインフィード広告の規格がこちら。
ノーカスタム
             ※枠線はイメージです
-------------------------------------------------------
【PC】
枠全体のサイズ:300px×72px
画像のサイズ :57px×57px
テキスト領域のサイズ:213px×72px
タイトルのフォントサイズ:14px
本文のフォントサイズ  :12px

【スマートフォン】

枠全体のサイズ:320px×72px
画像のサイズ :57px×57px
テキスト領域のサイズ:233px×72px
タイトルのフォントサイズ:14px
本文のフォントサイズ  :12px
-------------------------------------------------------


CSSで何も記載せずに広告タグを貼っただけの状態ですと、
上記の仕様で広告が表示されます。

今回はカスタマイズの一例をCSS付きでご紹介しますので、
ぜひぜひインフィード広告をお試し頂ければと思います。

※黄色いマーカー部のみをコピペしてお使いください。

【1:テキストのみ】
CSS記述
-------------------------------------------------------
.imobile_infeed_img_container{
  display:none;

}

-------------------------------------------------------
上記CSSを記述したインフィード広告
画像なし
             ※枠線はイメージです。

【2:画像を右側に表示】
CSS記述
-------------------------------------------------------
.imobile_infeed_img_container{
float:right !important;
}

-------------------------------------------------------
上記CSSを記述したインフィード広告
逆画像
             ※枠線はイメージです。          

【3:タイトルの前に[PR]を追加】
CSS記述
-------------------------------------------------------
.imobile_infeed_title:before{
content: "[PR]";
}

-------------------------------------------------------
上記CSSを記述したインフィード広告
pr付き
             ※枠線はイメージです。

上記以外にも色々なカスタマイズが可能なので、
ぜひお試しください。

CSSのサンプル集をご用意したので、下記からダウンロードしてご活用ください。
※下記リンクを右クリックし、「名前をつけてリンク先を保存」を選択してください。
【PC用】
【スマートフォン用】


【2月13日追記】
レンタルブログサービスでのCSS記載場所につきましては、コチラをご参考ください。