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

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;
}

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

このエントリーをはてなブックマークに追加
にほんブログ村 IT技術ブログへ

コメント

メールアドレスが公開されることはありません。 が付いている欄は必須項目です