どうやってつくればよいか教えてほしいです!
【内容】スマフォの画面を下に下げても、画面下側にバナーがでるものです。よく広告がついている。。
①ヘッダにjavascriptを設定する。
自分のスマホサイトヘッダにjavascriptを設定します。
具体的には、サイトの<head>と</head>の間に以下の二行を挿入します。
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="http://meerkat.jarodtaylor.com/download/jquery.meerkat.1.3.min.js" type="text/javascript"></script>
これで、オーバーレイ広告用のライブラリ(便利なツール)をサイトに読み込みます。
②表示したい広告を設定する。
自サイトのbodyタグ(<body></body>)の中に以下の3行を記述してください。
<div class="ads"> ここにASPで取得した広告タグを記述する。 </div>
③</body>タグの手前に以下を記述する。
<script type="text/javascript"> $(function(){ //meerkat stuff goes here $('.ads').meerkat({ background: '#FFFFFF', height: '50px', width: '100%', position: 'bottom', close: '.close-meerkat', dontShowAgain: '.dont-show', animationIn: 'slide', animationSpeed: 500 }); }); </script>
実は、これmeerkatというjavascriptライブラリを使ってオーバーレイ化しています。
上記③での記述のオプション値を変えると色々と自由にカスタマイズできます。
たとえば、position:"bottom"となっているところを、"top"にすると、
広告がサイトの上部にずっと張り付いてついてくる感じになります。
もっと細かくオーバーレイを調整したいという片は、是非meerkatの公式サイトで情報を得てください。
http://upup.blog3.fc2.com/blog-entry-566.html
①ヘッダにjavascriptを設定する。
自分のスマホサイトヘッダにjavascriptを設定します。
具体的には、サイトの<head>と</head>の間に以下の二行を挿入します。
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="http://meerkat.jarodtaylor.com/download/jquery.meerkat.1.3.min.js" type="text/javascript"></script>
これで、オーバーレイ広告用のライブラリ(便利なツール)をサイトに読み込みます。
②表示したい広告を設定する。
自サイトのbodyタグ(<body></body>)の中に以下の3行を記述してください。
<div class="ads"> ここにASPで取得した広告タグを記述する。 </div>
③</body>タグの手前に以下を記述する。
<script type="text/javascript"> $(function(){ //meerkat stuff goes here $('.ads').meerkat({ background: '#FFFFFF', height: '50px', width: '100%', position: 'bottom', close: '.close-meerkat', dontShowAgain: '.dont-show', animationIn: 'slide', animationSpeed: 500 }); }); </script>
実は、これmeerkatというjavascriptライブラリを使ってオーバーレイ化しています。
上記③での記述のオプション値を変えると色々と自由にカスタマイズできます。
たとえば、position:"bottom"となっているところを、"top"にすると、
広告がサイトの上部にずっと張り付いてついてくる感じになります。
もっと細かくオーバーレイを調整したいという片は、是非meerkatの公式サイトで情報を得てください。
http://upup.blog3.fc2.com/blog-entry-566.html
みなさんありがとうございました。
みなさんありがとうございました。
2013/06/23 17:50:14