ワードプレス「STINGER」のテーマの画面上部スクロール(TOP)を好きな画像に変更する方法

2 min 27 views
akira

akira

2006年にうつ病を発症し会社を退職。1年で回復し社会復帰できましたが、2018年1月に人生2回目のうつ病を発症し、その年の6月に会社を退職。現在Youtube、ブログアフィリエイト、バイトと貯金で生活しています。人生山あり谷あり。早く寛解したいです。
>>ブログで収入を得る方法は無料で公開しています

FOLLOW

STINGER
今回はワードプレス(wordpress)のテーマ「STINGER」の画面を上部にスクロールさせる「PAGE TOP」表示を画像に変更する方法です。
上記画像の、右下に表示されているやつです。

画像を用意する

STINGER
まずはTOPの部分に置き換える画像を用意して、ダッシュボードの「メディア」→「新規追加」から画像をアップロードします。

style.cssの編集

次に「外観」→「テーマの編集」から「style.css」を開き、下記の画像の部分を編集します。
STINGER
編集する部分は
「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種類用意すれば、マウスの乗っている時は違う画像に変化なんてこともできます。

最後に

このサイトはデフォルトのままですが、違うサイトでの変更後はこんな感じです。
103

カテゴリー:
ブログで月5万円収入を得る方法

アルバイトはしていますが、僕は現在定職にはついていません。ブログとYoutubeのアフィリエイト収益で生計をたてています。アフィリエイトでお金を得るのは決して楽なことではありませんが、調子の悪いときは休んで、調子の良い時だけ仕事をするという自分のペースで作業をすることも可能です。以下のリンク先ではブログで収益を得る方法を紹介しています。少しでも興味のある方は読んでみてください

関連記事

コメントを残す

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