借金地獄な人生ひたすら自業自得

読者です 読者をやめる 読者になる 読者になる

借金地獄な人生だけど自業自得

離婚・再婚・養育費・FX大損・借金地獄・債務整理。壮絶な人生と残念な貧乏生活を晒します。

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:3px;
right:3px;
padding:4px 4px;
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: 4px 4px; 
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:3px;
right:3px;
padding:4px 4px;
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: 4px 4px; 
border: 1px solid #c9c19f;
opacity: 0.6;
z-index: 99;
}

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

最後に

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

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

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