ガジェレポ!

京都在住の中年サラリーマンブロガー。 Mac、iPhone、ゲームにアプリなどなど興味をもったガジェットの情報をなんでもレポート。

Stinger3子テーマ「CANDY CRAZY」で「ページTOPへ戻る」ボタンをカスタマイズ。

f:id:gadgerepo:20151115122237j:plain

こんにちは、@gadgerepoです。

筆者はSEOに強いWordpress用テーマとして大人気の「Stinger3」、そしてその子テーマとして最適化された「CANDY CRAZY」をこよなく愛しつつ、さらなるパワーアップを目指して日々カスタマイズに精進しています。 今回取り上げるのは「PAGE TOP ↑」ボタン、ページを下にスクロールしていくと右下にいつのまにか現れ、クリックするとそのページの先頭にあっという間に戻ってくれる便利な機能です。

【追記】 その後、当ブログは WordPressから「はてなブログ」へと移行しました。

ご了承くださいm(__)m

〜WordPressカスタマイズ備忘録 その8〜

奥ゆかしい筆者としては(・∀・)デフォルト状態だと少しうるさいかなーと思っておりまして、もう少し控えめなデザインに変更することにしました。

具体的には現状グレーベタに白抜き文字となっているのを、ベタを透過処理して背景が白の場合は「PAGE TOP ↑」の文字だけが表示され

f:id:gadgerepo:20151115122414p:plain

背景に色があったり画像があったりする場合は透過ベタと重なって若干色が変わって表示される、というふうにしたいと思います。

また、角Rの数値もいじってより丸みを帯びたデザインにします。

f:id:gadgerepo:20151115122440p:plain

マウスオーバーで色が変わります。

f:id:gadgerepo:20151115122503p:plain

例によって、備忘録を兼ねて解説します。

スタイルシートの変更

ページTOPボタンの仕様はstyle.cssに書かれています。

Stinger3のstyle.cssでは698行目あたりに

/*-----------------------------
ページTOP
------------------------------*/

#page-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    font-size: 10px;
}
#page-top a {
    background: #665e53;
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 10px 5px;
    text-align: center;
    display: block;
    border-radius: 5px;
    /* CSS3 */
    -moz-border-radius: 5px;
    /* Firefox */
    -webkit-border-radius: 5px;/* Safari,Chrome */
}
#page-top a:hover {
    text-decoration: none;
    background: #d6cdc0;
    color: #665e53;
}

子テーマCANDY CRAZYのstyle.cssでは303行目あたりに

/*-----------------------------
ページトップへ戻るのカスタマイズ
------------------------------*/
#page-top {
  bottom: 15px;
}
#page-top a {
  background: none repeat scroll 0 0 #DA6272;
  height: 40px;
  padding: 10px;
}

というふうに書かれています。

筆者は子テーマCANDY CRAZYの該当部分を以下のように書き換えました。

Stinger3の場合はご使用の子テーマに追記でOKです。

/*-----------------------------
ページトップへ戻るのカスタマイズ
------------------------------*/
 #page-top {
 font-size: 12px;
}
 
#page-top a {
 background: rgba(255,255,255,0.2);
 color: #EF4728;
  border-radius: 20px;
 /* CSS3 */
 -moz-border-radius: 20px;
 /* Firefox */
 -webkit-border-radius: 20px;
 /* Safari,Chrome */
}
}
 
#page-top a:hover {
 background: rgba(255,255,255,0.2);
}

透過処理の仕様は background: rgba(255,255,255,0.2);の部分で、 RGB(赤, 緑, 青)での色指定が(255,255,255) 不透明度が(0.2) の数値をいじれば変更できます。

また、角Rは

  border-radius: 20px;
 /* CSS3 */
 -moz-border-radius: 20px;
 /* Firefox */
 -webkit-border-radius: 20px;
 /* Safari,Chrome */

の“20px”で変更できます。

まとめ

以上、簡単な「Stinger3」「CANDY CRAZY」のカスタマイズをご紹介してみました。

ちょっとしたアクセントに、いちどお試しください。おつかれさまでした。