CSSをリロードでランダムに表示(スタイル)を変える方法【ワードプレス】

CSSをリロードでランダムに表示(スタイル)を変える方法【ワードプレス】

どうも、東田ダダーンです。
人の気持ちの変化とは一瞬の刹那。
次の瞬間には、違う色がいいと、そんな気分屋さんも多いはず。

そんな世知辛い世の中だから。。。

ランダムスタイル(css)チェンジ!!

当サイトは以前のデザイン時から、リロード時にランダムで色などのスタイルを変えるというイメージカラーもクソもない気分だけのデザインを使ってました。
ちなみに前回はカテゴリー事にメインカラーの色が変わり、トップはランダムという仕様でした。

現在(2018年4月)使ってるテーマ「LION BLOG」を使用するにあたって、どうしても前のデザインをどこか継承させたいと思い、悩んだ結果、今回もランダムスタイルチェンジチェンジランダムスタイルを使うことにしました。
(ついついテンション上がって、言葉をランダムに入れ替えてしまいました。)

今回はそんな、気分屋スタイルをワードプレスでカスタマイズする方法をご紹介します。
技術的には今更なレベルですが!

Advertisement

ランダムスタイル(css)チェンジ方法。

流れとしては、以下です。

  1. ランダムにID又はclassを表示させる
  2. ランダムに表示させたID又はclassにスタイルを当てる

ワードプレステーマファイル

ワードプレスのテーマファイルを開き、<body>タグを以下の内容に変えます。

WordPress
<?php $class_name = array('n1', 'n2', 'n3', 'n4', 'n5', 'n6', 'n7'); // ランダムさせたいID名 ?>
<body id="<?php echo $class_name[rand(0, count($class_name)-1)]; ?>" <?php body_class(); ?>>

<body>タグ以外でも、もちろん大丈夫です。
ランダムでセレクターを変えたい所に挿入してください。

CSS

後は、ID・classに任意のスタイルを当てていくだけです。

CSS
body#n1 h2{
	color:#0000ff;
}
body#n2 h2{
	color:#ff0000;
}
body#n3 h2{
	color:#ffff00;
}

使ってるテーマ等で、編集場所が変わる場合もあると思いますが、
これで、更新ボタンを押す度に、ページを開く度に、色が変わります。

上記でも記載通り、当サイトもこのカスタマイズを使ってるので、
更新ボタンなどを押していただくと、色が変わります。

まとめ

以上がワードプレスでランダムにスタイル(CSS)を変更する、チェンジ・ザ・スタイル・ランダム・ワールドです。
サイトのイメージカラーがころころ変わるという部分では、おススメできませんが、
部分的に使ったりする分にはおもしろいと思います。
当サイトは反対に、コロコロ色が変わるサイトで覚えてもらいたいという考えで前デザインからやってますー。

ワードプレスのテーマ編集は自己責任で。必ず、バックアップを取ってから、作業を行いましょう。