カスタマイズ＜マウスが乗ると画像が飛出る＞

この記事は現在ランク1位の

「むちゃくちゃモテたい！」を参考にしているので

確認のためにここクリック



さて、今日はここのブログを
若干動きのあるページにしたかったので、

現在大学生ブログランキング１位である

「むちゃくちゃモテたい！」

を参考にしながら作ってみました

「むちゃくちゃモテたい！」
を見ていて、

「リンクの上にマウスが来ると
　clickって画像がでてくる」

と、何とかしてこれを導入すべく、
とりあえずクリックの画像を作った…






・・・( ﾟДﾟ)ﾏﾝﾄﾞｸｻｯ







とは思いつつも、同じのを使うのは
プライドが許さなかったので、
ホームページビルダーのウェブアートデザイナー
を駆使しながら、何とか作ってみた





・・・まあまあの出来じゃないですか？




そして今度は、画像が飛び出てくるようにするため、
独学でお勉強・・・



いそいそとgoogleで検索してみることに・・・



おっ、

見つけた↓


ガンガン動く！無料ブログ



でもサンプルヴューと、
サンプルがどれが一致しているかわからなかったので、
しばし探すことに…




探すこと数分、
livedoorサンプルの50番にて発見




seesaaではどこに埋め込むのかわからなかったので、
とりあえずサイドバーに自由形式を一つ増やした！
でも増やした部分を表示したくなかったので、
タイトルをコメント化して消してみた



結果見事に消える



そして中身に↓を記述

<!-- マウスが乗ると画像がポップアップ！ -->
<script type="text/javascript">
// 画像のURL
var mover_url = "ここに画像のURL";
</script>
<script type="text/javascript" src="ここにJavascript">
</script>

う〜ん、あっさりできてしまった





あっ、ちなみに僕がBlogについて勉強する時は、


常に独学です！


他のページを参考にしつつ、
いろいろ試しながら学んで行きます


まあ、ぶっちゃけ、







・・・( ﾟДﾟ)ﾏﾝﾄﾞｸｻｯ








知識のある人にでも質問すればよいものを、

僕は自力でやってしまいます(-＿-;

おかげで疲れます




そして、マウスが重なったときに
画像が飛び出るだけでは動きがすくないので、
文字を少しブラせられるようにしてみた。




先ほど作ったコンテンツに、


↓を加えただけである

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

あっけなかった（￣▽￣;

今度は他の装飾でもしてみよう☆


人気Blogﾗﾝｷﾝｸﾞ参加 クリックおねがいします。

学生ﾌﾞﾛｸﾞﾗﾝｷﾝｸﾞ こちらもクリックお願いします。