カウント付きのいいねボタンに変更

/* ここから、いいねボタン*/
   .like-mark-buttons {
          width: 450px;
          margin: 4em auto;
          display: flex;
          justify-content: center;
          max-width: 100%;
        }
        .like-mark-buttons div {
          text-align: center;
          font-size: 2.4rem;
          display: block;
          padding-top: 12px;
          line-height: 1;
          border-radius: 5px;
          height: 55px;
          width: 55px;
          color: #fff;
        }

    #likeBtn {
     display: block;
	 background-color: #a9a9a9;
     border: none;
     border-radius: 8px;
     padding: 10px 12px;
     font-size: medium;
     color:ffffff;
     transition: background-color 0.3s ease;
     align-items: center;
	 cursor: pointer;
       }
    #likeBtn:hover {transform: scale(1.1);}

	/* ボタン内の画像 */
    button#likeBtn img {
    height: 26px; /* 画像のサイズ調整 */
    vertical-align: middle;
    margin-right: 10px;
  }
   /* カウンタのスタイル */
        #like-span {
        user-select: none;
        display: flex;
        align-items: center;
        margin-left: 1em;
		color: #000;
        }

        @media (max-width: 600px ) {
          .like-mark-buttons {
            width: 100%;
          }
          .like-mark-buttons div {
            padding-top: 12px;
          }
        }

/* ツールチップ設定 */
.tooltip {
  position: relative;}/* ツールチップの位置の基準に */
 /* ツールチップのテキスト */
.tooltip-text {
   opacity: 0; /* はじめは隠しておく */
   visibility: hidden; /* はじめは隠しておく */
   position: absolute; /* 絶対配置 */
   left: 20%; /* 親に対して中央配置 */
   transform: translateX(-50%); /* 親に対して中央配置 */
   top: -50px; /* 親要素上からの位置 */
   display: inline-block;
   padding: 5px; /* 余白 */
   white-space: nowrap; /* テキストを折り返さない */
   font-size: 1.2rem; /* フォントサイズ */
   line-height: 1.3; /* 行間 */
   background: #333; /* 背景色 */
   color: #fff; /* 文字色 */
   border-radius: 3px; /* 角丸 */
   transition: 0.3s ease-in; /* アニメーション */
  }

 /* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}
/*ツールチップを吹き出しに*/
.tooltip-text:before {
	content: '';
	position: absolute;
	bottom: -7px; /* 位置を調整 */
	left: 50%;
	margin-left: -7px;
	width: 14px;
	height: 14px;
	background-color: #333;
	/* box-shadowで三角形に見せる */
	transform: rotate(45deg);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* 影をつけて立体感を出す */
}

<!--いいねボタン表示部-->
 <div class='like-mark-buttons'>
  <form action='GASウェブアプリのURL' method='POST' name='likePostData' style='display:none' target='hidden_iframe'>
	<input expr:value='data:post.title + &quot; | &quot; + data:post.url' id='titleURL' name='titleURL' readonly='readonly' type='text'/>
       <iframe name='hidden_iframe'/>
   </form>

<button id='likeBtn'>
  <span class='tooltip'>
<img alt='いいねアイコン' src='画像のURL'/>
 <span style='color:#ffffff;'>いいね&#65281;</span>
   <span class='tooltip-text'>この記事に いいねする</span>
  </span></button>
 <span id='like-span'/>

<!--JavaScriptエリア-->
<script>/*<![CDATA[*/
let likeSpan, likeBtn, likeInput, titleURL, n;
 
    likeSpan = document.getElementById("like-span");
    likeBtn = document.getElementById("likeBtn");
    likeBtn.addEventListener("click", likeSubmit);
    likeInput = document.getElementById("titleURL");
    titleURL = likeInput.value;
    const param = {titleURL};
    const query = new URLSearchParams(param);
fetch(`GASウェブアプリのURL?${query}`)
  .then(response => response.json())
  .then(likeJson => {
count = likeJson.likeCount;
likeSpan.innerHTML = count;
});
 
function likeSubmit(){
    n = likeSpan.innerHTML;
    n++;
    likeSpan.innerHTML = n;
    likeBtn.disabled = true;

  likeBtn.style.backgroundColor = '#c85554'; // 背景色を変更
  likeSpan.style.color = '#c85554'; //カウンタ色を変更

  // ツールチップのテキスト変更
  const tooltipTextElement = likeBtn.querySelector('.tooltip-text');
  if (tooltipTextElement) {
    tooltipTextElement.textContent = 'いいね済みだよ♡';
  }
  
// 送信後メッセージ表示
setTimeout(function() {
        alert('うれしい！ ありがとう！\nI\'m so happy !');
        document.likePostData.submit();
    }, 1000); // 1000ミリ秒後に実行
}
/*]]>*/</script></div>