EC部に楽天のスマホに固定のバナーを入れてくれと頼まれました。

「固定のバナーなんか簡単じゃん！」と思って、安易に「いいよ」と答えたことに後悔しました。

ハマった、ハマった、ハマった岩渕です。

楽天のサイトで、下記のようにフッター部分についてくるバナーを見たことありませんか？

（6時間タイムセールと書いてあるバナーの部分です。）

（参照：http://item.rakuten.co.jp/rotts/r201023/）

※タイムセールなので、固定バナーがない時があります。

※スマホからご覧下さい。

通常サイトのコーディングをしている人ならとても簡単ですよね。

しかし、楽天のスマホは禁止タグばかりで大変です。不便で仕方ない。

禁止タグをすり抜けて固定バナーを入れる方法

禁止タグをすり抜ける方法は、タグ内に13個の全角のスペースをいれるか、若しくは、「=””」をタグの後にいれるとスマホでも禁止タグが使えるようになります。

手順

１．<link>タグで、cssを読み込みます。（linkタグは禁止されています。）

閉じタグの前に13個の全角スペースを入れます。

<link rel=”stylesheet” href=”http://www.rakuten.ne.jp/gold/ドメイン/sp.css”□□□□□□□□□□□□>

※□の部分は全角スペースになります。

２．<a>タグで<img>タグを挟む。

<a href=”#hogehoge”><img src=”画像のURL”></a>

３．<img>タグ内にclassを付与する。（classは禁止されています。）

閉じタグの前に13個の全角スペースを入れます。

<a href=”#hogehoge”>
　<img src=”画像のURL” class=”footerBanner”□□□□□□□□□□□□□>
</a>

※□の部分は全角スペースになります。

完成形

<link rel=”stylesheet” href=”http://www.rakuten.ne.jp/gold/ドメイン/sp.css”□□□□□□□□□□□□□>
<a href=”#hogehoge”>
　<img src=”画像のURL” class=”footerBanner” □□□□□□□□□□□□□>
</a>

※□の部分は全角スペースになります

参考CSS

.footerBnner {
    width: 100%;
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
}

フッターに固定バナーを入れると、楽天が自動で出力している「上へ」ボタン「かごへ」ボタンが被って邪魔になります。

このボタンをちょっと上に持って行きましょう。

「上へ」ボタン、「かごへ」ボタンをCSSで少し上に移動させる

下記のCSSをご自分のスタイルシートに入れて下さい。

50pxと書かれている部分は、ご自分で設定して下さい。

#floatingButtons .toTopButton div {
	bottom: 50px;
}

#floatingButtons #smt_rakutenLimitedId_cartParts {
	bottom: 50px;
}

禁止タグ<iframe>を入れたい場合

１．19個の全角スペースを <iframeの後ろに入れます。

２．19個の全角スペースを入れた後「=””」を入れます。

３．閉じタグの前に12個の全角スペースを入れます。

<iframe□□□□□□□□□□□□□□□□□□□=”” src=”URL” id=”ID”＞
＜/iframe□□□□□□□□□□□□>

※□の部分は全角スペースになります。

まとめ

いかがでしたでしょうか。楽天の裏技はいっぱいありますね。

裏技をいっぱい知っていると他社と違った独自のネットショップになります。

裏ワザを覚えていきましょう。