気になりだしたら止まらないカスタマイズ。
わかります。わかりますよ、その気持ち。
スワローって、デザインがものすごくカッコいいのに、ページトップに戻るボタンがちょーっとダサいんですよね。
ダサいっていうかグレーだから汎用的というか。
色だけでも変えたいなぁとずっと思っていました。
なので、そのカスタマイズコードをご紹介します。
WordPressテーマ「ストーク」でも同様のコードで表示されました^^
※なお、カスタマイズは自己責任でお願いします。
「Page Top」に戻るボタンをカスタマイズしてみよう！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*パソコンの場合*/ #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です
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*パソコンの場合*/ #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; } |
ではでは、また！
「外観」⇒「カスタマイズ」⇒「追加css」
に貼り付けてください