リンク画像テキストがカーソルを置くと動く裏ワザ

こんにちは、明人です。


私のブログにお越しいただき、
ありがとうございます。


今回は、ちょっとお遊び的なカスタマイズです。


画像にカーソルを置くと画像が動く設定です。


bloglogo05


画像の上にカーソルを置くと少し移動しますよね。
あれって、どうやってするんだろうって、
思ったことありませんか?


私は、いろんな方のブログを見てて、
動いたり、色が変わったり、
様々な変化があるのが面白くて、
見つけたら、いつもどうやってやるんだろう?
って、とても興味を持ちます。


そこで、今回は、
「画像にカーソルを置くと少し移動する」
これをお伝えしたいと思います。


画像やリンクを動かすためには、
このブログでもよく出てくる、
CSSを追加します。


実は、CSSという言葉を使うのは初めてです。


CSS01


だって、CSSって見たり聞いたら、
拒否反応起こしません?


私は、何それ?から始まるから、
時間があっという間になくなります。


まぁ、拒否反応はないですけどね。


だから、今まで登場しませんでした。


ここでも、聞き流してくださいね。


2通りの方法があります。


・ブログ全体を一気に設定
・ブログの各コンテンツごとに設定



とにかく、まずは、
「外観→テーマ編集」をクリック。


右側の下の方の「スタイル」にある、
「design.css」をクリック。


まずは、バックアップを取りましょう。


そして、一番下までスクロールしましょう。


そしたら、下記の表示があります。


/*————————————————————
template created by web-rider
————————————————————-*/


その上に、下記のソースを追加しましょう。


実際は、どこでも大丈夫ですが、
一番下がわかりやすいと思います。


/*画像をマウスON時に動かす*/

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



「ファイルを更新」をクリック。


以上で、完了です。
これが、ブログ全体を一気に設定する方法です。


各コンテンツごとにする場合は、
ソースが違うので、
分けてやりたい方は、
下記のソースから、チョイスしてみてくださいね。


/*?ヘッダー?*/
#header a:hover{ position:relative;top:2px ;left:2px; }


/*?コンテンツ?*/
#main-contents a:hover{ position:relative;top:2px ;left:2px; }

/*?グローバルメニュー?*/
#global-menu a:hover{ position:relative;top:2px ;left:2px; }

/*?パンくず?*/
#breadcrumbs a:hover{ position:relative;top:2px ;left:2px; }

/*?サイドバー2カラムの場合?*/
#sidebar a:hover{ position:relative;top:2px ;left:2px; }

/*?サイドバー3カラム時の左側?*/
#sidebar1 a:hover{ position:relative;top:2px ;left:2px; }

/*?サイドバー3カラム時の右側?*/
#sidebar2 a:hover{ position:relative;top:2px ;left:2px; }

/*?サブコンテンツ?*/
#sub-contents a:hover{ position:relative;top:2px ;left:2px; }

/*?フッター?*/
#footer a:hover{ position:relative;top:2px ;left:2px; }


この中から選んで、コピー&ペーストして、
自分オリジナルのブログにしてみてください。


分からなくなったら、いつでもご相談ください。
解決できるまで、お手伝いさせていただきます。


よろしくお願いします。


では、今日はこの辺で・・・


最後までお付き合いいただき、
ありがとうございます。

コメントを残す

サブコンテンツ

プロフィール

お気軽にご質問ください!



わからないことやお困りのことがあれば、お気軽にご相談ください。

このページの先頭へ