Simplicityユーザーさんに
SimplicityからCocoonに乗り換えました。機能が充実してますよ^^

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

スポンサーリンク

TOPへ戻るボタン、Onマウスで画像変更・CSSでカスタマイズ

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

トップへ戻るボタンのhover画像、CSSカスタマイズ

paddingを入れて調整した例

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

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

スポンサーリンク
スポンサーリンク

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

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

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トップへ戻るボタン

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

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

トップへ戻るボタンのhover画像、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の余白
  • 画像の大きさによって変更すれば、すべて表示されます。

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

paddingを入れて調整した例

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

TOPへ戻るボタン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画像を置くか決めてください。

さいごに

コレをスマホで表示すると、一度クリックされた戻るボタンがhoverしぱなっしになります。どこかタップしない限り…。

jQueryを使っても上手くできなかったので、PCオンリー表示させました。でもPCの大画面だからこそ、このような遊びがあっても楽しいのではないでしょうか。

たまにはカスタマイズも楽しんでくださいねっ^^

それでは、かうたっくでした。

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る