TELOG. Powered by Blogger.
🔖アニメ感想リスト |🔖ゲーム記事リスト

2014年3月19日水曜日


旬な深夜アニメ感想
ゲーム攻略日記
ユーチューバーについて思うことを 綴った趣味ブログ

【HTML/CSS/Javascript】ブログをカスタマイズしてる時が一番楽しい( ・`ω・´)


背景画像ランダム表示と、メインメニューのhover改良と、javascriptのスライドショーに設定したヘッダ画像にリンクをつけてみた!(中の人は自己満でドヤ顔してます)
URLver.jpg



いやぁ・・・嬉しいねwwww

javascriptで作ったスライドショーの画像リンクを付けたいときどうすればいいのかと、javascriptにdiv要素で囲ってCSSで指定してみたり、javascriptから直接スタイルをいじってみたりしてみたり…。
実はこのjavascriptスライドショー、ヘッダ画像HTMLの真上に乗っけてるだけなんですよw
だからHTMLから指定してるCSSの効果を得られるもんだと勘違いしてましたw
画像クリックしてもTOPに戻ってくれないからメニューリンクに大きく『TOP』と表示しちゃってますけどねw
手順は至ってシンプルすぎて自分のアホらしさに落胆しかけました…(´・ω・`)
スライドショーは元々画像で埋め込んでるんだから画像にa要素を付け加えればいいだけの話だったんですよねw
スライドショーをクリックすることによってTOPに戻ってくれるようにするためには…(一応往復で学習するために…ドヤッ)
元々スライドショーを囲ってるdiv要素のidがcoverで囲ってあったので
div#cover?a:hover?{
? ??position:relative;top:3px;left:3px;
}?


を設置してヘッダ画像にマウスをかざした時にちょっとずれるように、マウスポインタがどこにあるのかをわかりやすくするように設定してみた事と、肝心な画像にリンクはする方法はimg要素の前後にa要素でかこってみただけですが、なんとか反映できちゃいました(´・ω・`)

低すぺっく-Blog TOP


元々画像にリンクを付ける方法は知ってたのに、試し忘れてたんですよ(´・ω・`)
結構時間の無駄遣いしちゃって少し虚しいです…。
スライドショーで画像が移り変わってる時にかざすとhoverが上手く動いてくれない時がありますけどまぁ気にしちゃいけない( ・`ω・´)



今度は背景画像をランダムで表示するやり方ですが、これも中々クセモノでww
時間があるときに色んなサイト渡り歩いてCSSとHTMLの使い方を学びましたよ…!
まだ2枚しか背景画像は集めてませんが、上手くうつってくれるものを探してたりもします(´;ェ;`)
CSSはもう直接bodyから
body {
? ? background-repeat:no-repeat;
? ? background-attachment:fixed;
? ? background-size:100% auto;
}

をつけて何度もリピートしないよう、背景画像の固定、サイズをぎりぎりまで大きく…!することに注意しながらCSS設定し、肝心のjavascriptは色々なサイト見て回って自分でも使えそうなヤーツをお借りして解らない仕組みを前回買ってきた本を見て理解しながら設置してみましたよ・・・!←

0 件のコメント:
コメントを投稿



※コメント反映までに時間がかかる場合があります。



この記事を書いたりまとめた人
ʑ̸̀੭ੇㄝ゛੭ੇ

アドブロ推奨してます♪ アドブロ推奨してる管理人のTwitterアカウント
いつも多くの方々に訪問していただきありがとうございます( ◜◒◝ )更新の励みになってます((´^ω^)) 当サイトへのご意見やお問い合わせ・ネタ投稿などは《こちら》からご連絡いただけます。

関連記事
五十音順アニメ感想リスト

うずらインフォ 引用リンク

ARCHIVE

日本のネットスラングは正しく翻訳されません。:(


黒い砂漠:©Pearl Abyss Corp. All Rights Reserved. ©GameOn Co., Ltd. All Rights Reserved.