TOPに戻るボタン付けたけど邪魔だったので極限まで目障りにならない様にカスタマイズしてみた

はてなブログをカスタマイズしてて、ずっと気になってた事があります。やっぱりTOP（一番上）へ戻るボタンは設置した方がいいのかな？と。

PCで見る場合や、スマホデザインのデフォルトの場合は、ページの一番下の方に「上へ」のリンクあるからまだ良いのかもしれません。

しかし、レスポンシブルデザインな人やスマホカスタマイズでデフォルトの部分を削除してしまった人はこれがないので、スマホで見る時にはちょっと不便かと思います。

妻に借金地獄を告白から弁護士相談や債務整理、ブラックリスト入りなど壮絶な借金体験談一覧

やっぱ戻るボタンは必要かな？

そんな風に思ってはみたものの、ブログを立ち上げて以来ずっと放置しておりました。

そんな時、スマートニュースで見かけたこのはてなの記事に衝撃を受けました。

怒られてしまいました。。。無いとやっぱ、読者さんには何かと不便でしたね。

TOPへ戻るボタン設置してみたけど

付けてみましたよ。ボタン。付けてみての第一印象。便利以前に、邪魔じゃない？これ。

なんか、チラチラ付きまとってて目障りなんですよ。文字に被るので先読みしにくいし、スマホスクロールする時に間違って押してしまいそうだし。

検索して、あれこれコピペしてきて試してみましたが、正直しっくりいきません。

TOPへ戻るボタンを我流アレンジ

神経質でぶきっちょうなこてつ。納得いかないので、見よう見真似で我流アレンジしてみました。

完成型がこんなの。右下見て下さい。

拡大するとこんな感じです。

私の画面でですが、なるべくブログ画面に被らない様、最大限右側に寄せて大きさはミニマムにしました。余白の設定にもよると思いますが、これなら写真や文字はギリギリ被らないかの位置なので、上手くいけば余白を走り存在がほぼ気にならないと思います。

目立たない＝新規訪問の方に気づかれにくい欠点もあるのでしょうが。。。まぁ、気づかれなかったとしても、ボタンを設置してないのと同様なだけです。

レスポンシブルデザイン用コード

一応コード貼ってみます。ところどころコードがおかしいとこあるかも知れませんが、ど素人が試行錯誤してアレンジしたものなので自己責任でお願いします。手順はフッタとCSSへコピペするだけです。

フッタ貼り付け分

こちらを、ダッシュボード→デザイン→スパナマーク→フッタ にコピペして下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
$('#pagetop').fadeOut();
}
});
$('#pagetop').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;">^</a>

CSS貼り付け分

こちらを、ダッシュボード→デザイン→スパナマーク→デザインCSS にコピペ

/*TOPへ戻るボタン*/
#pagetop {
position:fixed;
bottom:2px;
right:2px;
padding:2px 2px;
color: #5d5d5d;
font-size:16px;
text-decoration:none;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 3px 3px; 
border: 1px solid #c9c19f;
opacity: 0.6;
z-index: 99;
}

#pagetop a:hover {
color: #5d5d5d; 
background:#EEEEEE;
}

スマホデザイン用コード（有料版）

こちらは有料版のみでの対応になります。手順はフッタとタイトル下へコピペするだけです。

スマホフッタ貼り付け分

コードはレスポンシブルデザインの時と同じ物ですが、再度置いておきます。こちらを、ダッシュボード→デザイン→スマホマーク→フッタ にコピペして下さい。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('#pagetop').fadeIn();
} else {
$('#pagetop').fadeOut();
}
});
$('#pagetop').click(function() {
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
});
</script>

<a id="pagetop" href="#top" class="page_top" style="display: none;">^</a>

スマホタイトル下貼り付け分

こちらを、ダッシュボード→デザイン→スマホマーク→ヘッダ→タイトル下 にコピペして下さい。この時、「スマートフォン用にHTMLを設定する」にチェックをお忘れなく。

<style type="text/css">
#pagetop {
position:fixed;
bottom:2px;
right:2px;
padding:2px 2px;
color: #5d5d5d;
font-size:16px;
text-decoration:none;
background: linear-gradient(
-45deg,
#fff 25%,
#f4f4ed 25%, #f4f4ed 50%,
#fff 50%, #fff 75%,
#f4f4ed 75%, #f4f4ed
);
background-size: 3px 3px; 
border: 1px solid #c9c19f;
opacity: 0.6;
z-index: 99;
}

#pagetop a:hover {
color: #5d5d5d; 
background:#EEEEEE;
}
</style>

最後に

ふぅ。これスマホだけで記事書くの超面倒くさかった。。。しばらくまたカスタマイズは封印だな。

再度言いますが、ワープ世代のおっさんが試行錯誤してアレンジしたものなので、くれぐれも自己責任でお願いしますね。

あと、以下の記事みたいにならない様、バックアップもお忘れなく