• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ

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

    コメントを投稿

    ANTENA RSS

    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    PAGE TOP