マウスオーバーで画像を切り替える？
またまたわからない用語が出てきました（笑）
マウスカーソルを合わせると画像が切り替わるってことです。
下の画像にマウスのカーソルを合わせてみてください。
クリックすると五反田すんこオリジナルグッズ販売ポータルページにいきます。
パソコンの人のみです。スマホで見ている人はごめんなさい。
スマホの人は単なるリンクになってたり、挙動がおかしいだけなのでタップしないでね。
この下以外はスマホでタップすると画像が切り替わる様に修正しました。
ちょっと挙動がおかしいけど、該当画像以外をタップすると元に戻るよ。
今回はこれをやってみます。
この画像にリンクを貼ることもできますよ。
マウスオーバーで画像を左からスライドさせるコード
<style> .sunsun1 { position: relative; width: 300px; height: 300px; display: block; overflow: hidden; cursor: pointer; } .sunsun1 img { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; display: block; -webkit-transition: .4s ease-in-out; transition: .4s ease-in-out; } .sunsun1 img:nth-of-type(2) { left: -100%; } .sunsun1:hover img:nth-of-type(2) { left: 50%; } </style> <div class="sunsun1"> <a href="リンク先のURL"> <img src="表示させておく画像のURL" alt="画像の説明" /> <img src="マウスオーバー時に表示する画像のURL" alt="画像の説明" /> </a> </div>
このコードを記事の好きなところに貼り付けるだけです。
<style>～</style>の中の部分ははてなブログのデザイン→スパナマーク→デザインCSSに
貼り付けることでブログ全体に適用することができます。
記事ごとに設定を変えたい場合はこのまま記事に貼り付ければ大丈夫。
逆に言えば、CSSを記事ごとに使いたい場合は使いたいCSSを
<style>～</style>で囲めば記事内でも使えるってことです。
コードの補足
sunsun1は私が適当につけただけですべて同じにすれば任意の英数字で大丈夫です。
5か所あるので気を付けてください。
また1つのパターンにつき変えるようにします。
この記事にあるサンプルは1つごとにsunsun1、sunsun2と変えています。
表示する画像のサイズを変更するには
width: 300px;
height: 300px;で画像のサイズを指定します。
表示する画像より大きい値を入力すれば表示はされますが
ここで指定したサイズに拡大されるので画像がぼやけます。
表示したい画像の値を入力しましょう。
オリジナル画像は300x300ですが、
width: 450px;
height: 450px;にしてみました。
だいぶぼやけますね…
画像を表示する位置を変更するには
画像を右に寄せたい場合はmargin-left: auto;
中央に寄せたい場合はmargin: 0 auto;を
width: 300px;の後に挿入します。
height: 300px;
右寄せなのにleftなの？と思うかもしれませんが、
これは左側を自動で計算して右に合わせるってことなので
表示位置とは逆になります。
左に寄せたい場合はmargin-right: auto;ですが
省略できるので左寄せの場合はなしです。
margin-left: auto;で右寄せ。
margin: 0 auto;で中央寄せ。
画像の四隅に丸みをつけるには
border-radius: 10px;
を追加することで画像の四隅に丸みをつけることができます。
数字を変えることによって丸みの深さを変更できます。
0で丸みなし、150で丸になります。
150以上に設定はできますが設定しても変わらなかったです。
0の場合は省略できます。
背景が白でよくわからないので色を付けて
わかりやすいようにborder-radius: 150px;でやってみました。
丸になってるのがわかるかな？
こんな感じで四隅に丸みをつけることができます。
表示する画像のアドレス取得方法
画像のアドレスを取得する方法はたくさんありますが、
はてなブログを使っている人はこちらの記事で説明しています。
www.atelier-sunko.info
<a href="リンク先のURL">の部分は特にリンクを貼る必要のない場合、省略できます。
リンク先のURLを#にしても大丈夫ですが、スマホでアクセスしたときに挙動がおかしくなります。
リンクを貼った場合、スマホでアクセスすると単なる画像リンクになります…
画像の切り替えを応用してみた
元々表示されている画像にカーソルを合わせると、次の画像が表示されるなら、
これを応用していろいろできそうです。
カーソルを合わせるとキャラがぴょこっと飛び出してくる
表示されている画像を無地にして、
表示されている画像の背景と同色の背景にした画像をマウスオーバー時に
切り替えるようにするとキャラがぴょこっと飛び出してくるように見えます。
（わかりやすいように背景の色を変えています。）
カーソルを合わせるとキャラが逃げ出す
表示されている画像とカーソルを合わせると表示される画像を同じにして、
カーソルを合わせると表示される方の画像の位置を移動先にすることで
逃げてるように見えます。
カーソルを合わせると違うイラストが加わる
カーソルを合わせるとキャラがぴょこっと飛び出してくるの応用で、
カーソルを合わせると表示される画像を透過PNGにすることで元々の画像と重なり
違うイラストに見せることができます。
カーソルを合わせると文字が表示される
カーソルを合わせるとイラストが完成するの文字バージョン。
カーソルを合わせると画像の説明が表示されるみたいな感じに。
左から以外の画像の切り替え方法
左から画像を切り替える方法をやってみましたが、応用の最後の二つの様に
これ以外の切り替え方法もあります。
.sunsun6 img:nth-of-type(2) {
left: -100%;
}
.sunsun6:hover img:nth-of-type(2) {
left: 50%;
}
の部分、leftの％を正の値、負の値にしたりleftをtopに変えて％の値を調整することで
上下左右から現れるようにすることができます。
今回参考にさせていただいたエンデ・バタロー様のホバーした時にCSSだけで出来る様々な画像切り替え方法にいろんな方法が紹介されているので参考にしてみてください。
