FC2ブログ

無料新規登録

テンプレート・プラグイン

位置固定背景を２つ表示したい 2ページ目

お久しぶりです。

位置固定背景を同時に２つ表示させることは可能でしょうか。
左下と右下に置きたいです。
記事、メニューに隠れないように両脇に背景を表示する方法でも良いです。
真ん中に表示されている記事に隠れないように
左側と右側に背景を表示させたいのです。


どうかよろしくお願いします。

by   2013年04月02日 19:26
by 
2013年04月02日 19:26

コメント一覧 新しい順に表示▽ / 古い順に表示△

コメント一覧
新しい順  |  古い順

このコミュニティにご参加頂くと、コメントの書き込みができます

  • あ、複製してそのまま使うなら、修正すべきところは、複製した方のid名だけで良いかもしれません(ﾟ∀ﾟ)

    ・先ほどの作業で作った、ランダム表示プログラムの
    「<script language="JavaScript" charset="euc-jp">
    var images = new Array();
    (省略)………
    </script>」
    を複製します。

    ・次に、その中の
    「document.write('<img id="(新しいid名)',rnd,'" src=',imagesr[rnd],' border="0">');」
    のidの部分を、複製元と違うものに変えて下さい。

    ・それに伴うスタイルシートのid変更などを行って下さい。

    ・あとは、表示する画像をそれぞれ振り分けて下さい。


    これで２つ画像を表示することが出来るようになるかと思います。

    また、何かあれば書き込みお願いしますm(__)m
    by トリプる  2013年04月07日 21:07
    by トリプる
    2013年04月07日 21:07
  • ランダム表示できましたか！
    おめでとうございます(^^♪

    そうですね、現状だと、１つの画像しか表示できませんね(汗)

    と言うことで、先ほど設定した
    「<script language="JavaScript" charset="euc-jp">
    var images = new Array();
    (省略)………
    </script>」
    の部分を複製すれば可能かと思います。

    が、細々と修正すべき部分がありますので、またちょっと長々と書き込みしますｗ
    by トリプる  2013年04月07日 20:48
    by トリプる
    2013年04月07日 20:48
  • ランダム表示になりました、ありがとうございます。

    しかし、スタイルシートの方まで消してしまったせいか
    先ほどせっかく左右表示されるようになった画像が
    出なくなりました｡･ﾟ･(ﾉД`)･ﾟ･。

    ランダムに表示される画像の中に、
    先ほどのように２つ表示するパターンを入れることってできますか？
    by   2013年04月07日 20:24
    by 
    2013年04月07日 20:24
  • お疲れ様です。


    次の作業はスタイルシートの編集になります。
    スタイルシート編集の一番最後に追加してもらえればよいと思います。

    img#(設定したid名＋連番) {
    …
    …
    …
    }

    という風に、画像ごとにスタイルシートの設定を行います。
    この場合、HTMLに記入した画像順にスタイルシートの設定が適用されます。

    ※注意)連番は「０(ゼロ)」から始まります。

    例）：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
    できるペースで作業を行ってください。

    わかりづらい部分もあると思いますので、問題等あれば書き込みをしてくだされば、お答えします。
    by トリプる  2013年04月07日 19:47
    by トリプる
    2013年04月07日 19:47
  • できました。
    by   2013年04月07日 19:22
    by 
    2013年04月07日 19:22
  • 先ほどコピーしていただいた中に
    「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,'" src=',images[rnd],' border="0">');

    というようになります。(※id名は仮で”gazoul”としています。)
    「'」、「”」の違いも重要ですので、上の完成文をコピーしていただいて、
    「gazoul」
    の部分だけを修正していただくほうが良いかもしれません。


    ここは難しいかも知れませんので、気をつけてください。

    作業完了されましたら、書き込みをいただけるとありがたいです。
    by トリプる  2013年04月07日 19:04
    by トリプる
    2013年04月07日 19:04
  • 書けました。
    by   2013年04月07日 18:48
    by 
    2013年04月07日 18:48
  • 了解しました！

    説明下手ですが、キチンとお伝えできるよう、こちらも頑張ります(>_<)

    まず、HTMLの編集から行います。


    ・HTML編集の中で
    「<div id="tit2"><h1>」
    という部分があると思いますので、それを見つけてください。

    ・そして、そのすぐ下に、タイトル画像をランダムに表示する
    「<script language="JavaScript" charset="euc-jp">
    var images = new Array();
    (省略)………
    </script>」
    という部分がありますので、コピーして下さい。

    ・そのコピーした部分を
    「<body>」
    のすぐ下に追加して下さい。

    ・そして、コピーした部分の中の表示する画像の設定を行って下さい。



    一旦ココで説明を切ります。
    この作業は問題なく行えますでしょうか？

    作業完了できましたら、書き込みをいただけるとありがたいです。
    by トリプる  2013年04月07日 18:16
    by トリプる
    2013年04月07日 18:16
  • ぜひお願いします。

    長くても頑張りますよ！
    by   2013年04月07日 18:04
    by 
    2013年04月07日 18:04
  • 上手く画像が表示されているなら良かったです(^^♪
    僅かでもお役に立てたなら幸いですm(__)m

    引き続いて、ランダム表示ついての件ですが、現在そちらのブログのTOP画像の表示切り替えのプログラムを流用すれば可能かもしれません。

    ただ、その場合、また説明が長くなってしまうやも知れません(笑)

    それでもよろしければ細々と出来る範囲で説明はさせていただきますが、どうでしょうかm(__)m？
    by トリプる  2013年04月07日 17:52
    by トリプる
    2013年04月07日 17:52

37件中、11～20件表示

<<前へ 1 2 3 4 次へ>>

Copyright(c)1999 FC2, Inc. All Rights Reserved.