今日のカスタマイズは、「トップに戻る」ボタンの設置です。
<p id="page-top"><a href="#wrap">TOP</a></p>
<style type="text/css">
/* PageTopボタン基本設定 */
#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
#page-top a {display: inline-block; text-decoration: none;
background-color: #fffbe5; opacity: 0.7; color: #808080; font-weight: bold;
height: 60px; width: 60px; line-height: 60px;
border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}
@media screen and (min-width: 0) and (max-device-width: 479px) {
#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
font-size: 85%;}
}
@media screen and (min-width: 480px) and (max-device-width: 666px) {
#page-top {bottom: 10px; right: 15px;}
}
@media screen and (min-width: 667px) and (max-device-width: 1023px) {
#page-top {bottom: 10px; right: 15px;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
更新してみると・・・
ついてる!!!!(右下)
でもこれじゃあ目立たないので、ちょぴっと目立つようにしてみまする。
これを、ZELOにもつけちゃいます!!!!
今日はHTMLの編集から入りません!
使うのはどうやら、「ガジェット」のようです。
ZELOで「トップに戻る」ボタンを設置
参考記事どおりにやっていきますよ♪
ガジェットをひらく
レイアウト
→ footer credit で「+ガジェットを追加」
→ HTML/JavaScript をクリックして追加する
- タイトルにはなにも入力しない
- 以下のコードを貼り付けて
<p id="page-top"><a href="#wrap">TOP</a></p>
<style type="text/css">
/* PageTopボタン基本設定 */
#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
#page-top a {display: inline-block; text-decoration: none;
background-color: #fffbe5; opacity: 0.7; color: #808080; font-weight: bold;
height: 60px; width: 60px; line-height: 60px;
border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover {text-decoration: none; background-color: #808080; color: #fffbe5;}
@media screen and (min-width: 0) and (max-device-width: 479px) {
#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
font-size: 85%;}
}
@media screen and (min-width: 480px) and (max-device-width: 666px) {
#page-top {bottom: 10px; right: 15px;}
}
@media screen and (min-width: 667px) and (max-device-width: 1023px) {
#page-top {bottom: 10px; right: 15px;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
更新してみると・・・
ついてる!!!!(右下)
でもこれじゃあ目立たないので、ちょぴっと目立つようにしてみまする。
ZELOで「トップに戻る」ボタンのデザインを変更
デフォルトでマウスホバーも指定されちゃってるし、場所もバッチリ、「TOP」の文字をFontAwesomeアイコンにしようかとも思ったけれど、これはこれで雰囲気があってかわいいからそのままにしました!
修正したのは、色だけ。
通常表示の背景色 : アクセント
通常表示の文字色 : サブ(薄)
マウスホバー時の背景色 : サブ(濃)
マウスホバー時の背景色 : サブ(薄)
に設定した後のコードがこちら↓
<p id="page-top"><a href="#wrap">TOP</a></p>
<style type="text/css">
/* PageTopボタン基本設定 */
#page-top {position: fixed; bottom: 20px; right: 20px; z-index: 110;}
#page-top a {display: inline-block; text-decoration: none;
background-color: #8BC34A; opacity: 0.7; color: #FFF8E1; font-weight: bold;
height: 60px; width: 60px; line-height: 60px;
border-radius: 50%; text-align: center; vertical-align: middle; overflow: hidden; transition: .4s;}
#page-top a:hover {text-decoration: none; background-color: #FFA000; color: #FFF8E1;}
@media screen and (min-width: 0) and (max-device-width: 479px) {
#page-top {z-index: 110; position: fixed; bottom: 10px; right: 15px;
font-size: 85%;}
}
@media screen and (min-width: 480px) and (max-device-width: 666px) {
#page-top {bottom: 10px; right: 15px;}
}
@media screen and (min-width: 667px) and (max-device-width: 1023px) {
#page-top {bottom: 10px; right: 15px;}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
//スクロールが100に達したらボタン表示
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
こんなカンジになりました↓
今回のカスタマイズはここまで!
0 件のコメント :
コメントを投稿