ページクリエイター:カスタムページ内のジャンプメニュー(上級者向け)

----------------------------------
※HTML直接入力ブロックに記述するHTML、javascriptに就きましては
 ECステーションサービスとしては正式サポート外となります。
 予めご了承の程お願い申し上げます。
(とは言え、「なにかあれば企画部あてご連絡ください。」が通常の
 スタンスなのですが、すみません!下記の手順1.2.あたりが
 「うまくいかない」に関しては対応致し兼ねます。
 上級者向けTIPSになりますので予めご了承願います。)
----------------------------------
 
 
スーパーSALE、マラソン、いい買い物の日などのSALE会場や
目的別特集ページをページクリエイターで作成した際に
ページ内の好きな場所へ移動できるメニューの作成方法をご用意しました。

はじめに

まずはサンプルです。
http://ecstation.jp/ECStation/users/30118/temp/1/f0dbad38-2545-4da9-a9b9-977527c878bb.html

・PCでは画面右端に表示
・スマホでは画面下部に表示(1行に6個配置)
  メニューの数が6個以下だと右端に1個分空白ができます。
  メニューの中を5個にしたい場合はcssの中の16.666%を20%にすると100/20=5で5個です
  スマホでは設定個数を超えると折り返して2段になります。 
・メニューの文字数は「4文字前後」改行して「4文字前後」を想定しています

という感じな仕様になっています。

上記の文字数などが想定通りでない場合には
こんな風にきれいに収まらないといった不都合が起きます。
http://ecstation.jp/ECStation/users/30118/temp/1/d5b54cee-645f-49f8-835e-cf047fdb7c5e.html
PCだとそんなに変じゃない気もしますがスマホ閲覧時はガタガタになります。
スマホお手元にない方はエミュレーションモードでお確かめください。

以上を踏まえまして具体的な手順になります。

手順1

以下のjqueryファイルをFFFTPやLibraryなどで自分のGOLDスペースにアップしておきます。
 
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
 
右クリックしてファイルを保存し、自分のGOLDスペースにアップしておきます。
(他のファイルに上書きしないようフォルダを分けるなど適宜お願い致します。)

この時点でいきなり「わかりません!」という方はこちらのTIPSの実施は今回は諦めてください。_)mペコリ
企画部ではこういった部分も将来的には「機能」で提供できるよう検討はしております。(必ず将来に実装されるわけではありません)
または、「設定代行サポートプレミアム」のような@1万円程度でECステーションのカスタムや
テンプレ設定を制作会社のWEBデザイナーが行うようなプラスオプションをなるべく安価にご提供できるよう企画してまいります。
 
*GOLDへのアップロードは分からないけど頑張る!という方は以下が参考になると思います。
(要RMSログイン)
 
 [楽天GOLD] FTPソフトの設定方法:FFFTP
 楽天で提供しているLibraryを使う
 
 

手順2 必要なjavascript、cssをぺージに記述

ページクリエイターのHTML直接入力ブロックに以下のjavascript、css一式を入れます。
HTML直接入力ブロックを入れる場所はページ内のどこでも原則OKですが
分かりやすいようにページ最上部か最下部がよいでしょう。

その際に1行目の、

<script type="text/javascript" src="☆"></script>

こちらの☆を手順1.で事前にアップロードしておいたパスに置き換えます。
(手順1で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>





 
↑ ↑ ↑ この上まで ↑ ↑ ↑ 
 

手順3 メニューを作ります。

こちらも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>

 
 

手順4 リンク先をページ内に仕込みます。

ジャンプさせたい場所の先頭に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ステーションサービスとしては正式サポート外となります。
 予めご了承の程お願い申し上げます。
(とは言え、「なにかあれば企画部あてご連絡ください。」が通常の
 スタンスなのですが、すみません!手順1.2.あたりが
 「うまくいかない」に関しては対応致し兼ねます。
 上級者向けTIPSになりますので予めご了承願います。)
----------------------------------

PAGE TOP