WordPressのカスタマイズ方法やプラグインレビューを中心に、パソコン/動物/植物のことなどを紹介するホームページです

【Simplicity2】「ページトップへ戻る」ボタンの表示をカスタマイズする方法

公開日:2017(平成29)年7月5日/最終更新日:

Knowledge Base Wordpress パソコン カスタマイズ 設定



【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています

当サイトで使わせていただいている【Simplicity2】テーマ。このテーマに出会ってからサイト作りがすごく楽しくなって、しかも使えば使うほど「なるほど~~」という機能満載でしかもカスタマイズしやすいので大変気に入っています。

まあ、カスタマイズしすぎて、おそらくこのサイトも基本構造以外はほとんど別物?になってしまっていますが・・・。

ちなみにもっと別物になってる金魚・熱帯魚・海水魚を飼育しよう!というサイトも運営しています。ファイル構造やコードも見やすいので本当に使いやすいテーマですね。

今回はカスタマイズネタの中でも一番地味?な、「ページ上部に戻る」ボタンのカスタマイズ。あまり気にする方もいないかもしれませんが、ノーマル状態だとちょっと小さくて、ちょっと分かりにくいかも・・・と感じたので変更してみました。

【Simplicity2】ではこのボタンをオリジナルの画像に変更できるようにもなっています(本当に痒い所に手が届くテーマです)。でも、オリジナルの画像ではなく今の表示をもうちょっと見やすくしたいという場合のカスタマイズ方法です。

当サイトでは少し大きめで、少し真ん中寄りに表示させていますのでスクロールして表示を見てみてくださいね。

色とマークはカスタマイザーで変更

マークについては「fontawesome」というアイコンマークを使用しているので、サイトから気に入ったものを選べばOKですね。変更はカスタマイザーの「レイアウト(全体・リスト)」からできます。

また、色についてもカスタマイザーの「色」に項目があるので変更すればOKです。

大きさや位置はCSSで変更

このボタンの大きさや位置の変更はCSSを編集して行います。子テーマを使っていれば追記するだけなので簡単です。

大きさの変更

このボタンに使われている「fontawesome」というアイコン自体は非常に小さいものです。【Simplicity2】でも拡大して使われています。この拡大率を変更することで自由にサイズのカスタマイズができます。以下のコードを子テーマのCSSへ追記します

/************** トップへ戻るボタンの大きさを大きくする ***************/
#page-top .fa-2x {
font-size: 3em;
}

コードの中の「3em」はノーマルだと2emで設定されています。標準の大きさの2倍という意味ですね(ここも絶対値で指定していないところがすばらしい!!)。当サイトでは少し大きめの3倍(3em)にしました。好みに応じて変更してくださいね。

また、CSS自体は「.fa-2x」とされていて、このままだと同じセレクタにすべて適用されてしまう可能性があるので、IDである「#page-top」に限定してカスタムCSSを加えています(この辺はCSSの分かる方なら当然理解できることです)。

位置の変更

通常のブラウザだと右側にスクロールバーがありますから、トップへ戻るボタンも右側のままがいいと思います。ただ、今主流のワイド画面だと本体から少し離れたところにボタンが表示されていますので、少し本体寄りに変更します。

/************** トップへ戻るボタンの位置 ***************/
#page-top {
position: fixed;
right: 20px;
bottom: 20px;
}

「right」は画面右端からの隙間の量、「bottom」は画面下からの隙間の量です。幅の狭い画面で見た時やモバイル・タブレットで見たときのことを考えて調整してください(自身ではこれ以上中央に寄せると見にくいかなと思ってます)。

確認する機器がないよ~~という方はブラウザのデベロッパーツールで表示画面の種類を変更して確認すればOKです。

本当に些細なカスタマイズですが、作っている側は気にならないことでも「見る人」の立場で考えるともうちょっと見やすく、もうちょっとここを・・・という項目はどんなテーマを使っていても出てくると思います。特にCSSのカスタマイズ方法が分かってくるとサイトの印象をぐっと変えることができるようになりますから、初心者の方もぜひチャレンジしてみてくださいね。やってるうちにだんだんわかってきますよ!!

ただ個人的に思うのは「学生時代の美術の授業できちんと色について勉強しておけばよかったな~~」ということ。白黒基調のサイトだと気にならないところもちょっと色を付けていくとだんだん難しくなりますからね(多分最近のサイトで背景色が白、文字が黒というサイトが多いのも色を使うと途端にセンスが重要になるからという理由があると思います)。でも、この色問題にも果敢にチャレンジ?することでぐっとオリジナルなサイトにすることができます。

そういうカスタマイズも【Simplicity2】はできるだけ一括で変更できるように設計されてますから本当に便利です。実は別のテーマも使ってみましたが、カスタマイズが大変だったので結局【Simplicity2】に落ち着きました。