人の気持ちの変化とは一瞬の刹那。
次の瞬間には、違う色がいいと、そんな気分屋さんも多いはず。
そんな世知辛い世の中だから。。。
ランダムスタイル(css)チェンジ!!
当サイトは以前のデザイン時から、リロード時にランダムで色などのスタイルを変えるというイメージカラーもクソもない気分だけのデザインを使用しています。
ちなみに前回はカテゴリー事にメインカラーの色が変わり、トップはランダムという仕様でした。
現在(2018年4月)使ってるテーマ「LION BLOG」を使用するにあたって、どうしても前のデザインをどこか継承させたいと思い、悩んだ結果、今回もランダムスタイルチェンジ、チェンジランダムスタイルを使うことにしました。
(ついついテンション上がって、言葉をランダムに入れ替えてしまいました。)
今回はそんな、気分屋スタイルをワードプレスでカスタマイズする方法をご紹介します。
ランダムスタイル(css)チェンジ方法。
流れとしては、以下です。
- ランダムにID又はclassを表示させる
- ランダムに表示させたID又はclassにスタイルを当てる
ワードプレステーマファイル
ワードプレスのテーマファイルを開き、<body>タグを以下の内容に変えます。
<?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に任意のスタイルを当てていくだけです。
body#n1 h2{
color:#0000ff;
}
body#n2 h2{
color:#ff0000;
}
body#n3 h2{
color:#ffff00;
}
使ってるテーマ等で、編集場所が変わる場合もあると思いますが、
これで、更新ボタンを押す度に、ページを開く度に、色が変わります。
上記でも記載通り、当サイトもこのカスタマイズを使ってるので、
更新ボタンなどを押していただくと、色が変わります。
まとめ
以上がワードプレスでランダムにスタイル(CSS)を変更する、チェンジ・ザ・スタイル・ランダム・ワールドです。
サイトのイメージカラーがころころ変わるという部分では、おススメできませんが、
部分的に使ったりする分にはおもしろいと思います。
当サイトは反対に、コロコロ色が変わるサイトで覚えてもらいたいという考えで前デザインからやってますー。
コメント