【STINGER5】「トップへ戻る」のボタンをオリジナル画像に変更する方法「PageTop」

 
どうも、ジョニーです。

当ブログで使用しているテーマ（STINGER5）のカスタマイズした箇所の備忘録です。
（ちょいちょい書いていきます）

同じ箇所でも、サイトによって様々なカスタマイズ方法がありますよね。一概にどれが良いとは言い切れない。

これは当ブログでのカスタマイズなので、ご自身のやり方に合ったものを参考にしてくださいね！

使用するにしても、カスタマイズするにしても、自己責任でお願いします。

 

カスタマイズする理由

デフォルトでもよいのですが、よりサイトに合ったデザインにしたかったのでカスタマイズします。

当ブログはこんなアホみたいな画像にしています。（PCのみ表示しています）

 

カスタマイズ スタート

オリジナル画像の作成

「トップへ戻る」に使用する画像を作成しましょう！

作るのが面倒なら、フリー素材サイトとかで探してみてください。

作成した画像のファイル名を「pagetop.png」で保存してください。

 

オリジナル画像の作成

/wp-content/themes/stinger5ver20141123/images
上記の場所（imagesフォルダの中）に、作成した画像をアップロードします。

「stinger5ver20141123」この部分はインストールしたバージョンによって異なるので、確認してください。

 

「footer.php」をいじる

バックアップはとっておきましょうね。

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper" class="fa fa-angle-up"></a></div>
<!-- ページトップへ戻る　終わり -->

上記の部分を、

<!-- ページトップへ戻る -->
<div id="page-top"><a href="#wrapper"><img src="<?php echo get_template_directory_uri(); ?>/images/pagetop.png"  /></a></div>
<!-- ページトップへ戻る　終わり -->

に変更します。

 

「style.css」をいじる

スタイルシートの「page-top」の項目を探します。

#page-top {
    position: fixed;
    z-index: 9999;
    bottom: 20px;
    right: 0px;
    font-size: 12px;
}
#page-top a {
    background: #665e53;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    text-align: center;
    display: block;
    -moz-opacity: 0.3;
    opacity: 0.3;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
    color: #fff;
}

ここを、

#page-top {
    position: fixed;
    z-index: 9999;
    bottom: 20px;
    right: 0px;
}

に変更します。

以上で完了！

 
上記を参考にお好きにカスタマイズどうぞ。

 

まとめ（感想）

欲を言えばもっと色々としたいのですが、あまりやり過ぎもよくないので.. シンプルイズベスト？