トップに戻るボタンを画像に変更するカスタマイズは、Simplicityシリーズでは、簡単に画像に変更できます。パソコンで戻るボタンにマウスを置いたとき、別の画像を準備してonマウス・hoverすると画像が変わるカスタマイズをご紹介。
- onマウスで表示されるhover画像が大きいとき見切れる場合の対処
- 元の画像を消し、画像が左斜め上方向に移動するよう見せるなど
かなりメチャクチャ可愛くなるCSSコードも紹介するので、必要な個所をチェックしてくださいね!
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画像を置くか決めてください。
さいごに
コレをスマホで表示すると、一度クリックされた戻るボタンがhoverしぱなっしになります。どこかタップしない限り…。
jQueryを使っても上手くできなかったので、PCオンリー表示させました。でもPCの大画面だからこそ、このような遊びがあっても楽しいのではないでしょうか。
たまにはカスタマイズも楽しんでくださいねっ^^
それでは、かうたっくでした。
Comments