ピグでふらふらしていたところ、
知らない人に「そのブログのどうやって改造すんの？」と聞かれたので…
カスタマイズ用のタグをご紹介します。
PCからこのブログを見た時に、
左上や右下にランプの画像がありませんか？
マウスを合わせると画像が変わったり、クリックすると別サイトへ移動したり…
何かと一番目立つ、
「マウスを乗せたら画像が変わる固定リンク」のやり方です～
とりあえず“左上に表示させる”ものをご紹介します…
そのほかの位置に表示させたい場合は要素の説明を読んで下さい(*μ_μ)
下記タグを使います。
<div style="position:fixed;top:0px;left:0px;z-index:100;">
<a href="リンク先のURL" target="_blank">
<img src="カーソルを乗せる前の画像URL"
onMouseOver="this.src='マウスが乗っているときの画像URL'"
onMouseOut="this.src='マウスを離した時の画像URL'" border="0">
</a>
</a>
</div>
です。
基本的な用語を知っていると仮定した上で
簡単に要素？の説明をすると、
・position:fixed;top:0px;left:0px;z-index:100
⇒画像の表示位置を設定します
⇒fixed;を入れると固定されるようになります
→スクロールしてもついてきます。いらない場合はこれを消してください
⇒topはブログの上から leftはブログの左からの位置のことです
→bottomに書き換えると下から rightに書き換えると右からの位置になります
⇒z-index:100にすると、画像が一番手前に表示されるようになります（？）
・リンク先のURL
⇒画像をクリックしたときに移動するページのURLを入れてください
・target="_blank"
⇒これがあると、移動先のページが別ウィンドウまたは新しいタブで表示されます
⇒不要な場合はこれを消してください
・カーソルを乗せる前の画像URL
⇒マウスカーソルを乗せる前に表示させる画像のURLを入れてください
・ カーソルが乗っているときの画像URL
⇒マウスカーソルを乗せた時に表示させる画像のURLを入れてください
・
カーソルを離した時の画像URL
⇒カーソルを乗せる前の画像URLと同じものでいいと思います
必要な部分を書き換えたら、「改行を消して」フリープラグインへ貼りつけてください。
例
<div style="position:fixed;top:0px;left:0px;z-index:100;"><a href="リンク先のURL" target="_blank"><img src="カーソルを乗せる前の画像URL"onMouseOver="this.src='マウスが乗っているときの画像URL'" onMouseOut="this.src='マウスを離した時の画像URL'" border="0"></a></a></div>
改行があると表示されないと思うので注意してください。
＊注意＊
・「やったけどできない」「用語がわからない」等の質問は受けません…
・画像は必ず
“自分が描いたイラスト”
“自分の撮った写真”
“使用許可の下りている画像”
のいずれかに当てはまるものを使ってください。
製作者に無許可で使用することは著作権の侵害となり、法律に違反します。
権利者からの通報があった場合、
予告なしに“該当記事の削除”または“ブログの削除”が行われます。
注意してください。
・画像が大きすぎると邪魔になるので気を付けましょう…
・拡張子が「.png」となっているものを使うと、背景が透過されますよ(*´ｪ｀*)
著作権、Amebaの利用規約を守ってよいカスタムライフを…