シェアする

  • このエントリーをはてなブックマークに追加

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

シェアする

  • このエントリーをはてなブックマークに追加
  • 18
stinger5-pagetop-button-00-web


どうも、ジョニー@creatorcheck)です。

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

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

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

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

では、いってみよう!johnny-c

カスタマイズする理由

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

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

pagetop

カスタマイズ スタート

オリジナル画像の作成

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

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

適当でもいいので、完全オリジナルの
方が愛着が湧きますよ(笑)
johnny-c

作成した画像のファイル名を「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」の項目を探します。

真ん中ちょい下くらいかな。johnny-c
#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の数値は
好きに変更してね!
johnny-c

以上で完了!


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

まとめ(感想)

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

johnny-tubuyaki

あまりカスタマイズしすぎないのがコツ!
【STINGER5】「トップへ戻る」のボタンをオリジナル画像に変更する方法「PageTop」
この記事をお届けした
クリエイターチェックの最新ニュース情報を、
いいねしてチェックしよう!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク