初心者Vaster2カスタマイズ「戻るボタンをガシェットで設置」

初心者Vaster2カスタマイズ。今回は「戻るボタン」です。
簡単ですので、是非!




初心者Vaster2カスタマイズ「戻るボタンをガシェットで設置」

戻るボタンの必要性

前回は「スマホの記事の一覧」部分でしたが、今回は「戻るボタン」の設置です。

スマホは表示が小さいので、スクロール数が多くなります。
そんな時に「戻るボタン」があるとページの先頭へ一気に戻りますので、利便性も良いかと思います。

私もブログを立ち上げて直ぐに「戻るボタン」が欲しいと思いました。

そして、今回も参考のサイト様から教えてもらった事になります。
参考元のサイトや記事なども一緒に紹介させて頂きますので、ご自身のサイトに似合うように変更してみてください。


「コピペでOK」の記事を見つけた

戻るボタンが欲しいと思っていても、どうやって設置すればいいのか分りませんでした。
自分で1から作る事も不可能でした。
そんな中「コピペで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>


ガシェットで設置する

本体のHTMLに追加でも設置出来ますが、簡単にガシェットの追加で設置してみましょう。
この場合の良い所は、設置も削除も操作が簡単だという事です。

では設置の手順を書きます。

設置の手順

手順は①~④の4工程です。とても簡単です。

①管理画面からレイアウトの設定に進む。

②footerの部分から「+ガシェットを追加を選択」で「HTML/JavaScript」を選択。

©さんがつ日記「戻るボタン」1

(上の部分にガシェットを追加してください。)

③タイトル部分は「空白」でOK。
ここで、上のコードを全文コピー。そしてコンテンツの部分に貼りつけ。

⑤保存→配置の保存で完成。


カラーを変えたい場合

このボタンですが、私のブログのカラーでグレー色になっています。
サイトのメインカラーに合わせてボタンの色も変更してみましょう。

ボタンの本体のカラーを変えたい場合は、CSSの真ん中辺りにある

「background-color:#999999;」

が本体の色の設定です。この部分を前に紹介したこちらのサイト様でお好きな色を選んで入力して下さい。

色見本 | fromkato.com | 違いが分かる色見本


設置位置を変えたい場合

また、出現場所の位置を変えたい場合は、CSSの初めの方にある

「bottom: 40px;」が下からの位置
「right: 65px;」が右側からの位置

ですので、この数字の部分を変更すればOKです。
元の位置を参考にして、倍くらい離したい場合は数値を2倍に入力すれば大丈夫です。

「right: 65px;」については、当サイトではスマホの表示幅を変えていますので65にしていますが、20~30位が適当だと思います。


補足


©さんがつ日記「戻るボタン」2

こちらのボタンは普段は非表示で、スクロールが多い時に出現するボタンなので、機能的だと思います。

設置後はブログのデザインや配置を見て、誤って操作をする事が無いような位置に設置するとより良いと思います。

上にも書いた様にガシェットで追加していますので、設置も削除も簡単です。
vaster2以外でも設置が出来ますよ。



0 件のコメント :