カラーミーショップ 
ショップに用意されているテンプレート「カラーミーショップ キット（2カラム） 」。
フレームワークなので、カスタマイズしやすく、使いやすくて好きなんですが、シンプルなだけに必要な要素が入ってないことも結構あります。
今回はよくサイトの右下なんかに入れる「トップへ戻るボタン」を追加する作業をしますので、メモ変わりに投稿します。
まぁ、他のテーマのコードをコピペすればいいわけなんですが(笑)
ということで、今回はnanoに使われているページトップボタンをそのまんま持ってきちゃいます。
テンプレートの「共通」の「ＨＴＭＬ編集」画面にて適当な場所に以下のコードをコピペで入れます。
<div id="pagetop" class="hidden-phone">
<a href="#wrapper" class="btn-pagetop btn btn-01"><i class="icon-lg-b icon-chevron_up"></i></a>
</div>
上記はスマホでは表示しないボタンになります。
適当なところ、と言われても困ると思うのですが、最後の</div>後でも構いません。
次に大体下の方にある
<script>の下に
$(window).scroll(function () {
if($(this).scrollTop() > 200) {
$('#pagetop').fadeIn('fast');
} else {
$('#pagetop').fadeOut('fast');
}
});
と追加。
CSSに
#pagetop {
position: fixed;
right: 0;
bottom: 100px;
display: none;
}
.btn-01 {
border: 1px solid #fff;
background-color: #fff;
color: #444;
*background-color: #fff;
width: 100%;
border-radius: 0;
border-top: 1px #ddd solid;
border-bottom: 1px #ddd solid;
margin: 30px 0 0;
padding: 20px 0;
display: block;
}
.btn-01:hover, .btn-01:focus, .btn-01:active, .btn-01.active, .btn-01.disabled, .btn-01[disabled] {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
background-color: #ddd;
color: #444;
*background-color: #ddd;
}
.btn-pagetop {
background: #fff;
display: block;
text-align: center;
width: auto;
padding: 17px;
border: solid 1px #ddd;
}
と追加。
.btn-pagetopを.btn-01の上に記載するとうまく表示されませんので注意です。
色なんかは適当に変えても大丈夫です。
また、矢印のマークも事前にCSSが必要です。
矢印が表示されない方はＣＳＳに
.icon-lg-b.icon-chevron_up {
background-position: -0px -216px;
}
.icon-lg-b {
background-image: url(https://img.shop-pro.jp/tmpl_img/74/icon24_b_hover.png);
}
とか入れると出るかと思います。
また、ボタンは表示されるけど、上へ移動しない、という場合は、テーマに[wrapper]が使われていない可能性があります。
（全部確認していませんが、そういうテーマもあるかもだよね）
そういう場合は、
<a href="#wrapper" class="btn-pagetop btn btn-01"><i class="icon-lg-b icon-chevron_up"></i></a>
この部分の#wrapperを、とにかくテーマの上の方に書かれているid要素にするといけるかと。
ちょっと乱暴な方法でしたが、メモ代わりとして。
