//AdSenseにリンク

WordPressのカスタムHTMLでJavaScriptを使用して画像を9枚並べて、クリックして、2秒かけて450度回転してから新しい9枚の画像がランダムに差し替わり、1080度回転して止まる書き方。クリックできるのは1回だけです。リロードボタンも

初期の画像1 初期の画像2 初期の画像3 初期の画像4 初期の画像5 初期の画像6 初期の画像7 初期の画像8 初期の画像9 
<style>
  .image {
    cursor: pointer;
    width: 200px;
    height: 200px;
    transition: transform 2s;
  }
</style>

<div>
  <img class="image" src="初期の画像1.jpg" alt="初期の画像1">
  <img class="image" src="初期の画像2.jpg" alt="初期の画像2">
  <img class="image" src="初期の画像3.jpg" alt="初期の画像3">
  <img class="image" src="初期の画像4.jpg" alt="初期の画像4">
  <img class="image" src="初期の画像5.jpg" alt="初期の画像5">
  <img class="image" src="初期の画像6.jpg" alt="初期の画像6">
  <img class="image" src="初期の画像7.jpg" alt="初期の画像7">
  <img class="image" src="初期の画像8.jpg" alt="初期の画像8">
  <img class="image" src="初期の画像9.jpg" alt="初期の画像9">
</div>

<script>
  var images = document.getElementsByClassName("image");
  var clicked = false;

  function handleClick(event) {
    if (!clicked) {
      clicked = true;
      var self = event.target;
      self.style.transform = "rotate(450deg)";

      setTimeout(function() {
        var newImages = [
          "新しい画像1.jpg",
          "新しい画像2.jpg",
          "新しい画像3.jpg",
          "新しい画像4.jpg",
          "新しい画像5.jpg",
          "新しい画像6.jpg",
          "新しい画像7.jpg",
          "新しい画像8.jpg",
          "新しい画像9.jpg"
        ];

        for (var i = 0; i < images.length; i++) {
          var randomIndex = Math.floor(Math.random() * newImages.length);
          images[i].src = newImages[randomIndex];
          newImages.splice(randomIndex, 1);
        }

        self.style.transform = "rotate(1080deg)";
      }, 2000);
    }
  }

  for (var i = 0; i < images.length; i++) {
    images[i].addEventListener("click", handleClick);
  }
</script>
  1. WordPressの管理画面にログインします。
  2. 「投稿」または「ページ」を選択し、新規作成または編集します。カスタムHTMLを追加する投稿またはページを選択してください。
  3. クラシックエディタを使用している場合：
    • テキストエディタに切り替えるために、「テキスト」タブをクリックします。
    • カスタムHTMLを追加したい位置にカーソルを置きます。
    ブロックエディタ（Gutenberg）を使用している場合：
    • ブロックエディタ内の適切なブロック（例：「カスタムHTML」ブロック）を選択します。
    • ブロック内にカーソルを置きます。
  4. カスタムHTML内に、以下のコードを追加します。
  5. 変更を保存します。投稿またはページを公開または更新することで、カスタムHTMLが反映されます。

上記のコードでは、9枚の画像要素を作成し、クリック後にアニメーションと画像の差し替えを行います。

JavaScriptコードでは、クリックイベントの処理を定義し、クリックされた画像に対してアニメーションと画像の差し替えを実行しています。変数clickedはクリックの制限を管理するために使用され、初期値はfalseです。クリックイベントが発生した場合、clickedの値がfalseの場合にのみアニメーションと画像の差し替えが行われます。

アニメーションにはCSSのtransitionプロパティとtransformプロパティを使用しており、2秒かけて回転します。また、ランダムな画像の選択には、新しい画像のパスを含むnewImages配列を使用しています。各画像要素は、ランダムに選択した画像を設定し、rotate(1080deg)で最終的な回転位置を指定します。

このカスタムHTMLを使用すると、9枚の画像が表示され、クリックするとアニメーションが実行され、2秒後にランダムな新しい画像に差し替えられます。また、クリックは1回のみ有効で、2回目以降のクリックではアニメーションや画像の差し替えは行われません。

JavaScript