位置固定背景を2つ表示したい
お久しぶりです。
位置固定背景を同時に2つ表示させることは可能でしょうか。
左下と右下に置きたいです。
記事、メニューに隠れないように両脇に背景を表示する方法でも良いです。
真ん中に表示されている記事に隠れないように
左側と右側に背景を表示させたいのです。
どうかよろしくお願いします。
あ、複製してそのまま使うなら、修正すべきところは、複製した方のid名だけで良いかもしれません(゚∀゚)
・先ほどの作業で作った、ランダム表示プログラムの
「<script language="JavaScript" charset="e uc-jp">
var images = new Array();
(省略)………
</script>」
を複製します。
・次に、その中の
「document.write('<img id="(新しいid名)',rnd,& #039;" src=',imagesr[rnd],' border="0&qu ot;>');」
のidの部分を、複製元と違うものに変えて下さい。
・それに伴うスタイルシートのid変更などを行って下さい。
・あとは、表示する画像をそれぞれ振り分けて下さい。
これで2つ画像を表示することが出来るようになるかと思います。
また、何かあれば書き込みお願いしますm(__)m
2013年04月07日 21:07 by トリプる
ランダム表示できましたか!
おめでとうございます(^^♪
そうですね、現状だと、1つの画像しか表示できませんね(汗)
と言うことで、先ほど設定した
「<script language="JavaScript" charset="e uc-jp">
var images = new Array();
(省略)………
</script>」
の部分を複製すれば可能かと思います。
が、細々と修正すべき部分がありますので、またちょっと長々と書き込みしますw
2013年04月07日 20:48 by トリプる
ランダム表示になりました、ありがとうございます。
しかし、スタイルシートの方まで消してしまったせいか
先ほどせっかく左右表示されるようになった画像が
出なくなりました。・゚・(ノД`)・゚・。
ランダムに表示される画像の中に、
先ほどのように2つ表示するパターンを入れることってできますか?
お疲れ様です。
次の作業はスタイルシートの編集になります。
スタイルシート編集の一番最後に追加してもらえればよいと思います。
img#(設定したid名+連番) {
…
…
…
}
という風に、画像ごとにスタイルシートの設定を行います。
この場合、HTMLに記入した画像順にスタイルシートの設定が適用されます。
※注意)連番は「0(ゼロ)」から始まります。
例):id名が「gazou」の場合
img#gazou0 {
position: fixed;
bottom: 0px;
left: 0px;
z-index: -1;
}
img#gazou1 {
position: fixed;
bottom: 0px;
left: 0px;
z-index: -1;
}
img#gazou2 {
position: fixed;
bottom: 0px;
left: 0px;
z-index: -1;
}
…※以下、必要数繰り返し…
これが出来ましたら、ランダム表示の設定を行う前に追加した<img>タグは削除して下さい。
これでランダム表示されるのではないかと思います。
こちらの都合で作業を急かしてしまい申し訳ありませんでしたm(__)m
できるペースで作業を行ってください。
わかりづらい部分もあると思いますので、問題等あれば書き込みをしてくだされば、お答えします。
2013年04月07日 19:47 by トリプる
できました。
先ほどコピーしていただいた中に
「document.write('<a href="~」
と続く一文があると思います。
そこを変更していきます。
・まず、その文の
「<a href="(省略)………劇場">」
の部分を削除します。
・同じように
「</a>」
の部分も削除します。
・次にidを追加していただきます。
ちょっとややこしいです。
■元の文:
「<img src=',images[rnd],' border="0" >」
↓
■修正文:
「<img id="(ココに適当なid名を設定)',rnd,'" src =',images[rnd],' border="0">」
つまりは
「id="(ココに適当なid名を設定)',rnd,'" 」
という部分を追加します。
・完成する一文は
document.write('<img id="gazoul',rnd, 9;" src=',images[rnd],' border="0"& gt;');
というようになります。(※id名は仮で”gazoul”としています。)
「'」、「”」の違いも重要ですので、上の完成文をコピーしていただいて、
「gazoul」
の部分だけを修正していただくほうが良いかもしれません。
ここは難しいかも知れませんので、気をつけてください。
作業完了されましたら、書き込みをいただけるとありがたいです。
2013年04月07日 19:04 by トリプる
書けました。
了解しました!
説明下手ですが、キチンとお伝えできるよう、こちらも頑張ります(>_<)
まず、HTMLの編集から行います。
・HTML編集の中で
「<div id="tit2"><h1>」
という部分があると思いますので、それを見つけてください。
・そして、そのすぐ下に、タイトル画像をランダムに表示する
「<script language="JavaScript" charset="e uc-jp">
var images = new Array();
(省略)………
</script>」
という部分がありますので、コピーして下さい。
・そのコピーした部分を
「<body>」
のすぐ下に追加して下さい。
・そして、コピーした部分の中の表示する画像の設定を行って下さい。
一旦ココで説明を切ります。
この作業は問題なく行えますでしょうか?
作業完了できましたら、書き込みをいただけるとありがたいです。
2013年04月07日 18:16 by トリプる
ぜひお願いします。
長くても頑張りますよ!
上手く画像が表示されているなら良かったです(^^♪
僅かでもお役に立てたなら幸いですm(__)m
引き続いて、ランダム表示ついての件ですが、現在そちらのブログのTOP画像の表示切り替えのプログラムを流用すれば可能かも しれません。
ただ、その場合、また説明が長くなってしまうやも知れません(笑)
それでもよろしければ細々と出来る範囲で説明はさせていただきますが、どうでしょうかm(__)m?
2013年04月07日 17:52 by トリプる
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー