Gushではデフォルトの「PAGE TOP」ボタンがありますが、

最近のボタンはアップマークが見やすいかなと思ったので、紹介します。

もちろん子テーマで完結します！

デフォルトの PAGE TOP ボタン

デフォルトでは文字をそのまま出力しています。

対象箇所

• header.php
• footer.php
• style.css

header.php

こちらはSNSボタンと同じアイコンFont Awesomeのライブラリを読み込みます。

headタグ内に挿入します。

※すでにある場合はそのまま何もしなくてOKです。

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
  

footer.php

iタグを挿入します。

原寸大では小さかったので、2倍サイズに指定しています。

<!-- ページトップへ -->
<div id="page-top"><a href="#header"><i class="fas fa-caret-up fa-2x"></i></a></div>
<!-- //ページトップへ-->
  

style.css

幅を半分にします。

/* page_top_begin */
#page-top a {
 width: 50px;
}
  

仕上がり

こんな感じです。