ちょっとお問い合わせをいただいたので、記事にしちゃいます＾＾

特にどってことのない、サイト上のアクセントなんですが。

この上の画像の上にマウスを置いてみてください。

ちょこっと画像が動くでしょう？

他にもこのサイトのリンクの貼ってあるところ、

文字でも画像でもどこでもいいんですが、

ピョコって動きませんか？

これの方法なんですが、とても簡単なんです。

WPの管理画面の、「外観」⇛「テーマ編集」⇛「CSS編集」に

以下のソースを書き込んで「スタイルシートを保存」するだけで、OKです＾＾

（Jetpackを導入の場合。導入していない場合はスタイルシートの最後に書き加えてください。）

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

これは、リンクの上にカーソルを合わせると、

元の位置から2px分、ずらして表示するっていうことなんです。

なので、当然ですが2pxの値を大きくすると、動きも大きくなります。

え～と、他にも色々小難しく説明することもあるんですが、

小技なので、ちゃちゃっと短く切り上げます＾＾；

まあ、色々数値を変えたり、

top、bottom、left、right

と指定する位置を変えたりして、

遊んでみてくださいね

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

サトシオ

WEBデザインとかアフィリエイトとかやってます。 3度のメシよりWEBが好きです。気が付けばネット歴20年ｗ 月間に読むコミックスの量ならだれにも負けない自信があります！　←ジマンになってないｗｗｗ 兵庫県在住・人妻・主婦・2児（といってももうデカいよ）の母・8匹の猫飼い

最新記事 by サトシオ (全て見る)

• 丹波の黒大豆の枝豆をタジンで調理してみた -
• 【簡単手作り】　シャキシャキした食感が楽しい「れんこんハンバーグ」レシピ -
• ぶどうパンを焼いてみた【レシピ】 -
• お中元をそろそろ考えないと -
• 内職したことありますか？ -