はじめに

例のごとく、実装は自己責任でお願いします笑
また、今回も最小の構成から徐々にカスタマイズする方針で作っていきます。

最後にソースコードの最終形を載せていますので、内容を十分理解できる方はそこまで飛ばして構いません。

説明しないこと

楽天GOLDの契約手順
FTPへのアップロード方法
HTMLやCSSの基礎

前回と同じですね。

前提

今回も、以下の前提の上に説明を進めます。

ショップURL & GOLDアカウント名: myshop

手順

RMS側の設定

まずは商品ページにいろいろとパーツを追加します。

店舗設定> 2 デザイン設定> スマートフォンデザイン設定> 商品ページ共通パーツ設定

<!-- navigation bar --><iframeclass="sp-navbar"frameborder="0"scrolling="no"src="https://www.rakuten.ne.jp/gold/myshop/iframe/sp-navbar.html"width="100%"frameborder="0"=""></iframe=""><!-- hamburger button --><labelclass="ham-btn"for="navcheck"="">OPEN</label=""><inputid="navcheck"type="checkbox"=""><linkrel="stylesheet"href="https://www.rakuten.ne.jp/gold/myshop/iframe/css/navbar.css"=""><!-- navigation drawer --><divclass="sp-drawer"=""><iframeframeborder="0"src="https://www.rakuten.ne.jp/gold/myshop/iframe/navigation-drawer.html"width="100%"frameborder="0"=""></iframe=""></div=""><!-- close button [x] --><labelclass="close-btn"for="navcheck"=""><span=""></span=""><span=""></span=""></label=""><linkrel="stylesheet"href="https://www.rakuten.ne.jp/gold/myshop/iframe/css/drawer.css"="">

これについて上から順番に説明しますと、こうなります。

要素	説明
`.sp-navbar`	ハンバーガーの三本線ボタンあたりにいる帯です。こいつの上に「OPEN」ボタンを載せます。自由にデザインできますが、今回はいじりません。
`.ham-btm`	よく見る三本線ボタンです。今回は面倒なので三本線ではなく「OPEN」というテキストにしておきます。`for`属性を指定することで、タップした時にチェックボックスをON/OFFします。
`#navcheck`	チェックボックスです。「OPEN」をタップしたらチェックのON/OFFが切り替わります。CSSセレクタ`~`の関係で、`.sp-drawer`より前に無いとダメだし、`div`とかで囲むのもNGです。
`.sp-drawer`	左からニョキっと出てくるアレ（ナビゲーションドロワー）です。
`.sp-drawer>iframe`	ドロワーの中身です。
`.close-btn`	ドロワーが出ている時に表示する `x`の形をした閉じるボタンです。ちなみに、こいつの疑似要素で背景のグレーを作ります。この`x`ボタンとグレー背景をタップした時にチェックボックスをON/OFFします。

FTPサーバ内のファイル構成

それでは中身を作っていきましょうね～

myshop/
└── iframe/
    ├── sp-navbar.html　← 画面上部に表示する帯状のナビゲーション
    ├── navigation-drawer.html　← ハンバーガーメニューをタップした時に左から出てくるやつ
    └── css/
        ├── drawer.css　← navigation-drawer.html のスタイル
        └── navbar.css　← sp-navbar.html と、label, input のスタイル

※ /で終わるものはディレクトリ名（=フォルダ名）です
※ myshop/はFTPのroot（一番上のフォルダ）で、新規作成の必要はありません

とりあえずそれっぽいのを作ってみる

ナビゲーションドロワーnavigation-drawer.htmlは、オーソドックスにリンクの箇条書きにします。
とりあえずこんな風にしました。

この記事内では使いませんが、いろいろと便利なのでfontawesomeとbootstrap4を読み込ませました。

htmlとbodyにクラスを付けたのは理由がありますが、それは後述します。

navigation-drawer.html

<!DOCTYPE html><htmlclass="navbar-html"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>sp navigation drawer</title><!-- Fontawesome --><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"crossorigin="anonymous"><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><!-- bootstrap4 css --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><!-- my style --><linkrel="stylesheet"href="css/drawer.css"></head><bodyclass="navbar-body"><ulclass="menu"><li><ahref="#">link</a></li><li><ahref="#">link</a></li>
  (繰り返し)
  <li><ahref="#">LAST</a></li></ul><!-- bootstrap4 js --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script></body></html>

drawer.css

@charset"utf-8";.sp-navbar{position:fixed;width:70vw;height:100vh;top:0;left:-70vw;}

sp-navbar.html

<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>sp navigation drawer</title><!-- Fontawesome --><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"crossorigin="anonymous"><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><!-- bootstrap4 css --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><!-- my style --><linkrel="stylesheet"href="css/drawer.css"></head><body><p>マイショップ</p><!-- bootstrap4 js --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script></body></html>

