戻るボタンの必要性
スマホで閲覧される方が多い
前回は「スマホの記事の一覧」部分でしたが、今回は「戻るボタン」の設置です。スマホは表示が小さいので、スクロール数が多くなります。
そんな時に「戻るボタン」があるとページの先頭へ一気に戻りますので、利便性も良いかと思います。
私もブログを立ち上げて直ぐに「戻るボタン」が欲しいと思いました。
そして、今回も参考のサイト様から教えてもらった事になります。
参考元のサイトや記事なども一緒に紹介させて頂きますので、ご自身のサイトに似合うように変更してみてください。
「コピペでＯＫ」の記事を発見
戻るボタンが欲しいと思っていても、どうやって設置すればいいのか分りませんでした。自分で１から作る事も不可能でした。
そんな中「コピペでOK]という文字に惹かれ下記のサイト様を訪問しました。
初心者の私でも設置が出来そうだと思い参考にさせて頂きました。超簡単&コピペでOK！ページトップへ戻るボタンの実装方法：jQuery - webデザイン初心者｜sometimes study
先週末まで2週間 インターンシップ に行っていたのでバタバタしてましたー！やっと落ち着いて来たので久しぶりの更新です。 今回は様々なところで見かける『スクロールして、ページトップに戻るボタン』の作り方です。
そして当サイトもこちらの記事から頂いたコードを使ってコピペで使わせて頂いています。
さて、上のサイト様の記事を読んでみたのですが、何だかよく分かりませんでした。
ですが、最後にの部分に
どうしてもうまく動かない方は、下記のコードをまるっとhtmlファイルにコピペしてみてください。の一文がありますので、そのコードの部分をそのまま使う事にしました。
戻るボタンのHTMLとCSS
まるっとコピーの部分をコピーして設置をしたと思うのですが、記憶があいまいなのと、当初ははてなブログで設置していたのでコードが変わっていました。どう変えたのか分らなくなったのですが、私のブログで実際に動いているHTML等を下記に書いてみます。
こちらを全文コピーして設置して下さい。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up "></i></a></p>
<style>
/*-- CSSの記述 --*/
#pageTop {
position: fixed;
bottom: 40px;
right: 65px;
}
#pageTop i {
padding-top: 6px
}
#pageTop a {
display: block;
z-index: 999;
padding: 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color:#999999;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}
</style>
<script>
// Javascriptの記述
//■page topボタン
$(function(){
var topBtn=$('#pageTop');
topBtn.hide();
//◇ボタンの表示設定
$(window).scroll(function(){
if($(this).scrollTop()>80){
//---- 画面を80pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();
}else{
//---- 画面が80pxより上なら、ボタンを表示しない
topBtn.fadeOut();
}
});
// ◇ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
$('body,html').animate({
scrollTop: 0},500);
return false;
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="pageTop"><a href="#"><i class="fa fa-chevron-up "></i></a></p>
<style>
/*-- CSSの記述 --*/
#pageTop {
position: fixed;
bottom: 40px;
right: 65px;
}
#pageTop i {
padding-top: 6px
}
#pageTop a {
display: block;
z-index: 999;
padding: 8px;
border-radius: 30px;
width: 35px;
height: 35px;
background-color:#999999;
color: #fff;
font-weight: bold;
text-decoration: none;
text-align: center;
}
#pageTop a:hover {
text-decoration: none;
opacity: 0.7;
}
</style>
<script>
// Javascriptの記述
//■page topボタン
$(function(){
var topBtn=$('#pageTop');
topBtn.hide();
//◇ボタンの表示設定
$(window).scroll(function(){
if($(this).scrollTop()>80){
//---- 画面を80pxスクロールしたら、ボタンを表示する
topBtn.fadeIn();
}else{
//---- 画面が80pxより上なら、ボタンを表示しない
topBtn.fadeOut();
}
});
// ◇ボタンをクリックしたら、スクロールして上に戻る
topBtn.click(function(){
$('body,html').animate({
scrollTop: 0},500);
return false;
});
});
</script>
ガシェットでの設置方法
本体のHTMLに追加でも設置出来ますが、簡単にガシェットの追加で設置してみましょう。この場合の良い所は、設置も削除も操作が簡単だという事です。
では設置の手順を書きます。
設置の手順
手順は①～④の４工程です。とても簡単です。①管理画面からレイアウトの設定に進む。
②ｆｏｏｔｅｒの部分から「＋ガシェットを追加を選択」で「HTML/JavaScript」を選択。
（上の部分にガシェットを追加してください。）
③タイトル部分は「空白」でOK。
ここで、上のコードを全文コピー。そしてコンテンツの部分に貼りつけ。
⑤保存→配置の保存で完成。
カラーを変えたい場合
このボタンですが、私のブログのカラーでグレー色になっています。サイトのメインカラーに合わせてボタンの色も変更してみましょう。
ボタンの本体のカラーを変えたい場合は、ＣＳＳの真ん中辺りにある
「background-color:#999999;」
が本体の色の設定です。この部分を前に紹介したこちらのサイト様でお好きな色を選んで入力して下さい。
色見本 | fromkato.com | 違いが分かる色見本
設置位置を変えたい場合
また、出現場所の位置を変えたい場合は、ＣＳＳの初めの方にある「bottom: 40px;」が下からの位置
「right: 65px;」が右側からの位置
ですので、この数字の部分を変更すればＯＫです。
元の位置を参考にして、倍くらい離したい場合は数値を２倍に入力すれば大丈夫です。
「right: 65px;」については、当サイトではスマホの表示幅を変えていますので65にしていますが、20～30位が適当だと思います。
補足
こちらのボタンは普段は非表示で、スクロールが多い時に出現するボタンなので、機能的だと思います。
設置後はブログのデザインや配置を見て、誤って操作をする事が無いような位置に設置するとより良いと思います。
上にも書いた様にガシェットで追加していますので、設置も削除も簡単です。
vaster2以外でも設置が出来ますよ。
コメント