WordPressテーマ『スワロー』のページトップに戻るアイコンの色を変えるcssコードを公開！（STORK19もあり）

気になりだしたら止まらないカスタマイズ。
わかります。わかりますよ、その気持ち。

スワローって、デザインがものすごくカッコいいのに、ページトップに戻るボタンがちょーっとダサいんですよね。
ダサいっていうかグレーだから汎用的というか。
色だけでも変えたいなぁとずっと思っていました。

なので、そのカスタマイズコードをご紹介します。

※なお、カスタマイズは自己責任でお願いします。

現在（2023年1月）の当サイトのページネーションはこんな感じです。最後に追記してあります。

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

以下のコードを
「外観」⇒「カスタマイズ」⇒「追加css」
に貼り付けてください

色だけ変えたい場合

/*パソコンの場合*/
#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;
}

ではでは、また！