タイ研修いってきました

楽天スマホページに良くある固定のフッターバナーを入れる方法

  • このエントリーをはてなブックマークに追加
楽天スマホページに良くある固定のフッターバナーを入れる方法

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

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

 

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

 

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

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

フッター部分についてくるバナー

(参照:http://item.rakuten.co.jp/rotts/r201023/

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

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

 

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

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

 

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

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

 

手順

1.<link>タグで、cssを読み込みます。(linkタグは禁止されています。)

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

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

 

2.<a>タグで<img>タグを挟む。

 

3.<img>タグ内にclassを付与する。(classは禁止されています。)

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

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

 

完成形

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

 

参考CSS

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

まとめ

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

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

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

この記事を書いた人

岩渕 裕WEBディレクター/マークアップエンジニア

岩渕裕です。アダ名は、ブチです。安い居酒屋が大好きで、渋谷の「一軒め酒場」か「すみれ」で飲んでます。趣味は、「サマナーズウォー」という携帯ゲームです。携帯は、ゲームをするために持っています。どなたか、サマナーズウォーの友達になって頂けませんか?サマナーズウォーをしながら、安い居酒屋でお酒飲みたいです。お願いします。

ネットショップ運営ネットショップ運営

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。