マウスオーバー時にリンクを動かす方法（アメブロ）

☆*･カフェビバーチェ｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

木曜日とご予約、イベント開催の場合は曜日にかかわらず、11:00～15:00、カフェをオープンしています。

コンセプトは、「おいしく健康に！」
食育トレーナーのオーナーが
コーヒー、お茶をはじめ、スイーツ、ランチなど
身体に優しいメニューをご用意してお待ちしています。

少人数グループのイベント会場としてもご活用くださいね。

☆*･゜ﾟ･*:.｡..｡.:*･☆･*:.｡. .｡.:*･゜ﾟ･*☆*･゜ﾟ･*:.｡..｡.:*･☆

おはようございます。
清々しい朝を迎えました。

ブログってホームページのように
自分で自由にデザインできないの？
という方のために。。。

今日は簡単にできて効果的な
マウスオーバー時にブログのリンクを
少しだけ右下に動かす方法についてお伝えします。

ちょっとしたことですが、
リンクがわかりやすくなりますし、
画面に動きが出て読み手に変化を感じてもらえますよ。

こんな感じになります。
　　↓　↓　↓
カフェビバーチェはこちら...

やり方は、
アメブロでカスタマイズ可能なデザインで、
CSS編集画面から

/* マウスオーバーしたときのリンク */

.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{

color:#ff3366;

}

の個所を探します。
そして、次の3行をコピーして

color:#ff3366;　と

}　の間に追加するだけ。。。

position: relative;/* ←マウスオーバー時にリンクを動かす */

top: 2px;

left: 2px;

この場合、
もとのリンク位置から、上2px、左2px　動きます。

出来上がりは、

/* マウスオーバーしたときのリンク */

.skinAnchorHoverColor,.skinBaseAnchorHoverColor,.skinBlock a:focus,.skinBlock a:hover,a:focus,a:hover{

color:#ff3366;

position: relative;/* ←マウスオーバー時にリンクを動かす */

top: 2px;

left: 2px;

}
となります。

自分でも少しずつブログに変化をつけていけると、
記事もデザインも自分らしさを表現できますね。

試してみてくださいね。

今日も最後まで読んでいただいてありがとうございました。