カラーミーショップのテンプレート「カラーミーキット(2カラム) 」にトップへ戻るボタンを入れる

カラーミーショップ ショップに用意されているテンプレート「カラーミーショップ キット(2カラム) 」。

フレームワークなので、カスタマイズしやすく、使いやすくて好きなんですが、シンプルなだけに必要な要素が入ってないことも結構あります。

今回はよくサイトの右下なんかに入れる「トップへ戻るボタン」を追加する作業をしますので、メモ変わりに投稿します。

まぁ、他のテーマのコードをコピペすればいいわけなんですが(笑)
ということで、今回はnanoに使われているページトップボタンをそのまんま持ってきちゃいます。

テンプレートの「共通」の「HTML編集」画面にて適当な場所に以下のコードをコピペで入れます。

<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が必要です。

矢印が表示されない方は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要素にするといけるかと。

 

ちょっと乱暴な方法でしたが、メモ代わりとして。

タイトルとURLをコピーしました