micata

micata:マウスオーバー時にリンク/画像を動かす方法

mikata-logo

こんにちは、ぶどうサワーです。
サイトの閲覧ありがとうございます。

今回の記事では、先日公開された無料のWordPressテーマ:micata(ミカタ)を使ったカスタマイズを紹介したいと思います。

ウェブサイトの中には、画像やリンクがマウスオーバーしたときに、ほんの少し動くことありますよね。
実はあれCSSでとても簡単にできるんです。

でも簡単なわりに遊び心が出るというかサイトの雰囲気が明るくなるので、結構オススメなカスタマイズだったりします。

カスタマイズ後

↓ マウスオーバーすると文字が上から2px、左から2px移動

micata-mouse-over-position-relative-after-2

↓ マウスオーバーすると画像が上から2px、左から2px移動

micata-mouse-over-position-relative-after-1

[ad]

1. CSSファイルを編集

micataでは子テーマが配布されているので、子テーマを使ってカスタマイズしていきます。

以下のコードを子テーマの style.css に追加すると、、、

a:hover {
    position: relative;
    top: 2px;
    left: 2px;
}

画像やテキストが、マウスオーバー時にほんの少し動くようになります。

↓ リンク(テキスト)をマウスオーバー

micata-mouse-over-position-relative-after-2

↓ リンク付き画像をマウスオーバー

micata-mouse-over-position-relative-after-1

2. 動かす距離を変更するには

先ほどのコードは top プロパティで上からの距離を、left プロパティで右からの距離を指定しています。

上(左)からと書くと分かりづらいんですが、上から押し出して下へ移動するイメージです。

なので、top: 2px は下へ 2px 移動するという意味になります。

そして top や left はマイナスの距離を指定することも出来るので、 top: -2px とすると、上へ -2px 押し出す(上に2px移動)ことになります。

このようにして動かす距離を変更できるので、
例えば上から-5px、下から-5px移動する場合、CSSコードは以下のようになります。

a:hover {
    position: relative;
    top: -5px;
    left: -5px;
}

他の距離についても、これと同じ要領で出来ます。
良かったらお試し下さい。

今回のカスタマイズは以上です。
最後まで閲覧ありがとうございました。