こんばんは。最近ブログのカスタマイズが楽しいmikanusagiです。
今日は、先日設置してみた、「上に戻るボタン」について。
そうそう。これです。
素人の自分では、さすがにまだ自作でこれを設置は無理…
ということで、いろいろな方が紹介されていましたが…
うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし
今回は、こちらのサイトを参考にさせて頂きました。
というか、ほぼほぼ、コピペさせて頂きました。
少し変えたのは以下。
Head要素に入れるタグ。
アイコンはフリーのWebアイコン、Font Awesomeを使用。
2018年5月現在は、Font Awesomeは5になっています。
Font Awesomeについては、先程記事を書いたので、よければどうぞ…。
最新版ではありませんが、私はFont Awesomeに関しては、
下記のコードを使っています。(2018/5/14時点では、v5.0.13が最新)
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
jQueryを使ってあるので、これは同じでいいのかな。
jQueryのことよく分からない(*´з`)
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
【2018年10月追記】
jQueryのところ、HTTPS配信の場合は、上記の「http:」を削除して、
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
がよいようです。(HTTP配信かどうかよくわからない場合も、これでOKです。)
【HTTPS配信なのに保護されていないと表示される】+ 【HTTPS だと jQuery がブロックされる】
フッタに入れるタグ。
Font Awesomeのアイコンの指示を記載するところがありますが…
▼コレ。
<i class="fa fa-chevron-circle-up fa-5x"></i>
▼うちはFont Awesome 5 なので、それに合わせて指示を少し変更。
(地味にfa がfasになってる…)
あと、うちのブログにあわせて、大きさを少し調整するために、fa-3xに変更。
<i class="fas fa-chevron-circle-up fa-3x"></i>
最後に。
この「上に戻るボタン」、便利ですね。。
実はこのブログに合わせたカスタマイズも目論んでいるのですが…。
今日はまだ出来ていません。やり方が分からなくて (笑)。
いい方法思いついたら、やってみようと思います。
