スポンサーリンク

 

 

賢威7のデフォルト状態で、画像やリンク文字が動きません。

 

他のブログを見てみると画像や文字リンクにマウスを乗せたときに、
「ピコッ!」と動くデザインをみて、
自分のブログにも取り入れたくカスタマイズしてみました。

 

スポンサーリンク

カスタマイズは超簡単です

 

画像やリンク文字にマウスを当てた時に動くように設定するのって、
プログラムをいじったり、書き換えないといけないんじゃないかと思うかもしれませんが、

全くそんなことが無く、超簡単に設定できるんです。

 

それは、base.cssに一行を追加するだけで設定することができます。

 

それでは早速、作業をしていきましょう!

 

まずは、

 

ワードプレスの管理画面から「外観→テーマの編集→base.css」

テーマの編集をクリックして開きます。

 

賢威7テーマ編集

 

①「テーマの編集」に移るので、②の「base.css」をクリック。

 

 

「base.css」の一番下に以下のコードを張り付けます。

 

賢威7base.css

 

a:hover { top:3px; position:relative; }

 

これだけで画像やリンク文字が上下にリンクに動くようになります。

 

大きく動かしたい場合はpxの値を変えればOK。

 

  • 右下に動かしたい場合

 

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

 

  • 左下に動かしたい場合

 

a:hover { top:3px; right:2px; position:relative; }

 

両方ともに、数字を変えれば動きの幅が変わりますので
好みのスタイルに設定してみてください。

 

スポンサーリンク

まとめ

 

マウスオーバー時のリンク画像や文字を動くようにする方法の
設定は簡単にできます。

 

2・3箇所にコードを貼り付ける作業がありますので、
必ずバックアップは取るようにしましょう。

 

 

スポンサーリンク