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 件のコメント:
コメントを投稿



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

FF14初心者日記更新中



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

アドブロ推奨やめました♪ →管理人のTwitterアカウント
いつも多くの方々に訪問していただきありがとうございます( ◜◒◝ )更新の励みになってます((´^ω^)) 当ブログへのご意見やお問い合わせ・ネタ投稿などは《こちら》からご連絡いただけます。このブログでは古い記事が沢山あります。記事の投稿日時を参照しながらお読み下さい(。-人-。)

支援プラン
投げ銭
¥100円~
毎日更新を強制させる(10日)
¥500円
良いことをさせる
¥888円
関連記事
五十音順アニメ感想リスト

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

View

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

FINAL FANTASY XIV - 記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。 Copyright (C) 2010 - 2020 SQUARE ENIX CO., LTD. All Rights Reserved.