ブログに音声読み上げボタンを設置する方法
このページでは、ブログ記事を音声で読み上げるプレイヤー（再生・一時停止・停止ボタン付き）を無料で作れます。読み上げには閲覧者のブラウザに内蔵された音声合成機能を使うので、プラグインのインストールや音声ファイルの用意は必要ありません。作ったコードを記事に貼るだけで、読者は記事を「聞く」こともできるようになります。
3ステップで設置する
- プレビューで確認する：上の「1. プレビュー」の再生ボタンで、サンプル記事の読み上げを試せます。
- 見た目と初期設定を決める：「3. カスタマイズ」で色・角の丸み・サイズのほか、最初のモード（全文／結論だけ）や読み上げ速度を設定します。
- HTMLとJSをコピーして貼る：「4. HTMLコード」と「5. JSコード」をコピーし、ブログに貼り付けます。
WordPressでプラグインなしで設置する
- 投稿の編集画面で、プレイヤーを置きたい位置（記事の最初の見出しの前がおすすめ）に「カスタムHTML」ブロックを追加します。
- ブロックの中に、先に「JSコード」、その下に「HTMLコード」を貼り付けます。
- プレビューで再生ボタンが動くことを確認してから、記事を更新します。
WordPressでは、管理者・編集者以外の権限のユーザーが保存すると <script> タグが削除されることがあります。ボタンは表示されるのに読み上げが始まらない場合は、管理者アカウントで貼り付けてください。全記事に設置したい場合は、テーマの「ヘッダー（またはフッター）にコードを追加する」設定にJSコードを入れ、HTMLコードだけを記事に貼る方法もあります。
はてなブログで設置する
記事の編集画面で「HTML編集」タブに切り替え、記事の先頭にJSコードとHTMLコードの順で貼り付けます。プレイヤーは記事本文（はてなブログでは「entry-content」と呼ばれる部分）を自動で探して読み上げます。すべての記事に表示したい場合は、デザイン設定のカスタマイズで記事の上部に表示するHTMLとして登録する方法もあります。
「全文」と「結論だけ」の2つのモード
プレイヤーには、記事の本文をすべて読み上げる「全文モード」と、最後の大見出し（h2）より後ろだけを読み上げる「結論だけモード」があります。記事の最後に「まとめ」の見出しを置いている場合、結論だけモードではまとめの部分だけを短く聞けます。読者はプレイヤー上でモードを切り替えられ、最初にどちらを選んでおくかは「デフォルトモード」で決められます。
読み上げプラグインとの違い
| 項目 | このツール | WordPressの読み上げプラグイン |
|---|---|---|
| インストール | 不要（コードを貼るだけ） | 必要 |
| 使えるブログ | WordPress、はてなブログなど、スクリプトを貼れるブログ | WordPressのみ |
| 音声 | 閲覧者の端末に入っている音声 | プラグインによる（外部の音声合成サービスを使うものもある） |
| 料金 | 無料 | プラグインによる |
対応ブラウザと注意点
- 音声合成に対応したブラウザ（Chrome、Edge、Safari、Firefoxなど）で動きます。対応していないブラウザでは、その旨のメッセージが表示されます。
- 声の種類や聞こえ方は、閲覧者の端末（OS）に入っている音声によって変わります。
- 読者はプレイヤーの詳細設定で、速度・高さ・音量・声を変えられます。
よくある質問
- 無料で使えますか？
- はい、無料です。会員登録も必要ありません。
- 音声ファイルがサーバーに作られますか？
- 作られません。読者のブラウザがその場で記事の文章を読み上げるため、ブログのサーバーに負荷はかかりません。
- スマホでも使えますか？
- 使えます。iPhone・Androidの主要なブラウザで動作します。プレイヤーは画面幅に合わせて表示が変わります。