*

Stinger8カスタマイズ トップへ戻るボタンの背景色変更

公開日: : 最終更新日:2020/08/12 WordPress

 

Stinger8のカスタマイズをしていて、下の方にスクロールした時に「トップへ戻るボタン」がないのが不便だなあと思い、追加しようと思っていたら・・

よく見ると・・・なんと元々あったんですね!( ̄Д ̄;) あまりに薄くで見えませんでした。

画面右下に、ホコリのように白いなんかがあります。
それがトップに戻るボタンでした。

あまりに薄くて見えないくらいなので、このボタンをカスタマイズすることにしました。

スポンサーリンク

 

トップへ戻るボタンの背景色の変更

波空
白い埃のようなもの・・・これがデフォルトの「トップへ戻る」ボタンです。

 

猫にゃん
う~ん、言われてもよく見ないとわからないくらい薄い!
波空
まずは「トップへ戻る」ボタンの背景色を変更してみました。

ダッシュボードの「外観」⇒「テーマの編集」で子テーマのスタイルシートを開きます。

スタイルシート(style.css)の一番下に次のコードを追加します。


*– トップへ戻るボタン –*/
#page-top {
bottom: 20px;/*下側からの位置*/
right: 20px;/*右側からの位置*/
font-size: 50px;/*アイコンのサイズ*/
}

#page-top a {
padding: 5px;/*アイコン内の余白*/
width: 50px;/*横の幅*/
height: 50px;/*高さ*/
line-height: 45px;/*アイコンの配置*/
background: #f08080;/*ここに背景の色を入れてください */
}

記述したら「ファイルを更新」をクリックします。

図のようになりました。↓

 

 

背景の色は「background」で指定します。

図の赤枠のところに好きな色のコードを設定することで変えられます。

 

色のコードは色々なサイトで調べられますが
原色大辞典

配色の見本帳

などが解りやすいかもしれません。

 

トップに戻るボタンを丸くする

波空
デフォルトではアイコンは四角い枠に矢印があるんだけど・・。これを丸にしてみました。

猫にゃん
丸のがボタンぽいにゃ

スタイルシート(style.css)に次のコードを追加します。

波空
丸みの調整はコード内の%の部分を変更すると変わりますね。好みで設定します。


#page-top a{
border-radius:30px;/*角を丸くする*/
}
波空
こんな感じになりました(^^)

 

 

波空
アイコンの形を変更したり、オリジナル画像に変更したりもできるんだけど・・どうも、また他のPHPをコピーしなくちゃだめみたいなので・・・次にします

猫にゃん
ほんとにできるのかにゃ?じゃあ、それは次ということでなんか食べに行こうよ~

 


にほんブログ村

スポンサーリンク




スポンサーリンク




Message

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


コロナ禍でのアクリルパーテーションの手入れとゴミの出し方

コロナで自粛が続く中、飲食店や会社でもコロナ対策としてアクリルパー

コロナ禍のマスク生活 呼吸が楽なインナーカップとカラーマスク購入

まだまだコロナは収まりそうにないので、マスク生活は続きそうです。

手の痺れはビタミンB12不足が原因? コロナ禍で処方箋を貰った方法

腱鞘炎で痺れと力が入らないという症状から処方してもらっていた薬は、

節分て2月3日じゃなかった?!2021年の節分は2月2日!そのわけは

節分は2月3日!と、もう、ずっと思い込んでいたのに・・ なんと2

狭い部屋にも違和感のないミニ仏壇でお位牌に仮の家を!

前回の記事てお仏壇や位牌のことを調べて書きましたが、迷った末にやっ

→もっと見る

  • こんにちは。波空です

    好きなことを自由にやりたくて
    アフィリエイトにチャレンジ中
    好きなものは・・・アニメ・漫画・ゲーム・お絵描き・
    映画を観ること・パソコンで遊ぶこと
    やりたいことは・・いろいろあるけど、まずは資金と自由な時間を確保しないと進まない。日々どうしたらできるか考えながらリアル仕事に追われています。

  • BTOパソコン・パソコン関連商品がお買い得!パソコン工房のセール

  • 手軽に雑誌が読める!
    楽天マガジン

PAGE TOP ↑