本ブログは、i-mobileを導入していただくメディア様向けのサポートブログです。
今回は、リリースしたばかりの「インフィード広告」の仕様と、
カスタマイズ例をご紹介します。
インフィード広告の特徴は「CSSによるカスタマイズが可能」だということです。
リサイズ、色変更、枠線の追加、フォントタイプの変更、下線部の追加、画像の非表示…等
基本的にCSSで調整が可能なことはインフィード広告でも設定が可能です。
もちろん、PC、スマートフォン共にカスタマイズに対応しています。
まずは何もカスタマイズしていないインフィード広告の規格がこちら。
——————————————————-
【PC】
枠全体のサイズ：300px×72px
画像のサイズ ：57px×57px
テキスト領域のサイズ：213px×72px
タイトルのフォントサイズ：14px
本文のフォントサイズ ：12px
【スマートフォン】
枠全体のサイズ：320px×72px
画像のサイズ ：57px×57px
テキスト領域のサイズ：233px×72px
タイトルのフォントサイズ：14px
本文のフォントサイズ ：12px
——————————————————-
CSSで何も記載せずに広告タグを貼っただけの状態ですと、
上記の仕様で広告が表示されます。
今回はカスタマイズの一例をCSS付きでご紹介しますので、
ぜひぜひインフィード広告をお試し頂ければと思います。
※黄色いマーカー部のみをコピペしてお使いください。
【１：テキストのみ】
CSS記述
——————————————————-
.imobile_infeed_img_container{
display:none;
}
——————————————————-
上記CSSを記述したインフィード広告
【２：画像を右側に表示】
CSS記述
——————————————————-
.imobile_infeed_img_container{
float:right !important;
}
——————————————————-
上記CSSを記述したインフィード広告
【３：タイトルの前に[PR]を追加】
CSS記述
——————————————————-
.imobile_infeed_title:before{
content: “[PR]”;
}
——————————————————-
上記CSSを記述したインフィード広告
上記以外にも色々なカスタマイズが可能なので、
ぜひお試しください。
CSSのサンプル集をご用意したので、下記からダウンロードしてご活用ください。
※下記リンクを右クリックし、「名前をつけてリンク先を保存」を選択してください。
【PC用】
【スマートフォン用】
【2月13日追記】
レンタルブログサービスでのCSS記載場所につきましては、過去記事「メディア様向け【各ブログサービスでのCSSの設置場所】」をご参考ください。
