当ブログのコンテンツメニューは前回、記事上部に設置しました。
その為、記事を読み終わって一旦コンテンツ上部へ戻らないとメニューへたどり着けないという事になるので、他の記事への回遊率が悪くなると判断し今回、「サクッと」簡単にTOPへ戻れるようにブログ画面右下に固定で、「TOPへ戻る」ボタンを設置したので備忘録として記事にします。
「TOPへ戻る」ボタンの設置方法
さて、参考にした記事はコチラです↓
azanaerunawano5to4.hatenablog.com
コードをコピペで簡単設置です。
コードを設置する場所は「ヘッダーのヘッドに要素を追加」と「フッター」、「CSS」の３ヶ所！これでとりあえずPCビューではTOPに戻るボタンが設置・表示できます。
スマホ画面でも「戻る」ボタンを表示させる
先程の方法はPCビューで表示できますが、次はスマホ画面でも表示させる方法です。スマホで表示させるには、先程「CSS」に入れたコード（「/*上に戻る*/」で始まるコード）をカスタム＞スマートフォン＞ヘッダー（タイトル下）にぶち込んじゃいます。
その際に注意する点は、そのコードを<style type="text/css">コード</style>で囲んで下さい。そうしないと表示されません。
次に、フッターで入れたコード（div id="page-top"で始まるコード）をフッター＞フッターに入れます。
これでスマホビューでも「戻る」ボタンが画面右下に表示されるでしょう。
さらにカスタマイズするには？
この表示を元にして、さらにカスタマイズしてみます。
１．アイコンの高さを変えるには
当ブログはモバイルビューでは画面下部に「nend」広告があるのでデフォルトのままだと広告とアイコンが被ってしまいます。それを避けるには、
/*上に戻る*/
#page-top {
display:none;
position:fixed;
right:3px;
bottom:20px; ←ここの数字を高くする（当ブログでは６０にしています）
margin: 0;
padding: 0;
text-align:center;
赤文字の項目の数字を高くすればアイコンの位置が高くなります。
２．アイコンの色の濃さを変える
アイコンの色を薄くしたい！もっと濃くしたいという事であれば、
#move-page-top{
color:rgba(0,0,0,0.4); ←ここの４の部分を
text-decoration:none;
display:block;
cursor:pointer;
}
#move-page-top:hover{
color:rgba(0,0,0,0.6); ←ここの６の部分を
}
赤文字になっている数字の一桁の部分を低くすれば色が薄くなり、高くすれば色が濃くなります。
３．アイコンのサイズ（大きさ）を変える方法
アイコンのサイズ変更は、
<div id="page-top">
<a id="move-page-top"><i class="fa fa-chevron-circle-up fa-4x"></i></a>
この赤文字の「４ｘ」とされている部分、ここの数字を小さくすればアイコンは小さくなり、大きくすればアイコンも大きくなります。
他にも数字を弄ればもっとカスタマイズ出来そうです。色々試してみてはどうでしょう？
