ニナタブ

中華タブレットやノートパソコンの紹介レビューサイト

WordPress

STINGER8 カスタマイズ – トップへ戻るボタンを装飾してみる。

投稿日:

STINGER8にトップへ戻るボタンを実装してみます。

STINGER8ではデフォルトで戻るボタンがある!

こちらはSTINGER8のデモページです。

http://af-themewp.com/stinger8/

実は右下にトップへ戻るボタンがあることに気づきましたか?

このように、開発者ツールなどで探してみると右下にボタンがあることがわかります。

しかし、この色では訪問者は気づかないでしょうね。というか私も「戻るボタンつけよう!」と思い立つまで気づきませんでした。

トップボタンに色を付けよう!

それではまずは色を付けてみましょう。

(1) 編集画面から外観を選択して、STINGER8のカスタマイズを選択します。

(子テーマを使うと便利ですよ!)

(2) 追加CSSを選んで編集画面を開きます。

(3) 追加CSSの最後尾に以下の設定を追加します。

#page-top a {
  text-decoration: none;
  background: #47BEA0;
  color: #fff;
  padding: 12px 16px;
  text-align: center;
  display: block;
  -moz-opacity: 0.6;
  opacity: 0.6;
}

デフォルトでは「#f3f3f3」になっている色を「#47BEA0」に変更してみました。

するとこう変わります。

悪くないのではないでしょうか?
でも、これだけではちょっと寂しいので最後に角を丸くしてみたいと思います。

(4) 先ほどのCSSに角を丸くする設定を追加します。

#page-top a {
  text-decoration: none;
  background: #47BEA0;
  color: #fff;
  padding: 12px 16px;
  text-align: center;
  display: block;
  -moz-opacity: 0.6;
  opacity: 0.6;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

下の3つが角を丸くする設定になります。ポイントを変更することで円にすることも可能です。

最終的にこんな感じになりました。

なかなか悪くないんじゃないでしょうか!

-WordPress
-

執筆者:


  1. […] STINGER8 カスタマイズ – トップへ戻るボタンを装飾してみる。 – ニナタブ […]

  2. […] ・『ニナタブ』(STINGER8 カスタマイズ – トップへ戻るボタンを装飾してみる。)2017年6月25日検索 […]

comment

Your email address will not be published. Required fields are marked *

関連記事

関連記事はありませんでした