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

に変更します。

rightやbottomの数値は
好きに変更してね！

以上で完了！

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

まとめ（感想）

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

あまりカスタマイズしすぎないのがコツ！

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver4.x対応版

posted with カエレバ

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-14

Amazon

楽天市場

Yahooショッピング