navbar.css

@charset"utf-8";.sp-navbar{position:absolute;height:60px;top:150px;left:0;right:0;}

ここまではパーツの配置だけなので、やっていることは前回記事「楽天スマホ商品ページにiframeを入れる」と同様です。では、この段階でどんな見た目になるか見てみます。

iframe.sp-headerは前回記事で作ったものです。
前回から引き続き参考にしていただいてる方は、このiframe.sp-header関係のCSSを調整してください。でないと、パーツが重なってしまいますので。

さて、この状態から足りないものを書き出してみます。

要素	足りないもの
`iframe.sp-navbar`	特になし。好きにデザインしてよし。ただし右端は「OPEN」の文字が重なる予定。
`.ham-btn`	`iframe.sp-navbar`の右端に位置を持っていく。
`#navcheck`	チェックボックス。デザイン上必要ないので非表示にする。
`.close-btn`	2つの`span`タグで`x`の形を作る。あと、位置を固定する。
`.close-btn::after`	疑似要素のグレー背景をCSSで実装する。
`.sp-drawer`	チェックボックスがONの時だけニョキッと画面に出す（アニメーション）。
`.sp-drawer>iframe`	`.sp-drawer`の最大までサイズを引き伸ばす。

では、順番に実装してみましょう。.sp-navbarは飛ばして、.ham-btnから。
これから書くことは、CSSのファイルに追記していってください。

z-indexについては今まで言及しませんでしたが、つまり要素の重なり順です。
ざっくり言うと、値が大きいほど手前に表示されます。
楽天スマホパーツのうち、画面下「かごに入れる」等のボタンがz-index: 900000;なので、とりあえず1万付近でデザインしています。

`.ham-btn`を配置する

navbar.css

label.ham-btn{position:absolute;top:160px;right:10px;}

チェックボックスを非表示にする

navbar.css

#navcheck{display:none;}

`.close-btn`で `x`の形を作り、位置を固定する

drawer.css

.close-btn{display:none;width:30px;height:30px;position:fixed;top:50px;left:calc(70vw+15px);z-index:9999;}#navcheck:checked~.close-btn{display:block;}.close-btnspan{display:block;position:absolute;left:0;top:25px;height:2px;width:30px;background-color:white;z-index:9999;}.close-btnspan:first-child{transform:translate(0,-10px)rotate(45deg);}.close-btnspan:last-child{transform:translate(0,-10px)rotate(-45deg);}

ドロワーが出ている時だけの暗い背景を作る

drawer.css

.close-btn::after{display:none;content:'';position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.5);}#navcheck:checked~.close-btn::after{display:block;}

チェックボックスがONの時だけニョキッと画面に出す

drawer.css

.sp-drawer{z-index:10000;transition:all.4sease;/* 0.4秒かけてぬるっと移動する指定 */}#navcheck:checked~.sp-drawer{left:0;}

`iframe`のサイズを指定する

drawer.css

.sp-drawer>iframe{width:100%;height:100%;}

結果を見てみる

お疲れさまでした。どうなったか見てみましょう。

概ねOKですね。画面下のボタンにも影響ないみたいです。

しかし、実は細かいところがまだカバーできていません。それは以下の点です。

ドロワーが長くなった場合にスクロールできない
一番下までスクロールしたとして、「かごに追加」パーツの高さ分、ドロワーの下部が隠れてしまう

スクロール問題をなんとかする

前述した、htmlとbodyにクラスを付けた理由がここにあります。
この辺の問題を解決するためです。以下を追加することでなんとかなります。

drawer.css

.sp-navbar{-webkit-overflow-scrolling:touch;overflow:auto;}html.navbar-html::-webkit-scrollbar{display:none;}body.navbar-body{overflow-y:scroll;padding-bottom:71px;/* 「かごに入れる」ボタンの高さ */}

早速確かめてみます。ドロワー内の最後の要素「LAST」が無事見えればOKとなります。
なお確認にあたり、高さを稼ぐため下記を追加していますが、ドロワー内部のデザインは自由なので必須ではありません。

drawer.css

body.navbar-body{background-color:lightgray;}.menu{line-height:60px;}

さいごに

これで本当に終わりです。今度こそお疲れさまでした。

「OPEN」の文字の部分は、アイコン画像を作るなり、CSSでボタンを作るなりしてください。
（正直、疲れてしまってそこまでの内容をカバーする気力が無い……）

最後に4つのソースコードが最終的にどうなったかを見せて終わりにします。お付き合いいただきありがとうございました。

ソースコード最終形

sp-navbar.htmlについては最初から変化ないです。

sp-navbar.html

