こんにちは。シーナと申します。
ブログのカスタマイズ、第2弾になります。
ブログを読み進めると、一気にページの一番上（TOP）に戻るためのボタンが右下に表示されることが多いです。
今回は予定を変更して、先に上に戻るボタンを自分のブログでも使えるようにしてみました。
当ブログを誰よりも読んでいる私が不便に感じてしまったからです。
しかし、また嵌ってしまいました。
このボタンは本当によく見かけます。
自分でブログをはじめるまで、私はなんとなく最近のブラウザを使えばサイト側は簡単な設定（ON/OFFレベル）だけで自分のブログに表示させることができるのかなぐらいにしか考えていなかったのですが、やはり自分である程度の設定はする必要があるのですね。
いつものように先人のお知恵に頼りながら設置してみました。
以下が調べた結果になります。少しでもあなたの参考になれば幸いです。
はてなブログで上に戻るボタンの設置に必要な3ステップ
最初に上に戻るボタン（正式名称は分からず）の設置に必要なことを記載します。
はてなブログ（無料版）を利用中で、上に戻るボタンをまずは設置だけしたい方は、そのまま指定の場所にコピペしていただければほとんどのブラウザで動作すると思います。
単語やコードについては後ほど簡単に説明していますので、興味がある方はそこまでお付き合いください。
紹介するコードをコピペする前にすでに追加しているコードのバックアップ（どこかにコピペ）を取っておくことをお勧めします。
ステップ1 デザイン => カスタマイズ => ヘッダ => タイトル下にコピペ
上に戻るボタンをクリックしたときに上にスクロールさせるために jQuery というプログラムを使用します。
自分のブログで jQuery を利用することをhead(ヘッド)タグに記載します。
jQueryには複数のメジャーバージョンがありますが、基本的には最新のバージョン3.x （2018年6月28日現在）を利用しましょう。
以下をコピペします。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
※改行されているかもしれませんが1行です。
最新バージョンは、以下の jQuery のサイトで確認できます。
jQuery Core – All Versions | jQuery CDN
※英語のサイトです。
上に戻るボタン自体は自作の画像や前回の記事で利用した Font Awesome のアイコンなど好きに設定することができます。
今回は、 Font Awesome 5 からそれらしいアイコン を利用します。
Font Awesome 5 アイコンをブログ内で利用するには以下の設定が必要です。
まだ未設定であれば設定（コピペ）してください。
[設定] ＝＞ [詳細設定] ＝＞ [headに要素を追加]
に、（すでに何かコードがある場合は、その下に）以下のコードを追記（コピペ）します。
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
※改行されているかもしれませんが1行です。
Font Awesome にもメジャーバージョンが複数あり、旧バージョン（4.7）のアイコンを利用する際は、以下のコードを追記（コピペ）します。
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
※改行されているかもしれませんが1行です。
ステップ2 デザイン => カスタマイズ => フッタにコピペ
ここではスクロールの動作を指定しています。
<!-- --> で括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。
以下をコピペします。
<!-- ページトップに戻る -->
<div id="page-top">
<a id="move-page-top"><i class="fas fa-arrow-alt-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");
return false;
});
</script>
ステップ3 デザイン => カスタマイズ => デザインCSSにコピペ
ここではアイコンの配置を指定しています。これで最後になります。
/* */ で括った文字列はコメントとして扱われますので、一緒にコピペして大丈夫です。
以下をコピペしたら［変更を保存する］をクリックして確定します。
/*上に戻るボタン関係*/
#page-top {
display:none;
position:fixed;
bottom:20px;
right:10px;
margin: 0;
padding: 0;
cursor:pointer;
z-index: 10;
}
#move-page-top {
display:block;
color:rgba(0,0,0,0.4);
cursor:pointer;
}
#move-page-top:hover {
color:rgba(0,0,0,0.7);
}
サイトを見てみましょう。いかがでしょうか。動作しましたでしょうか。
当ブログはこの設定で動作しています。
補足説明（長いです）
とりあえず動作はしたけど、何をしているのか知りたい、アイコンも変えたい、他も微調整したいという方は、もう少しお付き合いください。
ステップ1の補足
jQuery とは
今回の上に戻るボタンは、［JavaScript］と呼ばれるプログラムで動作しています。
jQuery は［JavaScript］の中で、もっとも有名なファイル群（ライブラリ）の名前です。
［JavaScript］といえば、我々40代にはインターネットの荒波から素敵な情報を得るために情熱に任せてネットサーフィンに挑んでいたころ、とりあえず無効にしていたことでお馴染のプログラム言語のひとつではないでしょうか。
私だけですかね。
しかし、まさか自分で利用する側になるとは当時は思いもしませんでした。
jQuery のよいところ
いろいろあります。
- いちからJavaScriptを記載する必要がない
簡単な命令をちょっと記述するだけで、あとはうまく処理してくれます。 - ブラウザの種類に関係なく動作する
たくさんのブラウザや端末がある現在ではすごいことです。 - いわゆるオープンソースであるため、無料で利用できる
助かります。
これは人気が出ますね。
そんな jQuery ですので、情報もたくさんあり、私のような初心者でもブログ上でちょっとしたギミックを動かすことができるようになるのです。
jQuery のバージョン
jQuery にはメジャーバージョンが３つ（1.x, 2.x, 3.x ）あります。
2018年現在で1.x, 2.x の開発はすでに終了しています。
3.x は、今となっては古いブラウザ（Internet Explorer 6, 7, 8 など）をサポートしていません。
※英語のサイトです。
古いブラウザでも jQuery を利用したい場合には、以下を代わりにコピペします。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
※改行されているかもしれませんが1行です。
今回の上に戻るボタンは、3.xでも1.x でも、どちらでも動作します。
古いブラウザでも利用させたいという理由がなければ 3.x を利用しましょう。
ブラウザの世界シェア
Net Applicationsによるブラウザの世界シェア調査によると、2018年5月でもInternet Explorer 8（IE8）の利用者が増えている（とはいえ、約1%ちょっとでの話です）といった情報がありました。
このIE8は、Windows XP 上のIE8（Windows XP で動作する最後のバージョン）だそうです。
Windows 7 + IE8 で自分のブログを見たとき、今回の変更とは関係なくブログの表示自体が崩れてしまいました。
そのため jQuery でだけ IE8 以前のことを想定しても仕方ないと判断し、私は最新版のjQueryを利用することにしました。
ステップ2の補足
以下の太赤字の部分で、アイコンの種類とサイズを指定しています。
fas fa-arrow-alt-circle-upが種類、fa-5x がサイズです。
<a id="move-page-top"><i class="fas fa-arrow-alt-circle-up fa-5x"></i></a>
アイコンに決まりはありません。自分なりのアイコンにしてみましょう。
当ブログでは、前回の記事でご紹介した以下のサイトのアイコンを使用しています。
旧バージョンでは、アイコン指定の書式が微妙に（fas が fa のように）違います（サイズの書式は同じ）が、Font Awesome のサイトからコピペするので問題はないと思います。
以下の太赤字の部分で、スクロールの速度を指定しています。
$("#page-top").fadeIn("slow");
$("#page-top").fadeOut("slow");
$("html,body").animate({scrollTop:0},"slow");
指定しない：デフォルト値（400ms）になります。0.4秒です。
slow：600ms(0.6秒)です。
fast：200ms(0.2秒)です。
数値：500など数値で設定ができます。(1が0.01秒、1000で1秒です。)
嵌ったこと（未解決）
まず、結局私には原因と解決方法が分かりませんでした。
私がメインで利用しているブラウザ Sleipnir 6 for Windows では、2018年6月28日現在、なぜか Font Awesome 5 の大部分のアイコンが表示できないのです。
表示できるものもありますが、違いがわかりません。
私は、はてなブログの更新には chromeを使用しているのですが、その流れでブログの確認にもchromeを使用していて気づきませんでした。
普段のサイトチェック時にふとSleipnir 6で自分のブログを見てみたところ、見出しのアイコンが正しく表示されていないことに気づいたのです。
上に戻るボタンのアイコンも表示されません。
切り分けした内容は、以下の通りです。
- 最初に確認した端末（Windows 10）とは別端末でも変わらず
- Sleipnir 6 の設定やキャッシュを削除しても変わらず
- Sleipnir 6を最新版（2018年6月28日現在）に更新しても変わらず
- Sleipnir 4.5 for Windows では正常に表示される（同一端末）
- そもそも本家の Font Awesome 5 サイトのアイコンも大部分が表示されない
- 旧バージョン Font Awesome 4 のアイコンは表示される
- 疑似要素での指定対策（font-weight: 900;）をしても変わらず
見出しのアイコンだけでも表示されないかと思い、念のために確認しました。
検索の仕方が悪いのかもしれませんが、情報がまったく見つかりませんでした。
そのため私の環境だけでしか発生しないのかもしれません。
私の勘違いの可能性も大いにありますし、解決方法がないので迷ったのですが、もし同じ問題が出ている人の（自分だけではないことの確認の）参考になればと思い公開することにしました。
この調査の過程で、ブラウザのシェアを確認したのですが、Sleipnir は国内シェアのトップ10にいる（2018年6月20日現在）のですね。
自分もメインで Sleipnir 6 を使用しているため、意外な結果（周りにいません）にうれしかったのですが、バージョン4.5 の話でした・・・・・・。
私は今後も Sleipnir 6 を使います。
世の中には本当にたくさんのブラウザがあります。
あるブラウザでは見えても他のブラウザでも同じように見えるとは限らないということはブログをする上では認識しておいたほうがよさそうです。
ただ、そこを気にして設定自体をしないより、ひとまず大多数が利用しているブラウザで動作するなら設定してしまうことも必要だと思いました。
（これが仕事だとまた変わってくるとは思います。）
私はこの結論にいたるまでに、かなり時間を使ってしまいました。
とはいえ、自分としては知らなかったことを知れましたし、コードの意味も少しは理解することに繋がりましたので、結果はよしです。
（前回も同じことを言った気がします。）
ステップ3の補足
以下で、アイコンの位置を指定しています。
bottom:20px;
right:10px;
bottom で、底から px （ピクセル）単位で位置を指定します。
right で、右端から px （ピクセル）単位で位置を指定します。
color:rgba(0,0,0,0.x);
では、アイコンの色と透明度を指定しています。
最後の数字（0.x）が透明度に該当しており、0.1単位で 0 ～ 1 の範囲で指定します。1が一番濃いです。
hover（ホバー）
hover（ホバー）は、カーソルを合わせたときの処理を指定します。
今回はアイコンの色を少し濃くしています。
スマホ対応
当ブログはレスポンシブデザインに対応したテーマ『Minimalism』を利用していますのでスマホ対応は不要です。
使用しているテーマが未対応の場合はメディアクエリ[@media screen]を使用してひと手間必要になります。
自分で未確認の方法は載せられないため、申し訳ありませんが、こちらはキーワードmedia screen で検索してください。
終わりに
他にもカスタマイズしたい個所はあったのですが、最初は自分が公開した記事を自分で何度も読みますよね。
そのため、やはり上に戻るボタンがあったほうが便利だと思ったことが、こちらを優先した理由です。
カスタマイズ以外にも書きたいことはたくさんあるのですが、仕事柄なかなか平日には時間が取れません。
新しいことを始めるということは、これまでの習慣を変えることになります。
ゆっくり自分の最適なペースを見つけて、楽しく続けていきたいと思います。
それでは、また。
おすすめ記事です。
当ブログ、1年後のアクセス数と収益です。
はてなブログにGoogle検索ボックスを設定できます。
iHerb アフィリエイトの始め方です。
通信費削減のために自宅のネット回線を楽天モバイル（モバイルルーター代わり）にするという選択肢はありですよ。
スキマ時間を使って楽天ポイ活始めませんか。おすすめアプリと獲得ポイント数を見える化しました。
