上に戻るボタンを設置してみた。

f:id:mikanusagi:20180504150209p:plain こんばんは。最近ブログのカスタマイズが楽しいmikanusagiです。

        今日は、先日設置してみた、「上に戻るボタン」について。

f:id:mikanusagi:20180508001623p:plain

そうそう。これです。

素人の自分では、さすがにまだ自作でこれを設置は無理…

 

ということで、いろいろな方が紹介されていましたが…

うっすら透明な「上に戻る」ボタンのはてなブログ設置法 - あざなえるなわのごとし

今回は、こちらのサイトを参考にさせて頂きました。

というか、ほぼほぼ、コピペさせて頂きました。

 

 

少し変えたのは以下。

 

Head要素に入れるタグ。 

アイコンはフリーのWebアイコン、Font Awesomeを使用。

2018年5月現在は、Font Awesomeは5になっています。

Font Awesomeについては、先程記事を書いたので、よければどうぞ…。

便利なフリーアイコン: Font Awesome を導入。

 

最新版ではありませんが、私はFont Awesomeに関しては、

下記のコードを使っています。(2018/5/14時点では、v5.0.13が最新)

jQueryを使ってあるので、これは同じでいいのかな。

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>

 

 

最後に。

この「上に戻るボタン」、便利ですね。。

実はこのブログに合わせたカスタマイズも目論んでいるのですが…。

今日はまだ出来ていません。やり方が分からなくて (笑)。

いい方法思いついたら、やってみようと思います。