<!DOCTYPE html><html><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>sp navigation drawer</title><!-- Fontawesome --><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"crossorigin="anonymous"><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><!-- bootstrap4 css --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><!-- my style --><linkrel="stylesheet"href="css/drawer.css"></head><body><p>マイショップ</p><!-- bootstrap4 js --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script></body></html>

navigation-drawer.html

<!DOCTYPE html><htmlclass="navbar-html"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>sp navigation drawer</title><!-- Fontawesome --><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"crossorigin="anonymous"><linkhref="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"rel="stylesheet"><!-- bootstrap4 css --><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><!-- my style --><linkrel="stylesheet"href="css/drawer.css"></head><bodyclass="navbar-body"><ulclass="menu"><li><ahref="#">link</a></li><li><ahref="#">link</a></li>
  (省略)
  <li><ahref="#">link</a></li><li><ahref="#">LAST</a></li></ul><!-- bootstrap4 js --><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"crossorigin="anonymous"></script></body></html>

navbar.css

@charset"utf-8";.sp-navbar{position:absolute;height:60px;top:150px;left:0;right:0;}label.ham-btn{position:absolute;top:160px;right:10px;}#navcheck{display:none;}

drawer.css

@charset"utf-8";.sp-drawer{position:fixed;-webkit-overflow-scrolling:touch;overflow:auto;width:70vw;height:100vh;top:0;left:-70vw;z-index:10000;transition:all.4sease;}.close-btn{display:none;width:30px;height:30px;position:fixed;top:50px;left:calc(70vw+15px);z-index:9999;}#navcheck:checked~.close-btn{display:block;}.close-btnspan{display:block;position:absolute;left:0;top:25px;height:2px;width:30px;background-color:white;z-index:9999;}.close-btnspan:first-child{transform:translate(0,-10px)rotate(45deg);}.close-btnspan:last-child{transform:translate(0,-10px)rotate(-45deg);}.close-btn::after{display:none;content:'';position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(0,0,0,.5);}#navcheck:checked~.close-btn::after{display:block;}#navcheck:checked~.sp-drawer{left:0;}.sp-drawer>iframe{width:100%;height:100%;}/* -------------------------------------
inner iframe
------------------------------------- */html.navbar-html::-webkit-scrollbar{display:none;}body.navbar-body{background-color:lightgray;overflow-y:scroll;padding-bottom:71px;}.menu{line-height:60px;}

楽天商品ページにハンバーガーメニューをつける

はじめに

説明しないこと

前提

手順

RMS側の設定

FTPサーバ内のファイル構成

とりあえずそれっぽいのを作ってみる

`.ham-btn`を配置する

チェックボックスを非表示にする

`.close-btn`で `x`の形を作り、位置を固定する

ドロワーが出ている時だけの暗い背景を作る

チェックボックスがONの時だけニョキッと画面に出す

`iframe`のサイズを指定する

結果を見てみる

スクロール問題をなんとかする

さいごに

ソースコード最終形

Trending Articles

和歌山市でマンションの部屋全焼

更新プログラムがインストールされません

井上貴博アナウンサー彼女や結婚の噂は？実家や親が話題？人気は？

宇宙運命数「８」　はくちょう座

カラオケ鉄板ネタになるの間違いなし「大塚愛から福原愛」って何！？

2016年1月22日号　山口銀行（1月4日付）

人気占い師・Sakkoが占う！今日のアナタの運勢と、ラッキーカラーは・・・

サキュバス戦記　攻略

この記事は表示できません

【ネタバレ感想】「7人目のスタンド使い」その18

上海問屋、7色に切り替えられるアイソレーションキーボード

【変更対戦カードのお知らせ】7.23『アマチュア全日本選手権大会』

Microsoft、最も議論を呼んだWindows 11のタスクバーの問題を修正中

野口興業（弘道会/山口組）

エンタープライズモードの設定方法について

【ディズニーランドパリ】日本にないオススメアトラクション13選【ウォルトディズニースタジオ】

サマータイムレンダ01

Article 2

【世界大学ランキング】第１位にジュリアード音楽院とウィーン国立音大、日本勢は？

株式会社アルテカ　代表　野村紘一

はじめに

説明しないこと

前提

手順

RMS側の設定

FTPサーバ内のファイル構成

とりあえずそれっぽいのを作ってみる

.ham-btnを配置する

チェックボックスを非表示にする

.close-btnで xの形を作り、位置を固定する

ドロワーが出ている時だけの暗い背景を作る

チェックボックスがONの時だけニョキッと画面に出す

iframeのサイズを指定する

結果を見てみる

スクロール問題をなんとかする

さいごに

ソースコード最終形

Trending Articles

`.ham-btn`を配置する

`.close-btn`で `x`の形を作り、位置を固定する

`iframe`のサイズを指定する