チップの日常

管理人チップの日常の出来事や気になる事を綴るブログ

はてなブログに「トップへ戻る」ボタンを設置してみました|スマホページ、PCページどちらにも対応してます

 スポンサード リンク

 どうもこんばんは☆

 私は自分のブログ向上の為に他のブログを見ることが多いのですが、画面右下にトップへ戻るボタンが付いているブログを良く見かけます。

f:id:chipsforest:20141006233706j:plain:w300

 ↑こんなヤツです。今見ているこのページにも付いていると思います。


 スクロールしても画面右下に固定で出てきて、これをクリック(スマホの場合はタップ)すると一発でページの先頭に戻れる優れもの。

 とても便利なので私のブログにも設置したいと思い設置方法を検索しました。


 スクリプトとかCSSとかあまり良くわからないので、色々な記事を参考にしながら試行錯誤してみた結果、理想に近いもの出来ましたよ!!


 ということで、今回は私が行ったはてなブログでの「トップへ戻る」ボタンの設置方法を紹介していこうと思います。

 参考にしたサイト:
jQueryでスクロールすると表示する系いろいろ | webOpixel

トップへ戻るボタン設置方法

①HTMLの記述

<p id="page-top"><a href="#wrap">PAGE TOP</a></p>

 上の「PAGE TOP」は好きな文字に変更可能「ページトップへ」とかでもいいですね。

②CSSの記述

<style>
/*↓トップへ戻る用css*/
#page-top {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#page-top a {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 15px 0;
text-align: center;
display: block;
border-radius: 5px;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
#page-top a:hover {
text-decoration: none;
background: #999;
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}
/*トップへ戻る用cssここまで*/
</style>

 上はトップへ戻るボタンの表示位置、ボタンのサイズ、文字サイズ、色等の指定です。

 数値とかカラーコードとかを変更してご自分の好きなようにアレンジ出来ます。


 あと、私が初めて知ったコードがあったので補足しておきます。

filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;

 上の3行はボックスの透過の指定です。数値が低くなるほど透過度が高くなります。

 数字が3つあるのは色々なブラウザに対応させるためみたいです。

 数値を低くしすぎると見え辛くなってしまうので注意。

③スクリプトの記述


<script type="text/javascript" src="">http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">

<script type="text/javascript">
$(function() {
var topBtn = $('#page-top');
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>


 最初のはjqueryとかいうのをグーグルから読み込む為の命令です。(私が未だにjqueryをよくわかっていないのは内緒…)

 その下はボタンを押したときにページの先頭に移動するようにするための命令です。

 スクリプトの細かい事はわからないので参考にしたサイトからそのままコピペさせていただきました(汗。

④上記コードを書く場所

 ①は「デザイン」→「スパナみたいなアイコン」→「記事」→「記事下」の下の方に記述。

 ②③は「設定」→「詳細設定」→「headに要素を追加」の中に記述。

 これで完了です。

 記述が面倒な場合は上記のコードをコピペして、後から自分の好きなスタイルに変更していけばOKです。


 今回ははてなブログでの「トップへ戻る」ボタン設置方法を紹介しましたが、他のブログやサイトでも使えそうですね。


 こんな感じで「トップへ戻る」ボタンの設置方法終わりです。最後まで読んでいただきありがとうございました(^^)

PAGE TOP