[Đ]1分でできる。WordPressテーマ、Stinger3の「ページTOPへ戻る」ボタンを左下へ移設する方法

公開日: : Stinger3, WordPress, ブログカスタマイズ


スポンサーリンク

ども。まつだい(@matsudai23)です!

WordPressテーマの「Stinger3」を使ってる方は、ページを下にスクロールしていくとデフォルトで「PAGE TOP ↑」というボタンが、右下にフワッと表示されると思います。

このボタン、いわゆる「ページTOPへ戻る」ボタンで、クリックするとそのページのトップ、つまり先頭にシュシュシューっと戻るボタンなんです。

今回はこの「ページTOPへ戻る」ボタンを、右下から左下に移動させたいと思います。


スポンサーリンク

なぜ左下にしたいのか

好みです!(嘘ですw)

本当の理由は、個人的にボタンが右下だとマウスの移動にストレスが生じると感じたからです。

これはオレを含めた「右利き」の人に共通することだと思いますが、右手にマウスを持った状態では人間の関節の構造上、マウスを左に移動するのに比べ、右に移動する方が負担が大きいと思いました。

もしお手元にマウスがあれば試してみてください。
手首を左に振るより、右に振る方が手首に負担がかかると思います。

なので、右下に有る「ページTOPへ戻る」ボタンをクリックするのはオレにとって結構ストレスだったりします。

やり方(CSSを一行変更するだけ)

例によってstyle.cssを編集します。

編集するのは

↑の「right: 20px;」部分です。

記述も短いし、せっかくなので簡単に各指定の意味を解説します。

#page-top { ←ここから「page-top」の設定するよー!の合図。
position: fixed; ←不思議な呪文です。ドラクエでいうところの「アストロン」と思ってもらえばいいです。
bottom: 40px; ←下から40pxのところに表示させるよ!って意味。
right: 20px; ←右から20pxのところに表示させるよ!って意味。
font-size: 10px; ←文字の大きさは10pxでございまーす!って意味。
} ←おつかれさん!って意味。

さて、勘の良い皆様ならもうお分かりですね!
そう!「right: 20px;」の数字を大きくしていけばそのうち左まで到達しますよねッ!!

・・・とか言うと思ったかw

正しくは「right」を「left」に書き換えましょう!

そうですね。右からじゃなくて、左から20pxにしてやればいいですね。

このように書き換えると、下から40px、左から20pxの場所に「ページTOPへ戻る」ボタンが移動します。

注意!ページ左下にStinger3標準のSNSボタンや、何かコンテンツが有る人は調整が必要です!

「ページTOPへ戻る」ボタンを左下に移動したということは、既にあった左下のコンテンツとカブってしまうということです。

オレもSNSボタン群を左下に配置しているので少々調整してます。合わせてフォントのサイズ等も好みに変更してます。

是非お好みでやってみてください!もちろん右に有っても別に良いって人はそのままでも構わないと思います。そこは個々の感覚的なものですからw
それに「僕は左上が良い!」っていう人も、「私は右上が良いニャン!」っていう猫耳メガネっ娘も、「拙者はど真ん中が良いでござる!!」っていう命知らずなラストサムライも、ご自分の好みの位置に配置してみてください。
(まぁ、一番は読者の好みに合わせなきゃいけないんですがねw)

さいごに

今回も簡単にできるWordPressテーマ「Stinger3」のカスタマイズをご紹介してみました。

オレ程度のへっぽこブロガーでもできるカスタマイズですので是非やってみてください。

まつだい(@matsudai23)でした!


スポンサーリンク

いいね!・フォロー大歓迎!

関連記事

ブログを書くのに使ってるアプリたち

暮らしをおトクにかえていく|ポイントインカム
  • まつだい
    (@matsudai23)

    へっぽこモブロガー

    熊本県在住。1984年(昭和59年)生まれ。
    妻子持ち(男1人、女2人、妻1人)の親バカへっぽこモブロガー。
    Apple、Mac、iPhone厨。
    MacやiPhone、嫁と子供が好きな、嫁バカ&親バカのおっさんが暇な時書いてると思って貰えばだいたい合ってます。
    僕についてもっと詳しく知りたいという方は居ないとは思いますが一応自己紹介ページをご用意してますので御覧ください。