WordPressのテーマ「Gush」のページトップボタンのカスタマイズ

公開日:  最終更新日:2018/08/12

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;
}
  

仕上がり

こんな感じです。