ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

【jQuery】ページにアクセスするたびランダムで異なる背景色・背景画像にしたいときの方法

| カテゴリー : JavaScript

ホームページにアクセスするたびにランダムで背景色や背景画像を変更したい、というときに使ったjQueryのコードをご紹介します。

まずはCSSに次のようにクラス名をいくつか用意します。例として今回はそれぞれに異なる背景色を適用します。

backgroundのあとに1~5までの連番をもったクラス名が存在するのがわかりますね。

あとはJavaScritpでランダムにどのクラスを使うかを選ぶ、という実装をします。

上記のコードでやっていることは難しくありません。
1〜5までの整数をランダムに作り、その整数をもったクラス名を.wrapperに付与するということを行っています。

Math.random()は0 以上 1 未満の範囲内でランダムな浮動小数点を返してくれるのでその値に掛ける5を行います。

その値の小数点以下はMath.ceil()で切り上げを行えば1〜5のランダムな整数を作ることができます。

その整数をもったクラス名を指定の要素に追加するようすれば、ページにアクセスするごとに異なるCSSを適用させることができます。

CodePenでサンプルを作ってみました。動作させるごとに違った背景色が適用させるはずなので何度かRERUNボタンを押して試してみてください。

See the Pen QqGVGw by Daisuke Koshimizu (@dkossy) on CodePen.

CSSを変更すれば、色を変えるだけではなく背景画像をクラスごとに出し分けることもできます。

ランダムに選ばれるクラス名を増やしたり減らしたり、このコードはいくらでも応用が効くので色々試してみてください。

以上、Webサイトにアクセスするたびランダムで違った背景色・背景画像にしたいときの方法を紹介しました。

それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。