ランダムヘッド+ロールオーバー 2

画像は出来ましたか？

前の続きで・・・
1枚の画像の縦が460pxで4枚の画像をランダム＋ロールオーバー画像の場合で説明します

では・・

全部を1枚にした画像のURLと枚数※注1と表示する画像の縦を入れてからフリープラグインに貼ります

<script type="text/javascript">
<!--
var himg = "画像のURL";
var mai = Math.floor(4 * Math.random());//枚数Ａ
var imgp = 460 * mai;//表示する縦のサイズＢ
document.writeln('<style type="text/css">'+"\n"+'<!--'+"\n"+'#header h1 a{background-image:url('+ himg + ');background-position:0 -' + imgp +'px;}'+"\n"+'-->'+"\n"+'</style>');
// -->
</script>

※注１：Ａにはロールオーバー用画像は含みません

※時々CSSに貼っている方がいますがエラーになります・・これはフリープラグインです

例えば上の場合・・・

ランダムで　mai が　3 だったとします・・（maiはランダムで0～3のどれかになります）

imgp は　460 ×　3(mai) で・・1380

すると・・background-position:0 -1380px; となって・・Ａ4の画像が表示されます

ランダムで　mai が　0 だったとします・・

imgp は　460 ×　0(mai) で・・0

すると・・background-position:0 -0px; となって・・Ａ1の画像が表示されます

ランダムでＡ1からＡ4の画像を表示して

マウスが乗った時にCSSで　background-position:0 -1840px;　一番下の画像を表示させます

縦×枚の計算でpositionを決めています・・・　なので・・

全部の画像の縦のサイズが同じでないと(ロールオーバー用画像も)・・

計算が合わなくなっておかしな表示になります

※タイトルの文字は表示されません、ヘッド画像にはタイトル（概要）も入れてください

次は・・・ＣＳＳです

画像の縦と横のサイズとLoading画像のURL

それとロールオーバー時のポジションの位置を入力してからＣＳＳの最後に加えます

/*ランダムヘッド*/
#header{
height:460px;/*表示する画像の縦*/
background-color:#ffffff;
}
#header h1 a{
width:760px;/*画像の横*/
height:460px;/*表示する画像の縦*/
background-image:url(Loading画像のURL);/*Loading画像のURL*/
background-repeat:no-repeat;
background-position:center;
display:block;
position:absolute;
text-indent:-9000px;
text-decoration:none;
overflow:hidden;
outline:none;
}
#header h2{
display:none;/*概要を非表示*/
}
#header h1,
#header h2{/*位置の初期化*/
margin:0;
padding:0;
}
/*ロールオーバー*/
#header h1 a:hover{
background-position:0 -1840px !important;
}

ポジションの位置は・・・

表示する画像の縦 × ランダムする画像の枚数 にマイナスをつけます

上の例なら 460px × 4枚 = -1840px

たとえば・・1枚の縦が300pxでランダム画像が3枚でロールオーバー画像1枚の場合

300px × 3 = -900px　になります・・

画像サイズが合っていなくて画像が左に寄っちゃっている場合は・・

フリープラグインとCSSの 0 を　10px とか　12px とか画像が中央になるように設定します
フリープラグインの場合は次のスペースと-（マイナス）を消さないように注意ください

Loading画像って・・・こんなんです
（入れなければ入れ替わるまで何も表示されないだけです・・入れなくても可）

http://amebabbs.ameba.jp/img/screen/cmn/loading.gif

↑アメバタ会議で使っているやつ・・・です・・このまま画像のURLに・・

実験委員の資材置場 　ココにも少しありますからお持ち下さい

ランダムヘッド+ロールオーバー見本のブログです 　・・・上で説明している画像を使っています

早く動作させるためには「フリープラグイン」の配置を3カラムでしたら左のサイドバーの一番上

2カラムでしたらサイドバーの一番上に配置すればすぐに動作します

またフリープラグインの中でも最初に書いたほうが早く動作します

見本のブログでは「フリープラグイン」が一番最後に動作する位置に配置（3カラム右一番下）していますのでピンクのLoading画像が目立つと思います

この方法は横幅800pxオーバーの場合に限った方法ではありません

800px以下の場合にもこの方法ならストレスなく表示されます

800px以下の場合には画像フォルダに画像をアップして下さい

ランダムヘッド+ロールオーバー1

祝・CSS編集専用画像フォルダ

いよいよCSS編集専用画像フォルダ が使えるようになりました

って・・この記事が休み中に書いていた1番目の記事なんです
まだ・・完成していませんので2に続きますが・・・

前の記事は 参考になりましたか？

実際・・あの記事で書いた・・

「アップしたものを使って何かが出来るなんて仕組みは必要ありません
どうせCSS編集専用画像フォルダったって自動でCSSを書いてくれるわけではないんでしょ・・

いままでだってみなさま自分で画像のURLを調べて使ってきているんです
アップしたファイルのURLだけわかればいいんです・・・」

これは残念ですがズバリあたってしまいましたね・・・

