サイト制作の合同会社ジリキ

背景画像をランダムに切り替える

WordPressで背景にでかでかと一面設定した画像を読み込みごとに替えたい。そういうときに使えます。基本的にPHPでランダムで選択させるのでheader.phpなどに直接スタイルを書き込みます。

	.bg {
		background: url(<?php echo get_template_directory_uri(); ?>/img/bg/top_<?php echo rand(1,2); ?>_<?php echo rand(1,24); ?>.jpg) no-repeat;
		background-size: cover;
		background-position: center;
		height: 100%;
		width: 100%;
		animation: fadeIn 2s ease 0s 1 normal;
		-webkit-animation: fadeIn 2s ease 0s 1 normal;
	}
	@keyframes fadeIn {
			0% {opacity: 0}
			100% {opacity: 1}
	}

	@-webkit-keyframes fadeIn {
			0% {opacity: 0}
			100% {opacity: 1}
	}

/bg という背景画像だけを入れておくディレクトリを選択すれば間違いも起きないかと。あとは画像ファイルの名前を数字で降ってやって完成ですね。top_1_1.jpg 〜 top_2_24.jpg の中から選択されます。