2013年12月02日

2013 12.02 Mon


毎月ごとに背景色・壁紙など3箇所CSSを変更する方法
body背景色、header背景色、バナー画像など複数箇所のスタイルシートを毎月ごとに一度にまとめて変更する方法。

季節に合ったデザインに自動で更新したい場合などに便利なカスタマイズです。

もちろん、
・毎月ではなく、二ヶ月おき、三ヶ月おきなんかも可能。
・変更箇所は1箇所〜何箇所でも可能です。 


試案サンプル(1) jqueryでCSSを弄る
var mo=new Date().getMonth();
var bg=[
/*1*/['FFFFFF','552C01','hoge1.gif'],
/*2*/['7792ED','07081A','hoge2.jpg'],
/*3*/['E4E4BE','818248','hoge3.jpg'],
/*4*/['F3E3E3','E90976','hoge4.gif'],
/*5*/['EBE8D7','DF001B','hoge5.gif'],
/*6*/['EBF3F3','294082','hoge6.jpg'],
/*7*/['F4F194','007','hoge7.jpg'],
/*8*/['FFF','552C01','hoge8.gif'],
/*9*/['FFF','552C01','hoge9.gif'],
/*10*/['FBF7E9','B40200','hoge10.png'],
/*11*/['D9D8D6','5A5956','hoge11.gif'],
/*12*/['5B3','DB3E17','hoge12.png']];
$('body').css('background','#'+bg[mo][0]);
$('#banner').css('background','#'+bg[mo][1]);
$('#banner2').css('background','url("'+bg[mo][2]+'") no-repeat right');


失敗。該当するidタグを待たなければ作動しないので表示が遅くなる。



試案サンプル(2) document.writeで<style>タグを出力する
var mo=new Date().getMonth();
var bg=[
/*1*/['FFFFFF','552C01','hoge1.gif'],
/*2*/['7792ED','07081A','hoge2.jpg'],
/*3*/['E4E4BE','818248','hoge3.jpg'],
/*4*/['F3E3E3','E90976','hoge4.gif'],
/*5*/['EBE8D7','DF001B','hoge5.gif'],
/*6*/['EBF3F3','294082','hoge6.jpg'],
/*7*/['F4F194','007','hoge7.jpg'],
/*8*/['FFF','552C01','hoge8.gif'],
/*9*/['FFF','552C01','hoge9.gif'],
/*10*/['FBF7E9','B40200','hoge10.png'],
/*11*/['D9D8D6','5A5956','hoge11.gif'],
/*12*/['5B3','DB3E17','hoge12.png']];
document.write('<style'+'>body{background:#'+bg[mo][0]+'}#banner{background:#'+bg[mo][1]+'}#banner2{background:url("'+bg[mo][2]+'") no-repeat right;}<\/style>');


成功。素直にbodyタグ直前にdocument.write。最速。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.