ワザワザ800pxオーバーの画像をアップするだけにこんなの新設したって
うん～ど～なんでしょ？(長島監督の物まねをする関根勤さん風に言ってください・・？)

本来アノ記事はこの記事の後で公開するはずでした・・ (/ω＼)

で・・・・本題・・
CSS編集専用画像フォルダ新設記念として？

好評の？ヘッド画像のランダムを再度やってみます
オフィシャルのブログでもそのまま使っていただいているようでうれしいかぎりです

CSS編集専用画像フォルダやプロフィール画像を使ったとしても
アップできる枚数は決められています
ランダムにしたいからってそう何枚もヘッド画像をアップできません・・

で・・　　で～


今までにも何回か説明してきていますこの方法？
何枚ものヘッド画像をまとめて1枚の画像としてアップします
ついでにマウスオーバー（マウスがのった時に画像を変えます）も出来るようにしちゃいます

見本のブログです 　・・・　

フリープラグインが動作する順番をわざと一番最後に配置していますので

更新（F5）とかした時に画像が表示されるまでLoading画像が目立つと思います・・・　　が

マウスをのせたときは瞬時に画像が入れ替わるはずです

この方法・・CSS Sprite　って言うらしいです
やり方は知っていましたが名称は始めて知りました・・

この方法だと・・
アップする画像枚数が1枚で済みます
（CSS編集専用画像フォルダでしたらまだ4枚もあいています）
最初に画像を読み込んでしまうので表示の切り替えがすばやく出来ます

デメリットとして・・
背景画像の繰り返しの表示ができなかったり
画像を更新する時にまた全部の画像を1枚にするといった手間がかかるといったことはあります

が・・
ヘッド画像なので繰り返しはしないし・・
画像の更新もそうたびたびは無いと思われますので・・
見ていただくときにストレスなく見てもらえるといったメリットの方が大きいと思います

なお・・この方法は横幅800pxオーバーの場合に限ってはいません

普通に？ベーシックやグリーン、ピーチ、ブルー、グレイのスキンでも使ってください

ちなみに・・・

googleで使っている画像

yahoo!で使っている画像

http://k.yimg.jp/images/top/sp2/cmn/pic_all-100301.png

YouTubeで使っている画像

http://s.ytimg.com/yt/img/master-vfl149944.png

もっとも・・

これらは早く表示するというより1度で読み込んでサーバに対するリクエストを減らすために使っているのですが・・

まずは・・・ヘッド画像を作ってください・・

って・・　　すみません・・画像の作り方までは説明できるほど技量がありません m(_ _)m

とにかく？縦横同じサイズでランダムに表示させようと思うヘッド画像を何枚か作ってください

ついでに・・

同じサイズでマウスがのった時に表示されるヘッド画像も作ります

完成時にブログのタイトル（概要）は表示されませんので画像の中にタイトルも入れちゃってください

繰り返しさせませんので横幅はスキンの横幅にあわせます

縦は・・全部の画像の縦が同じでしたらかまいません・・

説明するのにランダムで表示されるヘッド画像を4枚とマウスオーバー用ヘッド画像の計5枚用意しました

以前に説明した事のある無料で使える画像編集ソフト　JTrim を使って合成してみます

まずは・・ランダムで表示されるうちの1枚を表示します

どっちみちランダムで表示されますから順番は関係ありません・・
マウスオーバー用ヘッド画像は一番下に連結してください

1枚目を表示したら　編集 → 連結

クリップボードから入力のチェックを外してから2枚目の画像を選択

このとき・・連結方向を下へを選択します（順番は関係ないので上へでも可能なんですが・・）

2枚目が下にくっつきました・・・

コレを続けていき・・一番下にマウスオーバー用のヘッド画像を連結します

全部を連結し終わったら・・右下のサイズを確認します

今回の場合は1枚の画像の縦が460pxで5枚ですから　460×5=2300 になっていればOKです

もし・・ここが　1枚の画像の縦 × 枚数 になっていない場合は・・・・・

やり直しです

あと・・1枚になっても1MB以上あるとアップできませんので・・　やり直しです・・

次回の説明に使う画像ですが↓縦のサイズが全部同じでないとこの方法は出来ません

画像が出来ましたら・・・横幅が800px以下でしたらブログの画像フォルダ

800px超える場合は今回新設されたCSSの方に画像をアップして画像のURLを調べておきます

・・・・　次回に続きます

ブログの上をスキンに合わせます・・を使っているみなさま

ブログの上をスキンに合わせます＆検索ボタン

コチラを使ってブログの上をスキンに合わせている場合・・・

Firefoxで表示がおかしくなっています・・・

アメブロさまで余計なことをやっちゃったようで・・・

ずれちゃっています・・・

/*アメブロヘッド広告*/
ul#amebaBar{
margin:0 auto !important;
min-width:0px !important;
width: 760px;/*スキンの横幅にあわせる　ベーシックなら800px*/
border:none;
position:static !important;
}

!important　を・・付け加えてください

記事の方はとっくに修正していたのですが・・

みなさまにお知らせするのを忘れていました

すみません　m(_ _)m