【Simplicity2】「トップへ戻る」を丸いボタンへ!CSSで大きさ・色・形を変更する方法。

この記事をシェアする

2016-08-11 19.04.25 5

WordPressテーマ「Simplicity」で画面右下に表示される「トップへ戻るボタン」のアイコンをCSSで変更しました。「外観→カスタマイズ」からでは設定できない、大きさの変更やアイコンを丸くしたりなどの調整もできます。

スポンサーリンク
Google AdSense 336×280

トップへ戻るボタンのアイコンをCSSで変更する

Simplicityの「トップへ戻るボタン」は、「Font Awesome」というアイコンフォントとCSSで作られています。CSSを変更する場合、style.css内にある、#page-top{}、#page-top a{}を調整します。

ちなみに何も変更していない「Simplicity」の「トップへ戻るボタン」がこちら。

2016-08-11 19.04.25

「トップへ戻るボタン」を大きくする

まずは「トップへ戻るボタン」の大きさを調整。フォントアイコンの大きさは、style.cssの#page-top a{}でフォントサイズ指定します。

マーカー部分が変更したところです。子テーマにそのまま入力してもokです。

フォントサイズをちょっと大きめに指定しましたが、こうすると以下のようになります。

2016-08-11 19.53.48
「トップへ戻るボタン」が大きくなります。

「トップへ戻るボタン」の色を変える

「トップへ戻るボタン」の色をCSSから変更する場合も、style.cssの#page-top a{}でカラーを指定します。

文字色を変える

文字色はもともと白が指定されていたので、これを黒に変更してみると。

2016-08-11 19.12.25
文字色が白→黒へかわり、ちょっと雰囲気が変わります。

背景色を変える

背景色はデフォルトで薄いグレーが指定されていたので、これを例えばネイビーに変更する場合はこのように。

これで背景色が薄いグレー→ネイビーへ。フォントサイズも大きくしています。

2016-08-11 19.56.16

サイトカラーにあわせて調整するといいでしょう。

トップへ戻るボタンを丸くする

デフォルトでは四角い形状の「トップへ戻るボタン」を丸くしてみます。ここでもstyle.cssの#page-top a{}で調整します。

border-radiusとpaddingで形状を調整。

2016-08-12 18.39.12
するとこのように、「トップへ戻るボタン」が四角→丸になりました。

最終的にコレにした!

あれこれ試しましたが、最終的に採用した「トップへ戻るボタン」がこちらです。

2016-08-12 23.28.48

大きさや色はデフォルトのまま、丸いボタンにしました

style.css(子テーマ)ではこのように指定しています。

なお今回僕は、大きさと形の調整がメインだったのでCSSで変更しましたが、「Simplicity」は色やアイコンフォント変更だけなら「外観→カスタマイズ→色 or レイアウト(全体・リスト)」で設定可能です。

大きさや丸いアイコンにする場合は、上記を参考に導入してみてください。

スポンサーリンク
Google AdSense 336×280