トップ ＞ 俺流ブログ改造 ＞ 背景画像ランダム表示
2010年04月02日
 |
背景画像ランダム表示 |
 |
ブログの背景画像をランダムに変化するように
カスタマイズしちゃってみました。
記述方法は以下の*****印で表示の内側の部分を
コピーして [自分のブログＩＤ] と [画像ファイル名.gif] の箇所へ
ご自分のブログIDと画像ファイル名を入れればＯＫです。
事前に画像をアップしてから、以下の構文を
ブログ環境設定の カスタムプラグインの所に貼り付けてください。
カスタムプラグインのサイドバー・記事一覧の上部の選択はどれでも構いません。
下の構文は背景のみを制御するだけですので
同じ箇所に記述のあるブログパーツのような表示には影響しません。
カスタマイズしちゃってみました。
記述方法は以下の*****印で表示の内側の部分を
コピーして [自分のブログＩＤ] と [画像ファイル名.gif] の箇所へ
ご自分のブログIDと画像ファイル名を入れればＯＫです。
事前に画像をアップしてから、以下の構文を
ブログ環境設定の カスタムプラグインの所に貼り付けてください。
カスタムプラグインのサイドバー・記事一覧の上部の選択はどれでも構いません。
下の構文は背景のみを制御するだけですので
同じ箇所に記述のあるブログパーツのような表示には影響しません。
| ******************************************************* |
| <--ブログ背景 body のランダム変更--> |
| <script language="JavaScript"><!-- |
| wall = new Array(); |
| /* 使用する背景画像を好きなだけ記述 */ |
| wall[0] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.gif"; |
| wall[1] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.jpg"; |
| wall[2] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.gif"; |
| wall[3] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.JPG"; |
| wall[4] = "//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.gif"; |
| r = Math.floor(Math.random()*wall.length); |
| document.write('<style type="text/css">'); |
| document.write('body { background-image:url("'+wall[r]+'");}'); |
| document.write('</style>'); |
| // --></script> |
| ***************************************************** |
| <--ブログタイトル画像のランダム変更--> |
| <script language="JavaScript"><!-- |
| titlebk = new Array(); |
| /* 使用するタイトル画像を好きなだけ記述 */ |
| titlebk[0] = '//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.jpg'; |
| titlebk[1] = '//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.jpg'; |
| titlebk[2] = '//img02.eshizuoka.jp/usr/自分のブログＩＤ/画像ファイル名.JPG'; |
| r = Math.floor(Math.random()*titlebk.length); |
| document.write('<style type="text/css">'); |
| document.write('#banner,#subbanner{background: url("'+titlebk[r]+'") center no-repeat;}'); |
| document.write('</style>'); |
| //--></script> |
| ***************************************************** |
使用する画像の数は増やしたければ
背景画は wall[5] タイトル画は titlebk[3] として
背景画は wall[5] タイトル画は titlebk[3] として
その行を同じように増やしてください。
減らす場合は行を削除すれば大丈夫です。
但し、テンプレートによっては、スタイルシートでの記述の
「#banner,#subbanner」の箇所が
「#header」になっている場合があります。
テンプレート名 ： Stylish Life なんかがそうです。
その場合は、上記の記述の箇所も変更してください。
カスタムプラグインの箇所にあまりに多くのブログパーツを
組み入れると閲覧する方々が表示が重くなることもありますので
ご注意くださいって「おまえが言うな」ってお叱りがあるかも・・・。
