未分類

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

この記事の最終更新日は2014年9月21日ですので、古い情報を掲載している可能性があります。その点ご理解のうえ読んでいただけると助かります。


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はマウスが乗っている状態の時を示しますので、画像を２種類用意すれば、マウスの乗っている時は違う画像に変化なんてこともできます。

最後に

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

-未分類