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

      2016/11/15

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

page-top

変更手順

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

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

ボタン表示位置

#page-top {
right: 20px;
}

ボタンの形状

#page-top a {
-moz-opacity:0.75;
-khtml-opacity: 0.75;
opacity: 0.75;
padding: 5px;
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
background-color: #356;
box-shadow: 0 1px #000;
}

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

ボタンの文字部分

#page-top a {
font-size: 30px;
font-weight: bold;
text-align: center;
text-decoration: none;
}

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

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

#page-top a:hover {
background-color: #fa1;
}

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

 - STINGER Plus ,