今回はワードプレス（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はマウスが乗っている状態の時を示しますので、画像を２種類用意すれば、マウスの乗っている時は違う画像に変化なんてこともできます。
最後に
このサイトはデフォルトのままですが、違うサイトでの変更後はこんな感じです。
