CSSでTOPに戻るボタン、hover画像のみPCで表示させる超かわいい、カスタマイズ【Simplicity2】

トップに戻るボタンを画像に変更するカスタマイズは、Simplicityシリーズでは、簡単に画像に変更できます。パソコンで戻るボタンにマウスを置いたとき、別の画像を準備してonマウス・hoverすると画像が変わるカスタマイズをご紹介。

onマウスで表示されるhover画像が大きいとき見切れる場合の対処
元の画像を消し、画像が左斜め上方向に移動するよう見せるなど

かなりメチャクチャ可愛くなるCSSコードも紹介するので、必要な個所をチェックしてくださいね！

Simplicity2の戻るボタンを画像に変更
1. Simplicityはトップに戻るボタンのCSSを、初期値に戻す手間が省ける！
マウスを置いたとき、画像を変更するCSS
1. hover画像が大きくて見切れてしまう場合の対処
2. hover画像を斜め上へ移動させたいとき
さいごに

Simplicity2の戻るボタンを画像に変更

はじめに親テーマのトップに戻るボタンのスタイルを初期値にもどし、表示を消します。元々画像を使用してる設定にしておけば、この作業は必要ありません。

Simplicity2で画像を設置するには、外観より『カスタマイズ』を選択。

『レイアウト（全体・リスト）』をクリックし下へスクロールしたら『トップへ戻るボタンに画像を指定』から、画像を選択して、保存して公開をクリックすればOK！

Simplicityはトップに戻るボタンのCSSを、初期値に戻す手間が省ける！

上記のようにテーマのカスタマイズより画像を設置することで、親テーマにかいてあるボタンのスタイルを初期値に戻さなくても設置できるのが、初心者的にもテーマ愛用者にも優しい設計なんですよねっ＾＾

CSSを初期値に戻す工程を簡単に言えばこんな感じ。Simplicity2のトップに戻るボタンのCSS。

#page-top a {
    color: #fff;
    padding: 7px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    text-align: center;
    background-color: #aaa;
    line-height: 100%;
    border-radius: 4px;
    font-size: 11px;
}
.fa-angle-double-up:before {
    content: "\f102"
}

上記がSimplicity2のトップに戻るボタン。下記はCSSでボタンを初期化。

このようにCSSで戻るボタンを消すコードは下記。

#page-top a {
    color: transparent;
    background-color: transparent;
}
#page-top .fa-angle-double-up:before {
    content: normal;
}

この3つのスタイルを初期値に戻せば消えます。その後トップに戻るボタンを画像に変更するカスタマイズするのですが、超簡単にボタンを画像に変更できるのがSimplicityの良いトコロです＾＾

LINKSimplicity2のダウンロード｜Simplicity

マウスを置いたとき、画像を変更するCSS

トップに戻るボタンにマウスを置いたとき、画像を変更すればTOPに戻るのね！とユーザーが分かるような画像を準備して置くのも面白いです。

※hover時の上行く？画像は斜めにして、ロボットの腕を上にあげたように画像加工ツール・スクリーンプレッソでサクッと加工しました。影をなくすと、きれいに仕上がります＞＜

スタイル変更はシンプルで下記の通りです。

/**戻るボタン1111px以上の表示**/
@media screen and (min-width: 1111px) {
    #page-top a:hover {
    	background: url(hover時：画像のURL) no-repeat;
    	opacity: 1;
    }
    #page-top a:hover img {
    	visibility: hidden;
    }
}

background：戻るボタンにhoverしたとき、背景を指定
opacity：hover時に画像を透明にしたいとき、1を小数点に変更。
visibility：元の画像の領域を残して非表示に。
- コレを入れないと元の画像が表示されて背景が見えない

hover画像が大きくて見切れてしまう場合の対処

hoverボタンが見切れた例

元の画像よりhover画像を大きく作成したら、元の領域分しか表示されずに見切れます。この時の対処として、6行目を追加してください。

/**戻るボタン1111px以上の表示**/
@media screen and (min-width: 1111px) {
	#page-top a:hover {
		background: url(hover時：画像のURL) no-repeat;
		opacity: 1;
		padding: 3em 5em;
	}
	#page-top a:hover img {
		visibility: hidden;
	}
}

6行目の値について

padding: 3em 5em;内側の余白を上下3文字・左右5文字分
1文字16pxとしたら、48px、80pxの余白
画像の大きさによって変更すれば、すべて表示されます。

要素の検証を使ってカスタマイズすれば、やりやすいですよ。

hover画像を斜め上へ移動させたいとき

上記画像は加工してますが、薄いTOPボタンが元の位置。楽しげな戻ります？画像がhoverした画像です。このようにhover画像をナナメ上に移動させるのもユーザーさん的、楽しい演出だと感じる場合。下記のCSSを参考にしてください。

#page-top a:hover {
	width: 100px;
	height: auto;
}

/* 画面幅が1111px以上の時 */
@media screen and (min-width:1111px) {
	#page-top a:hover {
		background: url(画像のURL) no-repeat;
		opacity: 1;
		padding: 3em 5em;
		margin: 12em 5em;
	}
	#page-top a:hover img {
		visibility: hidden;
	}
}

1行目～4行目はhover画像のサイズ変更したい場合の記載。
12行目の外側余白margin: 12em 5em;で高さ・右側余白

PC大画面限定にしてるので、好きな数値を入れてどこにhover画像を置くか決めてください。