楽天ゴールドのページにスマホ誘導バナー

jQueryで「ユーザエージェント」を識別
↓
「iPhone」、「Android」+「Mobile」にバナーを表示

バナーは画像ではなく「javascriptでテキスト出力」+「外部CSS読み込み」。

HTML（ページの最上部に記載）

<div id="smartphone"></div>

1	<div id="smartphone"></div>

CSS（smartphone.css)

#smartphone {
    width: 90%;
    text-align:center;
    font-size:36px;
    border:#969696 solid;
    padding:30px;
    margin:20px auto;
    border-radius: 10px;
    background-color:#f4b98a;
}

#smartphone {

width: 90%;

text-align:center;

font-size:36px;

border:#969696 solid;

padding:30px;

margin:20px auto;

border-radius: 10px;

background-color:#f4b98a;

}

jQuery（リンク　js/jquery-2.1.0.min.js　設置の場合）

<script src="js/jquery-2.1.0.min.js"></script>

1	<script src="js/jquery-2.1.0.min.js"></script>

jQuery（HTMLのID=smartphone 　CSS=css/smartphone.css　設置の場合）

<script type="text/javascript">
$(document).ready(function(){
    if ( navigator.userAgent.indexOf('iPhone') > 0 ||(navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {
        $("head").append("<link>");
        css = $("head").children(":last");
        css.attr({
        rel: "stylesheet",
        type: "text/css",
        href: "css/smartphone.css"
}); 
        $("#smartphone").html('<p><a href="http://www.rakuten.co.jp/●●●●●/">スマートフォンサイトはこちら</a></p>');
    } 
});
</script>

$(document).ready(function(){

if ( navigator.userAgent.indexOf('iPhone') > 0 ||(navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) {

$("head").append("<link>");

css = $("head").children(":last");

css.attr({

rel: "stylesheet",

type: "text/css",

href: "css/smartphone.css"

});

$("#smartphone").html('<p><a href="http://www.rakuten.co.jp/●●●●●/">スマートフォンサイトはこちら</a></p>');

}

});

</script>