アフィリエイトで経済的自立を目指す

シリウス画像にカーソルを乗せて動かす方法

 

2つのメールアイコンががありますね。

 

それぞれのアイコンに、カーソルをのせてみてください。

 

 

mail

mail

 

左と右ののアイコンがわかりましたか?

 

右のアイコンにカーソルを乗せると、ピコッと動きましたよね。

 

この仕掛けの仕組みを説明しましょう。

 

 

マウスオーバーで画像を動かす仕組み

 

こちらは、シリウスでの設定方法となります。

 

設定は2か所。

 

  • スタイルシート(CSS)編集画面
  • 記事作成画面

 

 

設定その1

 

スタイルシート(CSS)への追加

 

img:hover img{
position : relative;
top : 3pt;
left : 3pt;
}

 

上記の記述をスタイルシート編集画面の最下部に追加します。

 

 

シリウスのスタイルシート編集画面の表示方法

 

sirius css

 

 

左上の「編集」 ⇒ 右上の「スタイルシート」をクリックすると、下の図のような画面が表示されます。

 

 

sirius css 2

 

 

記事作成画面

 

<img class="movesample" src="画像のURL" />

 

記事の任意の場所へ、上記記述を入れます。

 

 

設定はこれだけです。簡単ですね。

 

 

 

しかし・・・・

 

 

設定その2

 

実は、このブログはこの設定では画像が動いてくれませんでした。

 

何がいけないんだろう・・・

 

かなり調べまくった結果、いけない所はわかりませんでしたが、記述内容を変更することで解決できた内容がこれです。

 

 

スタイルシート(CSS)への追加

 

 

/* マウスを乗せると画像が動く
───────────────────────── */
div.img-move a:hover {
position: relative;
top: 3px;
left: 3px;
}

 

 

記事作成画面

 

 

<div class="img-move">
<a href="リンクのURL"target="_blank" ><img src="画像のURL" alt="mail"/>
</a></div></div>

 

 

上記の記述を、スタイルシートの最下部と、任意の記事編集へ追加します。

 

これで画像にカーソルをのせると、画像が「ピコッ」と動くようになりました。

 

 

 

ここでまた、しかし・・・

 

 

設定その3

 

本来なら、画像を動かす設定はその2で終了です。

 

しかし私は、画像を動かすのと同時に、画像を真ん中に表示させたかったのですが、画像が左寄りになってしまったのです。

 

何とかして画像を真ん中(センター)に持っていきたい!!

 

そこで再び検索し、たどり着いた結果がこちらです。

 

 

スタイルシート(CSS)への追加

 

 

/* 画像を中央 メインメニュー
───────────────────────── */
.center{
width: 100px;
margin: 0 auto;
}

 

 

/* マウスを乗せると画像が動く
───────────────────────── */
div.img-move a:hover {
position: relative;
top: 3px;
left: 3px;
}

 

 

画像を中央 メインメニューの記述を追加します。

 

 

記事作成画面

 

<div class="center">  ←これを追加
<div class="img-move">
<a href="リンクのURL"target="_blank" ><img src="画像のURL" alt="mail"/>
</a></div></div>

 

 

上記赤文字の記述を追加します。

 

 

まとめ

 

「シリウスで画像にカーソルをのせると画像が動かす方法」と検索すると、真っ先に出てきた結果が「設定その1」の内容です。

 

大体の方が「設定その1」で解決できるのでしょう。

 

私の場合、シリウスとパソコンの相性が悪いのか、「設定その1」では解決できませんでした。

 

もしかしたら、私と同じ状態で悩んでいる方がいらっしゃるのではないでしょうか。

 

そんな方は、「設定その2」をお試しになってください。

 

 

 

 


アフィリエイトランキング  <<<ポチッと押していただけると嬉しいです♪

 


ホーム RSS購読 サイトマップ