ページクリエイター：カスタムページ内のジャンプメニュー（上級者向け）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
※HTML直接入力ブロックに記述するHTML、javascriptに就きましては
ECステーションサービスとしては正式サポート外となります。
予めご了承の程お願い申し上げます。
（とは言え、「なにかあれば企画部あてご連絡ください。」が通常の
スタンスなのですが、すみません！下記の手順１．２．あたりが
「うまくいかない」に関しては対応致し兼ねます。
上級者向けTIPSになりますので予めご了承願います。）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
スーパーSALE、マラソン、いい買い物の日などのＳＡＬＥ会場や
目的別特集ページをページクリエイターで作成した際に
ページ内の好きな場所へ移動できるメニューの作成方法をご用意しました。
はじめに
まずはサンプルです。
http://ecstation.jp/ECStation/users/30118/temp/1/f0dbad38-2545-4da9-a9b9-977527c878bb.html
・PCでは画面右端に表示
・スマホでは画面下部に表示（１行に６個配置）
メニューの数が６個以下だと右端に１個分空白ができます。
メニューの中を５個にしたい場合はcssの中の16.666%を20%にすると100/20=5で５個です
スマホでは設定個数を超えると折り返して2段になります。
・メニューの文字数は「４文字前後」改行して「４文字前後」を想定しています
という感じな仕様になっています。
上記の文字数などが想定通りでない場合には
こんな風にきれいに収まらないといった不都合が起きます。
http://ecstation.jp/ECStation/users/30118/temp/1/d5b54cee-645f-49f8-835e-cf047fdb7c5e.html
PCだとそんなに変じゃない気もしますがスマホ閲覧時はガタガタになります。
スマホお手元にない方はエミュレーションモードでお確かめください。
以上を踏まえまして具体的な手順になります。
手順１
以下のjqueryファイルをFFFTPやLibraryなどで自分のGOLDスペースにアップしておきます。
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
右クリックしてファイルを保存し、自分のGOLDスペースにアップしておきます。
（他のファイルに上書きしないようフォルダを分けるなど適宜お願い致します。）
この時点でいきなり「わかりません！」という方はこちらのTIPSの実施は今回は諦めてください。＿）mペコリ
企画部ではこういった部分も将来的には「機能」で提供できるよう検討はしております。（必ず将来に実装されるわけではありません）
または、「設定代行サポートプレミアム」のような＠１万円程度でECステーションのカスタムや
テンプレ設定を制作会社のWEBデザイナーが行うようなプラスオプションをなるべく安価にご提供できるよう企画してまいります。
＊GOLDへのアップロードは分からないけど頑張る！という方は以下が参考になると思います。
（要RMSログイン）
[楽天GOLD] FTPソフトの設定方法：FFFTP
楽天で提供しているLibraryを使う
手順２ 必要なjavascript、cssをぺージに記述
ページクリエイターのHTML直接入力ブロックに以下のjavascript、css一式を入れます。
HTML直接入力ブロックを入れる場所はページ内のどこでも原則OKですが
分かりやすいようにページ最上部か最下部がよいでしょう。
その際に１行目の、
<script type="text/javascript" src="☆"></script>
こちらの☆を手順１．で事前にアップロードしておいたパスに置き換えます。
（手順１でGOLDにアップはしたつもりだけどそのパスがなんなのか分かりません…という方はすみませんこちらのTIPS実施は諦めてください。）
通常は以下のようなパスになると思います。（shopidは置き換えてください）
https://www.rakuten.ne.jp/gold/shopid/jquery.min.js
（フォルダを作ってその下に入れるとhttps://www.rakuten.ne.jp/gold/shopid/フォルダ名/jquery.min.jsという感じ）
以下をコピペしてページクリエイターの「HTML直接入力ブロック」へ入れます。
↓ ↓ ↓ この下から ↓ ↓ ↓
<script type="text/javascript" src="☆"></script>
<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
<script>
$(function(){
var margin = 100, //ウインドウ上部からどれぐらいの位置で変化させるか
sectionTop = new Array, //sectionのTop位置格納用
current = -1; //現在のカレント位置
//各sectionの縦位置を取得
$('.section').each(function(i) {
sectionTop[i] = $(this).offset().top;
// console.log("sectionTop["+i+"]="+sectionTop[i]);
});
//init
$('#nav').append('<div id="#current"></div>'); //create #current
changeNavCurrent(0);
//スクロールした時の処理
$(window).scroll(function(){
scrollY = $(window).scrollTop();
//各セクションの位置とスクロール位置を比較して、条件にあったらchangeNavCurrentを実行
for (var i = sectionTop.length - 1 ; i >= 0; i--) {
if (scrollY > sectionTop[i] - margin) {
changeNavCurrent(i);
break;
}
};
});
//ナビの処理
function changeNavCurrent(curNum) {
if (curNum != current) {
current = curNum;
curNum2 = curNum + 1;//HTML順序用
$('#nav li').removeClass('on');
$('#nav li:nth-child(' + curNum2 +')').addClass('on');
/* 位置によって個別に処理をしたい場合
if (current == 0) {
// 現在地がsection1の場合の処理
} else if (current == 1) {
// 現在地がsection2の場合の処理
} else if (current == 2) {
// 現在地がsection3の場合の処理
}*/
}
};
});
</script>
<style>
ul {
list-style:none;
}
#nav{
width: 100px;
background:#000;
position: fixed;
top: 50px;
right: 0px;
z-index: 1;
}
#nav {
margin: 0;
padding: 0;
}
#nav li {
background:#000;
width: 100px;
border-bottom: 1px solid #777;
box-sizing: border-box;
}
#nav li a{
display: block;
padding:10px;
text-align: left;
color: #fff;
text-decoration: none;
font-size: 15px;
}
#nav li a:hover{
background:#666;
}
#nav li.on{
background-color: #666;
}
@media screen and (max-width:800px){
#nav{
width: 100%;
background:#000;
position: fixed;
top: auto;
bottom: 0px;
left: 0px;
}
#nav {
margin: 0;
padding: 0;
}
#nav li{
float: left;
background:#000;
width: 16.666%;
border-right: 1px solid #777;
box-sizing: border-box;
}
#nav li a{
display: block;
padding:10px 0;
text-align: center;
color: #fff;
text-decoration: none;
font-size: 12px;
}
#nav li a:hover{
background:#666;
}
#nav li.on{
background-color: #666;
}
}
</style>
↑ ↑ ↑ この上まで ↑ ↑ ↑
手順３ メニューを作ります。
こちらもHTML直接入力ブロックへ入れます。
文言は適宜変更してください。
<ul id="nav"> <li><a href="#section01">タイム<br>セール</a></li> <li><a href="#section02">目玉<br>アイテム</a></li> <li><a href="#section03">送料<br>無料</a></li> <li><a href="#section04">期間限定<br>値下げ</a></li> <li><a href="#section05">クリア<br>ランス</a></li> <li><a href="#section06">1000円<br>ポッキリ</a></li> </ul>
手順４ リンク先をページ内に仕込みます。
ジャンプさせたい場所の先頭にHTML直接入力ブロックを入れて
下記のHTMLを入れます。
<div class="section" id="section01"></div>
数字はメニューの数字と対応させて変更してくださいね。
追加情報（メニューを半透明にしたい）
メニューを半透明にする場合は手順2の
background:#000
を
background:rgba(0,0,0,0.3)
にすると半透明になります。
参考：rgba()でカラーを指定する（外部サイト）
http://www.htmq.com/css3/rgba.shtml
このジャンプメニュー（楽天ではデパートに例えて私は「エレベーターメニュー」と呼んでます！）は、
縦長のSALEページや企画ページとは相性が良いですよね。
いわゆる有名店さんが楽天スーパーSALEなどで
スーパーSALE特設会場と銘打って作成して
こういうメニューを付けているのを良く見かけます。
ちょっと頑張っちゃおうかなって方は
ぜひ「強い売り場作り」にチャレンジしてみてください。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
※HTML直接入力ブロックに記述するHTML、javascriptに就きましては
ECステーションサービスとしては正式サポート外となります。
予めご了承の程お願い申し上げます。
（とは言え、「なにかあれば企画部あてご連絡ください。」が通常の
スタンスなのですが、すみません！手順１．２．あたりが
「うまくいかない」に関しては対応致し兼ねます。
上級者向けTIPSになりますので予めご了承願います。）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－