[STINGER Plus]ページ先頭に戻るボタンをマテリアルデザイン風にするには？
STINGER Plusのページ先頭へ戻るボタンをマテリアルデザイン風にする方法です。
方法はスタイルシートを編集するだけです。
変更手順
- 外観>テーマの編集
- 編集するテーマを選択がstingerplus childなのを確認。
- スタイル>スタイルシート(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の２番目を 0 にすると、影無しになります。
ボタンの文字部分
#page-top a {
font-size: 30px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
ちょっとCSSを書いたことがある方ならお気付きでしょうが、ボタンの形状と同じ定義です。なので一緒にしてしまっても構いません。
自分はフォント部と外観部を分けて書いてます。
マウスオーバー時の背景色
#page-top a:hover {
background-color: #fa1;
}
上記を追加したら、ファイルを更新ボタンを押すと反映されます。
