CSS画像ポップアップですっきり広告


サイドメニューを折りたたんだら、訴求力が落ちてしまって、スクロールしてもついてくるメニューを追加、そこで広告ができないかと考えた、という話を前にしましたが、今回は、その広告に導入したCSSポップアップの資料を作成しておきたいと思います。

まず考えたのが、spanのtitle属性を利用する方法です。

これは、もともとサイドメニューのポイントサイト用語辞典などで使っていたんですが、


案件

↑こんな感じです。※

マウスカーソルを合わせると意味が分かります。


ただ、バナーを使いたかったので、CSSドロップダウンメニューとか色々と調べていたら、CSSで画像をポップアップできることがわかったんですね。

これ、なかなかの優れもので、改造して二階層にしちゃいました。

画面上部にスクロールしてもついてくるメニューを追加したんですが、そちらでも使っています。

↓にその一部を持ってきました。


マウスオーバーでお知らせを表示、クリックで登録ページに移動できます。

※実際の広告です。


こちらからもご登録いただけます!モッピーモッピー!お金がたまるポイントサイト
14年注目度No1
げん玉毎日お得がいっぱい げん玉
人気No1
アンケート系下線部にマウスカーソルを合わせると
次のポップアップが開きます↓
ECナビ毎日貯まる ポイント貯めるなら、ECナビ
アンケートで稼ぐなら

参考ページはこちら。

CSSポップアップ画像


ページを開いたときにスクロールしなくても目に入る場所に広告を置いておくことは大事ですが、CSS画像ポップアップを使えば、すっきりと広告ができます。



スポンサーサイト
にほんブログ村 小遣いブログ ポイントサイトへ FC2おこづかい稼ぎランキング

コメント

コメントの投稿

非公開コメント