1.0.1Release

README.md

@@ -3,3 +3,12 @@
 タグを貼ればbody内を読み上げてくれます！
 ![image](https://github.com/user-attachments/assets/461331d5-498c-4454-8d91-8664b0de7ffc)
 動作イメージ
+```
+<script src="siteembeddreader.min.js"></script>
+```
+と
+```
+<div class="rb-1"></div>
+```
+を任意の場所に設置するだけです。
+※divはどのブロック要素でも問題ありません。

raw/script/siteembeddreader.js

@@ -0,0 +1,19 @@
+    document.getElementById("pbtn").innerText = "▼";
+
+    function ltts() {
+      if (document.getElementById("pbtn").className.indexOf("r-now") !== -1) {
+        document.getElementById("pbtn").classList.remove('r-now');
+        document.getElementById("pbtn").classList.add('r-pause');
+        document.getElementById("pbtn").innerText = "▼";
+        speechSynthesis.cancel();
+      } else {
+        document.getElementById("pbtn").classList.remove('r-pause');
+        document.getElementById("pbtn").classList.add("r-now");
+        document.getElementById("pbtn").innerText = "=";
+        var icontent = document.body.innerText;
+        voices = speechSynthesis.getVoices();
+        const uttr = new SpeechSynthesisUtterance(icontent);
+        uttr.voice = voices[182];
+        speechSynthesis.speak(uttr);
+      }
+    }

raw/styles/siteembeddreaderstyle.css

@@ -0,0 +1,32 @@
+.rb-1 {
+    cursor:pointer;
+    display: inline-flex;
+    padding: 0px;
+    border-radius: 20px;
+    background: linear-gradient(90deg, rgba(120, 119, 131, 1) 0%, rgba(173, 173, 173, 1) 35%, rgba(131, 194, 195, 1) 73%, rgba(81, 196, 219, 1) 100%);
+    object-fit: contain;
+    background-size: contain;
+    color: #fff;
+    align-items: center;
+  }
+
+  .l-box-2::before {
+    content: " ";
+    height: 100%;
+    border-left: solid 1px #fefefe;
+    margin-right: 10px;
+  }
+
+  .l-box-2 {
+    margin: 10px;
+  }
+
+  .r-box-2 {
+    margin-left: 15px;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .pbtn-p {
+    transform: rotate(-90deg);
+  }