とりあえずアフィリエイト広告をスマホ下部に固定したかったので、やったことをメモしておきます。

オーバーレイ表示（変な余白を作らない。）

基本は簡単。DIVでくくってCSS一箇所指定すればいいだけですね。
でもなぜか3pxぐらい下に余白ができてしまうので、CSSをちょっと工夫してみました。

.banner{
	width:100%;
	height:auto;
	margin:0 auto!important;
	padding:0!important;
	position: fixed;
	bottom: 0;
	text-align: center;
	z-index: 1000;
	font-size: 0;  /* 余白対策 */
	line-height: 0;  /* 余白対策 */
	background: linear-gradient(transparent 0%, #ffffff 50%);   /* 背景うっすら白くグラデーション */

}
.bannera img{
 display: block;  /* 余白対策 */
 max-width:320px;
 height:auto;
 margin:0 auto!important;
}

「.banner」ってクラスのDIV作ってそこにアフィリエイトバナーを入れます。画像の幅はスマホ用なんでとりあえず320より大きかったらリサイズ、センタリングあり、背景丸見えなのが嫌なのでグラデかけてみたり。この辺は好みで変えましょう。

ちなみにWordpressでスマホだけにこのバナーを表示させたいなら、wp_is_mobile()で判定すればいいですよ。

PHPで、いろんなバナーをランダムで表示する

ついでにPHP使いつつバナーをランダム表示させてみます。

<div class="banner">
	<?php

		$r = mt_rand(0, 2);
		if ($r == 0) {
	?>
	<!-- banner0 -->


	<?php }else if($r == 1){ ?>
	<!-- banner1 -->
	 

	<?php } else { ?>
	<!-- banner2 -->


	<?php } ?>
</div>

これも超単純ですね。mt_randで0～2とかの数字つくって分岐させるだけです。