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

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

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

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

WordPressテーマ「ストーク」でも同様のコードで表示されました^^

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

現在(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;
}

ではでは、また!

スポンサーリンク
注意
特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です