を画像に乗せたときに浮き上がったり、画像が拡大縮小したり、画像に影ができたりするカスタムを見たことないですか？今回は『画像にカーソルをホバー【:hover】させることで画像が浮く感じ』のCSSを作っていきたいと思います。簡単なのでサイトに遊び心をプラスアルファするお手伝いができれば幸いです。
KTA
カスタムする前には必ずデータのバックアップを取っておくようにしましょうね！
Before
After
新人
画像浮いてます？？
KTA
右上の画像が若干笑
カスタマイズ手順
KTA
ホバー【:hover】に関しては2つの手順で変えることができます！
- セレクタを確認する
- 確認したセレクタに対してを【:hover】させた時の要素（CSS）を適用させる
セレクタを確認する
まずデベロッパーツールを起動させます。
Windowsの場合
F12orCtrl+Shift+i
Macの場合
Command+Option+i
KTA
デベロッパーツールが開くと以下のような画面になります
以下の右側に【img】というセレクタが表示されています。
この【img】セレクタに対してCSSを効かせてていくと画像上にカーソルをホバー【:hover】した際に画像に効果が出ます！
※画像は1ページのみですが他のページの【img】要素を持つセレクタにも効きます。
CSSを効かせる
以下の通り入力してみましょう！
ホバー【:hover】前の【img】に対して
CSS
img{
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
padding: 0.6em 2em;
margin: 0 0 1em;
cursor: pointer;
transition: all 0.3s ease 0s;
}【img】上にカーソルをホバー【:hover】した【img】に対して
CSS
img:hover {
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
transform: translateY(-0.1875em);
}カスタマイズ用のCSSコードを入力したらまずは『Cocoon Child: スタイルシート (style.css)』でファイルの更新ボタンで入力情報の保存をします。
カスタマイズの確認
KTA
【img】に対してホバー【:hover】前後でCSSが効いているか確認してみましょう
ブラウザ別スーパーリロード方法
KTA
ブラウザによってスーパーリロードとキャッシュクリアの方法が異なりますので簡単にまとめたので参考にしてみてください！
スーパーリロードとは?
ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！
【Google Chrome】
【Microsoft Edge】
【Microsoft Edge】
- 『Ctrl』+『F5』
- 『Shift』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Ctrl』+『』
- 『Shift』+『』
【Safari】
- 『Shift』+『』
- 『Ctrl』+『R』
【FireFox】
- 『Ctrl』+『F5』
- 『Ctrl』+『Shift』+『R』
- 『Shift』+『』
ブラウザ別キャッシュクリアの方法
キャッシュクリアとは?
ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です
【Google Chrome】
- ブラウザ右上の設定メニュー（・が縦に３つ並んでいるボタン）をクリックして「設定」を選ぶ
- ページ下の方にある「詳細設定」をクリック
- 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「データ消去」をクリックする
【Microsoft Edge】
- 画面右下の・が３つ並んだアイコンをクリック
- 「設定」をクリック
- 「プライバシー、検索、サービス」をクリック
- 「クリアするデータの選択」を押す
- 「キャッシュされた画像とファイル」にチェックを入れる
- 「今すぐクリア」を押す
さいごに
KTA
Cocoon機能＋CSSだけで背景色カスタムできるので非常に簡単ですが、ページの雰囲気をガラッと変えられる要素なのでぜひ参考にしていただけると嬉しいです。
注意
カスタムは自己責任でやりましょうね！
コメント