Web 2.0 Magazine: 29 Different Google Ads Styleにて、AdSenseのテキスト広告をCSSでWeb2.0風にするテンプレートが、２９種類も公開紹介されています。
これまで、背景に馴染ませるしかなかったテキスト広告が、立派なサイトのデザインの一部になります。
どうやって、デザインを変えるかというと、AdSenseのコードを変更するのは違反ですので、CSSを使ってその周りの背景に手を加えます。
利用方法
- 次のテンプレート一覧ページで好みのテンプレートを選びます。
Web 2.0 Magazine: 29 Different Google Ads Style
- 「View Code」リンクをクリックすると、それぞれのテンプレートとコードが表示されます。
- 画面下の方の ImageDownLoad を「右クリック ＞ 名前をつけてリンク先を保存」でローカルへ背景画像を保存します。そして、保存したファイルは自分のサーバーのイメージフォルダへアップロードしておきます。
- CSS コードをスタイルシートに追加します。追加するときに、背景画像へのリンクを自分のアップロードした先へ変更します。
-
広告へ貼り付ける場所へ表示されているHTMLコードを貼り付け、
<!-- REPLACE ONLY THIS LINE WITH YOUR AD CODE -->
を広告コードと置き換えます。
（もしくは、既存の広告コードの周りを＜div id=”ad_code”＞タグで囲みます。） -
広告コードのカラーを指定されているものに変更します。
（注意：変更しないと、背景のデザインと同化することができません。）
これで完了です。これだけで、ポップなデザインのアドセンス広告の出来上がりです。
簡単なので、是非トライしてみてください。
リンク
Web 2.0 Magazine: 29 Different Google Ads Style
アドセンス申し込み
関連ページ
Tag: Google Adsense関連リンク
- アドセンスがフィードに対応！RSSに広告表示が可能に！
- Adsenseの動画ユニット（YouTube）を使ってみる
- アドセンスの広告レビューセンターを使ってみる
- カスタム検索でオリジナル検索エンジンを作って広告収入も得る方法
- 1クリック＄１４１も！クリック単価の高いGoogleアドセンスキーワードリスト
次の記事：
前の記事：
）
Comments
This is all taken from http://adclustr.com/
If anyone wants to bookmark anything, it should be the actual site. Thank you all!!
[…] AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 – GMania | グーグル… (tags: google adsense tips css) […]
確かにいいデサインですね。ありがとうね
[…] AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 – GoogleM…、ポップなデザインのアドセンス広告の出来上がりです。 簡単なので、是非トライしてみてください。 リンク web 2.0 magazine: 29 different google ads style アドセンス申し込み 関連ページ google adsen…はてなブックマークより […]
View Code 押すと別のサイトにぶっ飛ばされるんですがどうすればいいでしょうか？
[…] AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 – GoogleM…nse広告をcssでweb2.0風にするテンプレート29種類 管理人 @ 6月 26日 04:20pm adsense web 2.0 magazine: 29 different google ads styleにて、adsenseのテキスト広告をcssでw…はてなブックマークより […]
[…] AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 – GoogleM…、ポップなデザインのアドセンス広告の出来上がりです。 簡単なので、是非トライしてみてください。 リンク web 2.0 magazine: 29 different google ads style アドセンス申し込み 関連ページ google adsen…はてなブックマークより […]
Add A Comment