アーカードさんのなんでも雑記

TOPへ戻る

**********************************************************************************************

1.設定＞詳細設定＞headに要素を追加

(※コピペで、以下を貼り付けるだけ！)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2.デザインCSSの設定

デザイン＞カスタマイズ＞デザインCSS

(※以下のものを、コピペで貼り付けるだけ！)

/* ページトップへ戻るボタン */
#pagetop {
    position:fixed;
    bottom:10px;
    right:10px;
    padding:10px 20px;
    color:#7affff;
    text-align:center;
}

/* ページトップへ戻るボタン：ホバー時 */
#move-page-top:hover{
  color:rgba(0,0,0,0);
}



/* ページボトムへ進むボタン */
#pagebtm {
    position:fixed;
    bottom:60px;
    right:10px;
    padding:10px 20px;
    color:#7affff;
    text-align:center;
}

/* ページボトムへ進むボタン：ホバー時 */
#move-page-btm:hover{
  color:rgba(0,0,0,0);

右下に上に戻る・下に進むボタンが出るようにしています。

(※そういえば、右下にボタンが多いは右利きが多いから？)

もし、位置を変更したい場合は、「bottom(下)」と「right(右)」の数値を変更しましょう。

(※ちなみに、「top(上)」や「left(左)」に書き換えも可能！)

また、上に戻る・下に進むボタンの色変更に使うカラーコードは、以下のサイトにまとまっています。

16進数・RGB・RGBAカラーコード変換ツール

ここでは、はてなブログで上に戻る・下に進むボタンを設置する際のボタンを押したときの動作やボタンのアイコンを設定しています。

(※以下のものを、コピペで貼り付けるだけ！)

<!-- ページトップへ戻る -->
<script>
$(function () {
   /** ページトップ処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置が200を超えた場合
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn("slow");
       } else {
           // ページトップへをフェードアウト
           $('#pagetop').fadeOut("slow");
       }
   });

   // クリックした場合
   $('#pagetop').click(function() {
       // ページトップへスクロール
       $('html, body').animate({
           scrollTop: 0
       },"slow");
       return false;
   });
})(jQuery);
</script>

<!-- トップアイコンの設定 -->
<a id="pagetop" href="#top" class="page_top" style="display: none;"><i class="fa fa-arrow-circle-o-up fa-3x"></i></a>



<!-- ページボトムへ進む -->
<script>
$(function () {
   /** ページボトム処理 **/
   // スクロールした場合
   $(window).scroll(function() {
       // スクロール位置がボトム-1000を超えない場合
       if ($(this).scrollTop() < $(document).height()-1000) {
           $('#pagebtm').fadeIn("slow");
       } else {
           // ページボトムへをフェードアウト
           $('#pagebtm').fadeOut("slow");
       }
   });

   // クリックした場合
   $('#pagebtm').click(function() {
       // ページボトムへスクロール
       $('html, body').animate({
           scrollTop: $(document).height()
       },"slow");
       return false;
   });
})(jQuery);
</script>

<!-- ボトムアイコンの設定 -->
<a id="pagebtm" href="#btm" class="page_btm" style="display: none;"><i class="fa fa-arrow-circle-o-down fa-3x"></i></a>

参考(※本サイト用にアレンジしたため)：はてなブログ無料版に上に戻るボタンを設置 - RED NOTE

もし、上に戻る・下に進むボタンのアイコンを変更したい場合には、以下のサイトから気にいったものを選んで設定しましょう。

Icons | Font Awesome

https://fontawesome.com/icons?d=gallery&c=arrows=io"target="_blank"

*************************************************************************

https://www.gipsyjazznyumon.com/hatenablog-cursor-customize/

まずは以下のコードを「ダッシュボード」→「設定」→「詳細設定」→「headに要素を追加」に入れます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

次に、「ダッシュボード」→「デザイン」→「カスタマイズ」→「フッタ」に下記コードを入れます。

