こんにちは。gooです。
以前の記事、
「BloggerでVaster2適用後のレイアウトを変更（その６）～見出しの見た目を変更する～（https://sancansion-life.blogspot.com/2018/02/bloggervaster2.html）」
で、見た目を変更しました。
今回は、PAGE TOPボタンを追加しました。
PAGE TOPボタンの追加するために参考にしたところ
PAGE TOPボタンを、追加する方法については、以下のWEBページを参考にさせてもらいました。
【Vaster2】スクロールすると出現するページトップボタンを実装しよう！【Blogger】(https://vaster2customtom.blogspot.jp/2017/04/vaster2blogger.html)参照：Vaster2 カスタムブログ
「Vaster2 カスタムブログ」さんに書かれている、HTMLコードを、追加していくことで、すぐにPAGE TOPボタンを、追加できます。
追加方法も、詳しく、挿入位置まで書かれていたので、非常に勉強になりました。
一応、どこの部分に、何を挿入するのか、自分の為にテキストベースで残します。
head内に記述
「<script src='http://ajax.…」の部分以降に、次のHTMLコードを記述します。
<script>
$(function() {
var topBtn = $('.pagetop');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 450) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
topBtn.click(function () {
$('body, html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
「if ($(this).scrollTop() > 450) {」の部分で、上からどれくらいスクロールしたら、PAGE TOPボタンを表示するのか、調整できます。
”450”の部分の値を小さくすると、早く表示できます。
「$('body, html').animate({ scrollTop: 0 }, 500);」の部分で、PAGE TOPの戻る、スクロール速度を調整できます。
”500”の部分の値を小さくすると、早く戻すことができます。
html内に記述
「</html>」(html内の、ほぼ一番下)の上部分に、次のHTMLコードを記述します。
<p class='pagetop'><a href='#container'><i class='fa fa-chevron-up'/></a></p>
このコードで、PAGE TOPボタンの、動作とアイコン(表示内容)の指定ができます。
「class='pagetop'」で、クラス名の指定。
「href='#container'」で、戻り先の指定。
「i class='fa fa-chevron-up'/」で表示内容の指定。
「p ～ /p」で一段落とのことらしいです。
css部分に記述
「]]></b:skin>」の上部分に、次のHTMLコードを記述します。
.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #666;
text-align: center;
color: #FFF;
font-size: 20px;
text-decoration: none;
padding: 5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
このコードで、PAGE TOPボタンの、位置や大きさ、色などの見た目を変えることができます。
変更した部分
変更した部分は次のとおりになります。
html内の記述を変更
html内の、次の太字部分を変えました。
<p class='pagetop'><a href='#container'><i class='fa fa-chevron-up'/></a></p>
※ここでの太字部分は元の設定の記述です。
太字部分は、アイコンの指定をする部分なので、文字や記号でも大丈夫そうですが、最初に指定されていたものとは違うアイコンにしました。
css部分の変更
css部分の、次の太字部分を変えました。
.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 15px;
}
.pagetop a {
display: block;
background-color: #666;
text-align: center;
color: #FFF;
font-size: 20px;
text-decoration: none;
padding: 5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
※ここでの太字部分は元の設定の記述です。
アイコンを変えたために、若干の大きさの調整をしました。
その他については、調整しましたが、うまく決まらなかったため、元の設定値に戻しました。
参考になったWEBページ
ここの部分で参考になったのは、こちらのWEBページです。
トップへ戻るボタンを簡単5分で実装【jQuery】参照：株式会社ウィル
(https://www.will-hp.com/wpblog/web/149/)
よく使うFontAwesomeの日本語まとめ作ってみたよ。コード検索とかに手こずったりするので参考にしてみてね！参照：Root-013
(https://website-homepage.com/web-design/tips/font-awesome-japanese)
まとめ
今回のPAGE TOPボタン追加は、今まで、やっていなかったのが遅すぎるくらいでした。
自分で、ブログを見ていて、記事の一番下部分に来た時、メニューなどに行きたいとき、いちいちスクロールを何回もしなければならず、不便だなあと感じていました。
正直、HTMLのコード変更は、いまだに、やってみるのが怖くて、難しいです。
ですが、参考になるWEBページがたくさんあって、検索の力を思い知っているところです。
そして、情報を公開してくれている方々に、感謝です。
これからも、少しずつ手を加えていきたいと思います。
また、変更をしたら、やり方を忘れないように、ブログに残していきます。
今回はこの辺で失礼します。
ありがとうございました。
|
|
|
投稿
0 件のコメント :
コメントを投稿