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

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

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

変更手順

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の２番目を 0 にすると、影無しになります。

ボタンの文字部分

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

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

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

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

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

Tweet

前の記事

WordPressテーマ「STINGER Plus」の設定

次の記事

STINGER Plusカスタマイズ覚え書き