スポンサーサイト 
-- -- --
-- --:--:--

スポンサー広告  Comment -  Trackback -  edit.

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

スクリプトでランダムカラーチェンジ 
2006 02 11
Sat 23:33:11

カスタマイズ  Comment 2  Trackback 0  edit.

今回はちょっとスクリプトを使ったデザインチェンジを追加してみました。
原理は簡単、スクリプトでランダムに<body>タグのID名を変更し、同じくその下に<div>タグのID名をカラー名に変更する事で色を変えると言うことです。
壁紙チェンジャースクリプトを改編して制作しましたが、スクリプトの原理は意外と簡単なものを使用しました。
以下にスクリプト版のファイルを掲載しましたのでご使用する方はDLして下さい。
尚、このバージョンは最新版でスクリプトオフの時はグレーのトップデザインに設定されています。
本当なら全てを変更すると一段と面白いのかも知れませんが、スクリプトが面倒なので辞めました(^^;
スクリプトカラーチェンジバージョンCSSファイル
スクリプトカラーチェンジバージョンHTMLファイル
(多少、スタイルシートも変更していますので使用の際は両方のファイルをお使い下さい。)

修正点は以下に↓
カラーチェンジバージョンのスクリプト版デザイン変更方法。

HTMLに関しての変更点は以下の通りです。
以下のものはスクリプト追加前のバージョンでカラー設定をされているタグ周りです。

<!-- INDEXページ部分 -->

<!--index_area-->
<body id="index_top">
<!--/index_area-->


<!-- 以下はカラーチェンジの設定です。各ページの色変更は下のbodyタグのid名を、blue,green,red,orange,gray
のいずれかに変更して下さい。尚、単一色での使用時はブログ記事を参考にお願い致します。 -->

<!--not_category_area-->
<!--not_date_area-->
<!--not_permanent_area-->
<!--not_index_area-->
<body id="orange">
<!--/not_index_area-->
<!--/not_permanent_area-->
<!--/not_date_area-->
<!--/not_category_area-->

<!--permanent_area-->
<body id="blue">
<!--/permanent_area-->

<!--category_area-->
<body id="green">
<!--/category_area-->

<!--date_area-->
<body id="red">
<!--/date_area-->

<!-- カラーチェンジの設定ここまで。 -->

<!--index_area-->
<div id="gray">
<!--/index_area-->


上の部分で赤文字部分を削除し、青文字の部分に移動、それをスクリプトに置き換えます。

<!--index_area-->
<script language="javascript">
<!--
Rbes=new Array(5);
Rbes[0]="#D8DADE";
Rbes[1]="#A4B8D9";
Rbes[2]="#EAE4CC";
Rbes[3]="#ADC2C2";
Rbes[4]="#D4AEB9";

Rces=new Array(5);
Rces[0]="gray";
Rces[1]="blue";
Rces[2]="orange";
Rces[3]="green";
Rces[4]="red";
MyRbc=Math.floor(5*Math.random());
document.write("<body id='index_top' style='background-color:"+Rbes[MyRbc]+"'><div id='"+Rces[MyRbc]+"'>");
//-->
</script>

<noscript>
<body id="index_top">
<div id="gray">
</noscript>
<!--/index_area-->


スクリプト注意する部分は、背景色とカラーネームを必ずスタイルシートの設定と同じものにすると言うことです。
それぞれに番号を付けそれをランダムにスクリプトが決めている為、同じ番号がbodyタグのカラーとdivのID名に割り当てられます。

このスクリプト元々がランダムにメッセージを表示する為のものですが、それをdocument.writeでタグとして書き込んでいる訳です。
更にスクリプトがオフの場合には<noscript>で囲まれた部分のタグが使用され表示される訳です。

まぁ?このテンプレートだから出来ることなんですけどね。(^^;
でもこのスクリプトを改編すれば、トップの画像のみをランダムに変更する事も出来ますね。
(と言いながらスタイルシートの変更も必要に成りますので書きませんがw)

ジャンル [ ブログ テーマ [ カスタマイズ ]

Re comments.

「ランダムカラーチェンジ」
こんにちは
度々身に来させてもらっては勝手にお世話になっております。

私もスクリプトを入れて、
logo_wide_baseを同じようなことさせてました。
もうめちゃめちゃにコードを触ってしまって原型を留めていないくらいになってしまったので、コピーライトを残すのが申し訳なくて外してますけど…
(有希之武さんがこんな程度の低いものを配布されていると誤解されてもいけないので)
有希之武さんのソースを見させてもらって
勉強させて頂いてます。
いつか自分もオリジナルのテンプレートが作れるように
なれればいいんですけどねぇ…。

では、また遊びに来させて頂きます。
今度見に来た時はまたデザイン変わってるんだろうなァ…(笑
2006/02/19(日) 18:56:21 [URL] キサラさん [編集]
「キサラさんこんばんわ」
良いですよ~参考に成れば嬉しいです(^ー^)

スクリプトはほとんど私も素人同然で、色々なスクリプトを合体させては使って居るだけです(^^;
コピーライトも自分としてはどうでも良いと思う方ですね。
オリジナルが分からないくらいカスタマイズがされた時点でその方のものだと思ってますし。

まぁ~自分もテンプレートで遊んでいる様なものなのでおかしな所が有りましたら遠慮せず突っ込みを入れて下さい(笑)
2006/02/20(月) 00:22:27 [URL] 有希之武さん [編集]
Comment form.

  管理者にだけ表示を許可する 
  注意 名前、タイトル、本文を入力する事で投稿可能になります。

Trackbacks.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。