FC2ブログ

そうよ!ヤツの名はメガ166!

続続・a:hover  

#header_body a {
display: block;
width: ~px; /* 画像1枚分の横幅 */
height: ~px; /* 画像1枚分の高さ */
margin:10px 5px 10px;
background-image: url("http://~"); /* 画像ファイル名 */
}
#header_body a:hover {
background-position: top right; /* 背景画像の表示開始基準を右上に変更 */
}

上記のものをスタイルシートにいれhtmlをいじったら解決できましたwヘタにいじってなければこれでIEやスレイプニルでも動くはず・・・。前のはaが使われてなかったためIEやスレイプニルのエンジンに対応してなかったのです;;上記のものはaを入れたので動くはずです。コレを入れて表示がおかしくなったりしたらhtmlのほうのheaderがおかしいのでしょう。いらない箇所を消せば正しい表示になるはずです。
ブログランキング・にほんブログ村へ
スポンサーサイト



スタイルシート | TB(0) | CM(0)

続・a:hover 

完成しましたよ。a:hoverを使ったheaderのマウスポイント時の画像の変更。3時間半もかかりましたが^^;

結局、ロールオーバーリンク形式の画像横配置バージョンで片付けました。なかなか勉強になりますね。こういうのも・・・。結局、ほとんど自分で書いちゃいました;

#header_body {
width: ~px; /* 表示したい画像1枚分の横幅 */
height: ~px; /* 表示したい画像1枚分の高さ */
margin:~px ~px ~px;
background-image: url("http://~"); /* 画像のファイル名 */
}
#header_body:hover {
background-position: top right; /* 画像の表示開始基準の変更 */
}

こんなのをヘッダー部分に置き換えて作りました。

説明です。まず#header_body { の項を消して上記のものを代わりに挿入してください。初心者向けのテンプだと「ヘッダー」等の表記になっている部分です。

使用する画像は横に2倍の大きさに作るのが重要です。今回のロールオーバーリンクというものは画像の左右の左側をまず表示し、マウスを画像の上に持ってきたときに反対の右側を表示するという方式です。下記で使用する画像というのは左右に分けて普段から表示している画像を左側、マウスを画像の上に持ってきたときに表示する画像を右側に繋げた画像です。

ウチのブログの↑のヘッダーだと横に814縦に250サイズなので横に倍の1628*250の画像を用意してアップロード。urlをコピーしてbackground-image: url("~");の~に置き換え、画像1枚分の横幅814をwidth: ~px; /*の~に置き換え、height: ~px;の~に画像の高さ250を置き準備は完了。プレビューで確認すればもうマウスポイント時の画像の変更は出来ているはず。後はmargin:~px ~px ~px; の中の~を数字にしていじって画像の表示位置をずらしてくださればおkデス。ちなみにそれでも画像の表示位置がおかしい時はブログタイトルの項のmargin:の数値をいじっていただければダイジョーブかと。

左右に繋げた画像なのでどうしても端に隣の画像の切れ端が映りこんでしまう場合があります。そんな時はwidth: ~px;の中の数値をすこし少なめに入力してください。表示される幅が狭くなることで切れ目も消えます。

ホントは説明用の画像なんかを用意すればいいんでしょうが気にしないで作ってしまったので;;参考になれば幸いです。

なお1種類のテンプ(FC2のね)でしか試してないので動かなくてもクレームは受け付けませんw

ちなみに画像編集に使っているのはgimp2.0という無料で使えるフォトショップ的な素晴らしいソフトです是非使ってみてください^^



追記。hoverはIEで表示されないみたいなのでちょっといじってみます。完成したらうpする方向でw期待しないで待ってくださいw

ブログランキング・にほんブログ村へ
スタイルシート | TB(0) | CM(2)
プロフィール

166

Author:166
声優の舞太こと門脇舞以サマを愛してやまない♂です。

アキバ文化全般から紅茶にアロマ、ビリヤードに釣り、カクテルと多趣味。

このブログでは日記やラノベ・アニメ・音楽等のレビューをうpしています。

門脇舞以」さん「りさのうたうたうたいまぁす」さん「ハナノウタ」さんを猛プッシュし続けています。

コメントや拍手をいただけると大変励みになります。できる限り返事も書きますのでよろしければお願いします。

FC2カウンター
応援バナー