<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-5x"></i></a>
</div>
<script>
$(window).scroll(function(){
var now = $(window).scrollTop();
if(now > 500){
$("#page-top").fadeIn("slow");
}else{
$("#page-top").fadeOut("slow");
}
});
$("#move-page-top").click(function(){
$("html,body").animate({scrollTop:0},"slow");
});
</script>

上に戻るボタンのCSS

最後にフッタの下にあるデザインCSSに、下記のコードを入れます。先ほども言ったように、一番下にコードを入れると他のCSSと競合してうまく作動しない可能性があるので、一番下に入れて上手くいかない場合は、上の方の行に入れてみて下さい。

/*上に戻る*/
#page-top {
display:none;
position:fixed;
right:10px;
bottom:20px;
margin: 0;
padding: 0;
text-align:center;
}
#move-page-top{
color:rgba(246, 135, 116, 1);
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0, 0, 0, 6);
}
@media only screen and (min-width: 400px){
#page-top{
right:50%;
margin-right: -450px;
}
}

上に戻るボタンの色を変える方法

ボタンの色を変える方法は、上で紹介したCSSのコードの12行目と18行目のrgbaの後ろのカッコの数字を変えます。ちなみに今の設定はピンクと黒です。

• 12行目の赤のコードは、ボタンが常に見えている時の色


• 18行目の青のコードは、カーソルがボタンの上にある時の色になります。

色はこちらのサイトで調べることができます。

**********************************************************************************************

https://simadzu.hatenablog.com/entry/top-button

<!-- 上に戻るボタンのHTML -->
<div id="page-top">
<a id="move-page-top"><i class="blogicon-chevron-up"></i></a>
</div>

<!-- 上に戻るボタンのCSS -->
<style>
/* 上に戻るボタンの位置 */
#page-top {
position: fixed;
right: 21px;
bottom: 50px;
display: none;
}
/* 上に戻るボタンの見た目 */
#move-page-top {
font-size:38px; /* アイコンの大きさ */
color: #ddd; /* アイコンの色 */
cursor: pointer;
transition: 0.4s;
text-decoration: none;
display: block;
width: 55px; /* アイコンの背景の幅 */
height: 55px; /* アイコンの背景の高さ */
border: 9px solid #ddd; /* アイコンの背景の丸囲み線 */
border-radius: 50%; /* アイコンの背景の丸さ */
background: transparent; /* アイコンの背景の色 */
line-height: 60px; /* アイコンの位置 */
text-align: center;
}
/* 上に戻るボタンの見た目（マウスオーバー） */
#move-page-top:hover {
color: #000; /* アイコンの色 */
border-color: #000; /* アイコンの背景の丸囲み線の色 */
}
</style>

<!-- 上に戻るボタンのJavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
/* 上に戻るボタンの動作設定 */
var timeOut = null;
$(window).scroll(function () {
if (timeOut == null) {
timeOut = setTimeout(function () {
var element = $('#page-top');
var visible = element.is(':visible');
if ($(this).scrollTop() > 500) {
if (!visible) {
element.fadeIn('slow');
}
} else {
element.fadeOut('slow');
}
timeOut = null;
}, 500);
}
});
/* 上に戻るボタンの動作（クリック） */
$('#move-page-top').click(function () {
$('body, html').animate({scrollTop: 0}, 'slow');
});
});
</script>
上に戻るボタンのHTML（<div id="page-top">〜</div>で囲まれた部分）で、ボタンを表示します。はてな純正のアイコンフォント（Webフォント）を使っています。

上に戻るボタンのCSS（<style>〜</style>で囲まれた部分）で、ボタンの位置や見た目を調整します。フッタではなくデザインCSS（デザイン→カスタマイズ→デザインCSS）に貼り付ける場合は、<style>と</style>の記述は不要です。

上に戻るボタンのJavaScript（<script>〜</script>で囲まれた部分）で、ボタンの動作を設定します。下に500pxスクロールしたら、ボタンをふわっと表示します。