はじめに
例のごとく、実装は自己責任でお願いします。
説明しないこと
- 楽天GOLDの契約手順
- FTPへのアップロード方法
- HTMLやCSSの基礎
前回と同じですね。
前提
今回も、以下の前提の上に説明を進めます。
- ショップURL & GOLDアカウント名:
myshop
手順
本当は理解してほしいんですが、早く手順だけ教えろという方向けに、まず手順だけに絞って説明します。
そのあと、ソースコードの要点を説明しますから、是非そちらも読んでみてください。
RMS側の設定
まずは全商品ページに下記パーツを追加します。
店舗設定> 2 デザイン設定> スマートフォンデザイン設定> 商品ページ共通パーツ設定
<!-- hamburger button --><inputid="navcheck"type="checkbox"=""><labelclass="ham-btn"for="navcheck"=""><span=""></span=""><span=""></span=""><span=""></span=""><span="">menu</span=""></label=""><!-- 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=""><labelclass="close-btn"for="navcheck"=""><span=""></span=""><span=""></span=""></label=""><linkrel="stylesheet"href="https://www.rakuten.ne.jp/gold/myshop/iframe/css/hamburger.css"="">FTPサーバ内のファイル構成
FTPサーバ内のファイルはこういった構成で作りました。
これは必ずこの構成でなければならない訳ではなく、href属性やsrc属性といったファイルの参照場所の記述と合致していれば、ファイルは好きな場所に置いてOKです。
myshop/
└── iframe/
├── navigation-drawer.html
└── css/
├── drawer.css
└── hamburger.css
※ /で終わるものはディレクトリ名（=フォルダ名）です
※ myshop/はFTPのroot（一番上のフォルダ）で、新規作成の必要はありません
各ファイルのソースコード
<!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><divclass="main-content"><h3>Header 1</h3><ul><li><ahref="#"target="_top"><iclass="fas fa-gem"></i>menu 1</a></li><li><ahref="#"target="_top"><iclass="fas fa-list-ul"></i>menu 2</a></li><li><ahref="#"target="_top"><iclass="fas fa-bell"></i>menu 3</a></li><li><ahref="#"target="_top"><iclass="fas fa-crown"></i>menu 4</a></li></ul><h3>Header 2</h3><ul><li><ahref="#"target="_top"><iclass="fas fa-hands-helping"></i>menu 5</a></li><li><ahref="#"target="_top"><iclass="fas fa-map-marker-alt"></i>menu 6</a></li><li><ahref="#"target="_top"><iclass="fas fa-shipping-fast"></i>menu 7</a></li><li><ahref="#"target="_top"><iclass="fas fa-calendar-alt"></i>menu 8</a></li><li><ahref="#"target="_top"><iclass="fas fa-comments"></i>menu 9</a></li><li><ahref="#"target="_top"><iclass="fas fa-shopping-cart"></i>menu 10</a></li><li><ahref="#"target="_top"><iclass="fas fa-question-circle"></i>menu 11</a></li></ul><h3>Header 3</h3><ul><li><ahref="#"target="_top"><iclass="fas fa-envelope"></i>menu 12</a></li><li><ahref="#"target="_top"><iclass="fas fa-rss"></i></i>menu 13</a></li><li><ahref="#"target="_top"><iclass="fab fa-twitter"></i>menu 14</a></li><li><ahref="#"target="_top"><iclass="fab fa-facebook-f"></i>menu 15</a></li><li><ahref="#"target="_top"><iclass="fab fa-instagram"></i>menu 16</a></li></ul></div><!-- .main-content --><!-- 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>@charset"utf-8";/* -------------------------------------
check button
------------------------------------- */#navcheck{display:none;}/* -------------------------------------
sp navigation drawer
- style in rakuten product page
------------------------------------- */.sp-drawer{position:fixed;-webkit-overflow-scrolling:touch;overflow:auto;width:70vw;height:100vh;top:0;left:-70vw;z-index:10000;transition:all.4sease;}.sp-drawer>iframe{width:100%;height:100%;}#navcheck:checked~.sp-drawer{left:0;}/* -------------------------------------
close button [x]
------------------------------------- */.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;}/* -------------------------------------
hamburger button
- three lines and 'menu' text
------------------------------------- */.ham-btn{position:absolute;top:150px;right:10px;z-index:9999;width:36px;height:38px;border:1pxsolid#4a4a4a;border-radius:5px;background-color:white;}.ham-btnspan{display:block;position:absolute;height:2px;width:22px;left:6px;background-color:#4a4a4a;}.ham-btnspan:first-child{top:6px;}.ham-btnspan:nth-child(2){top:13px;}.ham-btnspan:nth-child(3){top:20px;}.ham-btnspan:last-child{width:36px;left:0;background-color:transparent;text-align:center;font-size:10px;top:22px;}@charset"utf-8";/* -------------------------------------
enable scroll
------------------------------------- */html::-webkit-scrollbar{display:none;}body{overflow-y:scroll;padding-bottom:71px;}/* -------------------------------------
style in iframe
------------------------------------- */.main-content{padding:15px;}h3{font-size:20px;padding-bottom:10px;border-bottom:2pxsoliddimgray;margin-top:20px;}h3+ul{list-style:none;line-height:32px;padding-left:12px;font-size:14px;}h3+ulli{border-bottom:1pxsoliddimgray;}h3+ula{color:inherit;}h3+ula:hover{text-decoration:none;}h3+uli{margin-right:10px;color:indianred;width:18px;text-align:center;}結果
解説
RMS設定
以降、説明しない部分を適宜省いたり、見やすく改行したりしています。
先に紹介したソースコードと異なりますのでご了承ください。
店舗設定> 2 デザイン設定> スマートフォンデザイン設定> 商品ページ共通パーツ設定
<inputid="navcheck"type="checkbox"><labelclass="ham-btn"for="navcheck"><span></span><span></span><span></span><span>menu</span></label><divclass="sp-drawer"><iframesrc="navigation-drawer.html"></iframe></div><labelclass="close-btn"for="navcheck"><span></span><span></span></label>チェックボックスとラベルの関係
チェックボックスはinput[type="checkbox"]の部分、ラベルはlabelの部分です。
それぞれ1個と2個記述してあります。
チェックボックスはみなさんご存知の通り、本来はこんな見た目のやつ（
）です。をクリックすることで、チェックが付いたり外れたりしますよね。
ラベルはfor="ID名"の属性を付けることで、チェックボックスをON/OFFする遠隔スイッチみたいな役割をもたせることができます。
つまりを直接触らなくてもラベルを触ればON/OFFができるってことです。
今回はこのが見た目的に要らない子なので、後述するCSSで非表示にしています。ラベルさえ触れればいいわけですから。
でラベルが2個ある理由ですが、これは単純にONスイッチとOFFスイッチです。label.ham-btnを触った時にONにするので、これは例の3本線パーツ
にします。中にspanタグがいくつもあるのは、上3つで3本線を作り、最後の1つで「menu」という文字を作るためです。
一方、label.close-btnを触った時はOFFにするので、これはXボタン
にするわけです。中のspanタグ2個についてはもう説明不要ですよね。
ONスイッチとOFFスイッチを分けずに1つのlabelで作る方法もあるのですが（というかそちらがメジャー？）、今回はややこしくならないように2つのパーツで作りました。
チェックボックスの状態とその他パーツの関係
ラベルをクリックするとチェックボックスがON/OFF可能であると理解しましたか？
次はチェックボックスの状態についてお話します。
ところで、CSSでは下記の様な記述が可能です。
input[type="checkbox"]~div{display:none;}input[type="checkbox"]:checked~div{display:block;}最初のCSSセレクタは「チェックボックスより後ろにあるdivタグ」という意味です。
次のCSSセレクタは「チェックボックス（ON状態）より後ろにあるdivタグ」です。
そしてこの記述をすると、上記のdivはこんな挙動を見せます。
- チェックボックスがONの時だけ見える
そう、これが意味するのはチェックボックスのON時とOFF時で、後ろにあるパーツのスタイルを別々に指定できるということです。
このテクニックもだいぶ使い古されたものではありますが、これが今回一番大事なポイントになります。
こうしてON/OFF別々の指定ができるから、CSSだけでハンバーガーメニューが実現できるわけです。
要はチェックONの時だけ、見せたいパーツを見せれば良いわけですから。
そしてこの事を理解したあなたは、CSSがどんな感じになるか想像できますね。こんな感じのCSSになると思いませんか？
左からでてくるやつ{display:none;/* OFFの時に見えない */}input[type="checkbox"]:checked~左から出てくるやつ{display:block;/* ONの時に見える */}CSS解説
HTMLについては、特に説明すべきことがないので説明しませんよ。ただのulリストです。
CSSですが、各ファイルで次のようなことをしています。
hamburger.css
- チェックボックスを非表示
- 各パーツの表示・非表示をコントロール
- 3本線ボタンやXボタンの形を作る
- Xボタンの疑似要素 (
::after) で、暗い背景を作る
drawer.css
- navigation-drawer.htmlにおけるスタイルを記述
- ドロワーの中身が縦長ではみ出る時に、スクロール可能にする
ここで特に説明しなければならないのは、ナビゲーションドロワー.sp-drawerについてでしょうか。
ナビゲーションドロワーは、左から出てくる例のアイツのことです。この部分です。
.sp-drawer{position:fixed;width:70vw;/* 幅はデバイス幅の70% */height:100vh;top:0;left:-70vw;transition:all.4sease;/* 変形するときに、0.4秒かけてスムーズに動く指定 */}コイツだけはdisplay: none;で非表示にしておらず、width: 70vw; left: -70vw;とすることで画面の左側に追い出しています。
結果的に見えないわけですが、チェックONになった時はleft: 0;と画面内に持ってくることで、transition: all .4s ease;の指定と合わせて考えると、結果的に左からニョキッと出てくるわけです。
まとめ
実は私もCSSでこういったメニューを作るのは初めてだったんですが、理解して作ったことで今後できることが広がった気がします。
特にCSSセレクタ~の存在です。存在自体は知っていましたが、この様な使い方までは思いつきませんでした。
実際、CSS勉強中に「~は、後ろにあるものを指定します」とかいう説明を見ても使い方まではピンと来ないでしょう。多くの人が「へぇ～」で終わったり、ただの暗記対象としてしか捉えないと思います。
やっぱ知識は使ってナンボじゃい！
あと、こういう投稿を続けることで自店舗をカスタマイズできる店長が少しでも増えればいいなと思っています。
「外注にページ作ってもらったは良いけど、自分で修正できなくて困っている」という人が絶滅しますように。