今回はワードプレス(wordpress)のテーマ「STINGER」の画面を上部にスクロールさせる「PAGE TOP」表示を画像に変更する方法です。
上記画像の、右下に表示されているやつです。
画像を用意する
まずはTOPの部分に置き換える画像を用意して、ダッシュボードの「メディア」→「新規追加」から画像をアップロードします。
style.cssの編集
次に「外観」→「テーマの編集」から「style.css」を開き、下記の画像の部分を編集します。
編集する部分は
「background: #665e53;」の部分と「font-size: 20px;」の部分、その他表示させたい画像の大きさに合わせ「width: px;」部分の変更「height :px;」の追加です。
まずbackgroundの部分です。デフォルトだと背景色の指定がされていますので、背景を画像にするコードに変更します。
「background-image: url("http://XXXXXXXXXXXXXXXXXXXXXXXXX070276.png");」
上記のコードに置き換えます。こちらは背景を画像にするコードです。
※url("ここの部分に画像の保存さきのURLを記載します");
※画像のURL先を調べるには、ダッシュボードの「メディア」→「ライブラリ」から使用したい画像をクリックすれば画像のURLがわかります。
あとはfont-sizeを0pxに変更して、画像の大きさに合わせ「width: px;」部分の変更「height :px;」を指定るればOKです。
完成コードはこちら
#page-top { position: fixed; bottom: 40px; right: 20px; font-size: 0px; } #page-top a { background-image: url("http://XXXXXXXXXXXXXXXXXXX.png"); background-repeat: no-repeat; text-decoration: none; color: #fff; height :200px; width: 200px; padding: 10px 5px; text-align: center; display: block; border-radius: 5px; /* CSS3 */ -moz-border-radius: 5px; /* Firefox */ -webkit-border-radius: 5px;/* Safari,Chrome */ } #page-top a:hover { text-decoration: none; background-image: url("http://XXXXXXXXXXXXXXXXXXXXXXXX.png"); background-repeat: no-repeat; color: #665e53; }
あと「background-repeat: no-repeat;」を記載します。記載しないと画像が連続で何個も表示される場合があります。
それと「#page-top a」と「#page-top a:hover 」というのがありますがa:hoverはマウスが乗っている状態の時を示しますので、画像を2種類用意すれば、マウスの乗っている時は違う画像に変化なんてこともできます。
最後に
このサイトはデフォルトのままですが、違うサイトでの変更後はこんな感じです。