[STINGER Plus]ページ先頭に戻るボタンをマテリアルデザイン風にするには?

      2016/11/15

STINGER Plusのページ先頭へ戻るボタンをマテリアルデザイン風にする方法です。
方法はスタイルシートを編集するだけです。

page-top

変更手順

  1. 外観>テーマの編集
  2. 編集するテーマを選択stingerplus childなのを確認。
  3. スタイル>スタイルシート(style.css)をクリック

以下を追加します。
追加場所はタブレットなどの判定より上です。
スマートフォン・タブレットで表示を変えたい場合は、適宜その場所に追加して下さい。

ボタン表示位置

ボタンの形状

box-shadowの2番目を 0 にすると、影無しになります。

ボタンの文字部分

ちょっとCSSを書いた事がある方ならお気付きでしょうが、ボタンの形状と同じ定義です。なので一緒にしてしまっても構いません。
自分はフォント部と外観部を分けて書いてます。

マウスオーバー時の背景色

上記を追加したら、ファイルを更新ボタンを押すと反映されます。

 - STINGER Plus ,