
気になりだしたら止まらないカスタマイズ。
わかります。わかりますよ、その気持ち。
スワローって、デザインがものすごくカッコいいのに、ページトップに戻るボタンがちょーっとダサいんですよね。
ダサいっていうかグレーだから汎用的というか。
色だけでも変えたいなぁとずっと思っていました。
なので、そのカスタマイズコードをご紹介します。
※なお、カスタマイズは自己責任でお願いします。
現在(2023年1月)の当サイトのページネーションはこんな感じです。最後に追記してあります。

「Page Top」に戻るボタンをカスタマイズしてみよう!


色だけ変えたい場合
/*パソコンの場合*/ #page-top a{ background-repeat: no-repeat; text-decoration: none; width: 55px; height: 55px; border-radius: 50%; text-align: center; line-height: 55px; background: rgba(200, 244, 235, 0.8); padding: 0; display: block; color: #fff; } /*スマホの場合*/ @media only screen and (max-width: 767px){ background-repeat: no-repeat; text-decoration: none; width: 42px; height: 42px; line-height: 41px; font-size: 0.85em; }
以上です!
意外と簡単ですよね^^
色を変えたい時は、「background」の数値を変えてください。
また、画像を入れたい時は、background」をコンテンツ全体の背景色と同じにし、画像urlを()で指定して下さい^^
※メディアにアップロードした画像のURLです
画像にしたい場合
/*パソコンの場合*/ #page-top a{ background-repeat: no-repeat; text-decoration: none; width: 80px; height: 80px; border-radius: 0%; text-align: center; line-height: 80px; background: url(https://magokoroplus.com/wp-content/uploads/top01.png); background-size: cover; padding: 0; display: block; color: rgba(255, 255, 255, 0); } /*スマホの場合*/ @media only screen and (max-width: 767px){ background-repeat: no-repeat; text-decoration: none; width: 42px; height: 42px; line-height: 41px; font-size: 0.85em; }
STORK19
/* ページトップに戻るボタン */ #page-top { position: fixed; right: 10px; bottom: 0; z-index: 10000; transform: translateY(55px); transition: transform 0.2s ease-out; } #page-top.pt-active { transform: translateY(-10px); } #page-top .pt-button { background-repeat: no-repeat; text-decoration: none; width: 60px; height: 60px; border-radius: 0%; text-align: center; line-height: 55px; background: url(https://magokoroplus.com/wp-content/uploads/banana-girl-top.png); background-size: cover; padding: 0; display: block; color: rgba(255, 255, 255, 0); } } #page-top .pt-button::before { font-family: var(--stk-font-awesome-free, "Font Awesome 5 Free"); content: "\f077"; font-weight: 900; }
ではでは、また!
「外観」⇒「カスタマイズ」⇒「追加css」
に貼り付けてください