2007年08月31日
ヘッダー画像をランダムで変えようぜ！（補足）
ちょっと前に書いた ヘッダー画像をランダムで変えようぜ！ の補足っす。
ランダム表示の Javascript 記述内に書かれている赤い部分、どこかで見たことないっすか？
ランダム表示の Javascript 記述内に書かれている赤い部分、どこかで見たことないっすか？
<script type="text/javascript">
<!--
rdmimg=new Array();
rdmimg[0]="ヘッダー画像の URL (一枚目)";
rdmimg[1]="ヘッダー画像の URL (二枚目)";
rdmimg[2]="ヘッダー画像の URL (三枚目)";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>
<!--
rdmimg=new Array();
rdmimg[0]="ヘッダー画像の URL (一枚目)";
rdmimg[1]="ヘッダー画像の URL (二枚目)";
rdmimg[2]="ヘッダー画像の URL (三枚目)";
rdmhead=Math.floor(rdmimg.length*Math.random());
rdmimg=rdmimg[Math.floor(rdmhead)];
document.write ('<style type="text/css">#banner{background:#000 url('+rdmimg+') top center no-repeat;}</style>');
// -->
</script>
これ、スタイルシートなんすよ。(スタイルシート．．．以下 CSS)
テンプレートカスタムページの CSS 枠に下記があるでしょ？
それと同じ CSS です。
※画像は私のブログの CSS です。
画像の周りの余白(白とは限らんから余白じゃないかな？) や、その背景色などの指定も
赤い部分を変更する事で出来ますよ。
こっちの CSS はさわった事ある人多いと思うので、
変更したい人はちらっとさわってみると良いかもっすよ。
ちなみに私の用意した Javascriot 内のやつだと．．．
背景が黒で、画像の位置が上寄せの真ん中、画像リピート無しになってまス。
あ、「2 つ CSS あったら混ざって変になるんじゃないか？」 って思った人．．．居ますね？
居るだろ？なあ、居るだろ？
私も 今年の春くらいまで そう思ってたんだからさ、絶対居るだろ！？
・・・えっと、そんな人の為にちょいと説明。
実は、CSS って 『後に書かれている指定が反映されるようになってる』 んスよ。
読み込まれる順番は、テンプレートカスタムページの CSS ( html 外部) が先に読まれて、
後から html に記載した Javascript 内の CSS ( html 内部) が読み込まれるようになってまス。
なので、後に記載した Javascript 内の CSS が実際に反映されるワケっす。
※反映されるのは CSS の同じセレクタの部分だけです。全部が変わるワケじゃないです。
例えば、先に読み込んだ CSS、#banner 内にあるのが body と height と padding で、
後から読み込んだ #banner 内にあるのが body と padding だとすると、 height は
反映されます。同じ指定があった場合のみ後が優先されて読み込まれるワケっす。
このランダムヘッダー表示を使っている場合、ヘッダーの CSS を編集したいときには
Javascript 内の CSS をさわるようにしてくださいまし。
カスタマイズの CSS 枠をどんなにさわっても反映されませぬので．．．
※カスタムは自己責任でお願いします。変な事になっても苦情受け付けませんし、
何の責任も取りませんので。なので、変更前のデータのバックアップはちゃんと取りましょう！
テンプレートカスタムページの CSS 枠に下記があるでしょ？
それと同じ CSS です。
※画像は私のブログの CSS です。
画像の周りの余白(白とは限らんから余白じゃないかな？) や、その背景色などの指定も
赤い部分を変更する事で出来ますよ。
こっちの CSS はさわった事ある人多いと思うので、
変更したい人はちらっとさわってみると良いかもっすよ。
ちなみに私の用意した Javascriot 内のやつだと．．．
背景が黒で、画像の位置が上寄せの真ん中、画像リピート無しになってまス。
あ、「2 つ CSS あったら混ざって変になるんじゃないか？」 って思った人．．．居ますね？
居るだろ？なあ、居るだろ？
私も 今年の春くらいまで そう思ってたんだからさ、絶対居るだろ！？
・・・えっと、そんな人の為にちょいと説明。
実は、CSS って 『後に書かれている指定が反映されるようになってる』 んスよ。
読み込まれる順番は、テンプレートカスタムページの CSS ( html 外部) が先に読まれて、
後から html に記載した Javascript 内の CSS ( html 内部) が読み込まれるようになってまス。
なので、後に記載した Javascript 内の CSS が実際に反映されるワケっす。
※反映されるのは CSS の同じセレクタの部分だけです。全部が変わるワケじゃないです。
例えば、先に読み込んだ CSS、#banner 内にあるのが body と height と padding で、
後から読み込んだ #banner 内にあるのが body と padding だとすると、 height は
反映されます。同じ指定があった場合のみ後が優先されて読み込まれるワケっす。
このランダムヘッダー表示を使っている場合、ヘッダーの CSS を編集したいときには
Javascript 内の CSS をさわるようにしてくださいまし。
カスタマイズの CSS 枠をどんなにさわっても反映されませぬので．．．
※カスタムは自己責任でお願いします。変な事になっても苦情受け付けませんし、
何の責任も取りませんので。なので、変更前のデータのバックアップはちゃんと取りましょう！
エトウの役に立つかも記事
■ Web Developer でスタイルシートを簡単にカスタマイズしようか？ ※かなり長い
■ Javascript でヘッダー画像をランダムにしてみっか？
■ Javascript でヘッダー画像をランダムにしてみっか？ ～補足～
■ ブログに地図貼ってみたくないか？
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい？ ～基本～
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい？ ～応用１～
■ Jtrim 使って写真を加工してヘッダー画像にしてみるかい？ ～応用２～
■ 大きい画像をモブログしてもデザイン崩れないんだぜ？ ※かなり長い
■ 画像編集ソフト AzPainter New！
※まとめ ： ブログの役に立つかもよ。
※まとめ ： ブログの役に立つかもよ。
Posted by エトウ at 11:53│Comments(0)
│役に立つかもよ。
※会員のみコメントを受け付けております、ログインが必要です。
てぃーだオフィシャルブログ
沖縄の食べ歩き・グルメ情報
沖縄暮らし・スポット情報
てぃーだの特別企画ブログ
オフィシャルブログ
てぃーだスタッフの日常
沖縄ブログ村
画像一覧 