テキスト読み上げツールを作る第4回：WordPressに設置して、お役立ちツールとして公開する方法

はじめに

これまでの記事では、HTML・CSS・JavaScriptを使って、テキスト読み上げツールを作る方法を解説しました。

今回は、完成したツールをWordPressに設置し、お役立ちWebツールとして公開する方法を紹介します。

WordPressであれば、固定ページや投稿ページにコードを貼り付けるだけでも設置できます。

テキスト読み上げツール

公開するページの目的を決める

まず、ページの目的を明確にします。

今回のツールは、入力した文章を音声で読み上げるためのページです。

そのため、ページ名は分かりやすくする必要があります。

おすすめのページ名は次の通りです。

ページ名	特徴
テキスト読み上げツール	検索されやすい
文章読み上げツール	用途が伝わりやすい
日本語読み上げツール	日本語用途が明確
音声読み上げツール	機能名として分かりやすい

SEOを意識するなら、ページタイトルは次のようにすると自然です。

テキスト読み上げツール｜入力した文章を音声で読み上げ

WordPressに設置する方法

WordPressに設置する場合は、固定ページを作成します。

基本的な流れは次の通りです。

WordPress管理画面にログイン
固定ページを新規追加
タイトルを入力
カスタムHTMLブロックを追加
完成コードを貼り付け
プレビューで動作確認
問題なければ公開

ブロックエディターを使っている場合は、「カスタムHTML」ブロックにコードを貼り付けます。

カスタムHTMLブロックに貼る理由

通常の段落ブロックにコードを貼ると、HTMLとして実行されず、文字として表示されてしまう場合があります。

そのため、HTML、CSS、JavaScriptをまとめて貼る場合は、カスタムHTMLブロックを使います。

特に、次のようなコードを含む場合はカスタムHTMLブロックが適しています。

<div class="tts-service">
  <textarea id="ttsText"></textarea>
  <button type="button" id="speakBtn">読み上げる</button>
</div>

設置時の注意点

WordPressにJavaScriptを貼り付ける場合、いくつか注意点があります。

1. セキュリティ系プラグインでscriptタグが制限される場合がある

一部の環境では、投稿や固定ページ内の <script> タグが削除される場合があります。

その場合は、テーマのカスタムHTML、Code Snippets系プラグイン、または子テーマのJavaScriptファイルとして読み込む方法を検討します。

2. 同じIDを複数ページに置かない

同じページ内に同じツールを複数配置すると、IDが重複して動作が不安定になる場合があります。

今回のコードでは、次のようなIDを使っています。

ttsText
voiceSelect
speakBtn
pauseBtn
resumeBtn
stopBtn
clearBtn
ttsStatus

同じページ内に複数設置する場合は、ID名を分ける必要があります。

3. テーマやプラグインのCSSと干渉する場合がある

WordPressテーマによっては、ボタンや入力欄に独自のCSSが当たる場合があります。

そのため、CSSでは .tts-service の中だけに効くように指定しています。

.tts-service button {
  padding: 11px 18px;
}

このように書くことで、サイト全体のボタンではなく、読み上げツール内のボタンだけを調整できます。

SEO用の本文も追加する

ツールだけを置いたページは、検索エンジンから「内容が少ないページ」と判断される可能性があります。

そのため、ツールの下に説明文を追加するとよいです。

たとえば、次のような内容を入れます。

テキスト読み上げツールとは

テキスト読み上げツールは、入力した文章を音声で読み上げるためのWebツールです。

文章の確認、読み間違いのチェック、音読練習、原稿確認などに利用できます。

ブラウザ上で動作するため、特別なソフトをインストールする必要はありません。

このツールの主な使い道

文章の読み上げ確認
ブログ記事や原稿の確認
日本語学習の補助
音読練習
目で読むのが負担な文章の確認
プレゼン原稿のチェック

このように、利用シーンを具体的に書くことで、ページ内容が充実します。

使い方の説明を入れる

ユーザー向けに、使い方も記載しておくと親切です。

1. 入力欄に読み上げたい文章を入力します。
2. 必要に応じて、音声、速度、高さ、音量を調整します。
3. 「読み上げる」ボタンを押します。
4. 読み上げを止めたい場合は「停止」を押します。
5. 入力内容を消したい場合は「クリア」を押します。

操作手順があると、初めて利用するユーザーにも分かりやすくなります。

よくある質問を入れる

お役立ちツールページには、よくある質問を入れるのも効果的です。

Q. 無料で使えますか？

はい。ブラウザ上で動作するため、無料で利用できます。

Q. 入力した文章は保存されますか？

このツールは、入力された文章をサーバーに保存しない設計です。

ただし、サイト側で別途アクセス解析や入力保存処理を追加している場合は、その仕様に従います。

Q. 音声の種類が少ないのはなぜですか？

利用できる音声は、ブラウザや端末に依存します。

端末によっては日本語音声が少ない場合があります。

Q. スマホでも使えますか？

スマホのブラウザでも利用できます。

ただし、端末やブラウザによって音声の種類や読み上げ品質に差があります。

Q. 長文も読み上げできますか？

長文も読み上げできますが、非常に長い文章では途中で止まる場合があります。

安定して利用するには、文章を短めに分けるのがおすすめです。

ページ構成のおすすめ

公開ページは、次のような構成にすると分かりやすいです。

タイトル
説明文
読み上げツール本体
使い方
このツールでできること
活用シーン
注意点
よくある質問
関連ツールへのリンク

ツール本体だけでなく、説明文やFAQを入れることで、検索にもユーザーにも分かりやすいページになります。

関連ツール	内容
文字数カウント	入力文の文字数を数える
原稿読み上げ時間計算	文字数から読み上げ時間を計算
ひらがな変換ツール	漢字をひらがなに変換
カタカナ変換ツール	文字をカタカナに変換
音読練習ツール	読み上げと練習用UIを組み合わせる

まとめ

テキスト読み上げツールは、WordPressにも比較的簡単に設置できます。

HTML・CSS・JavaScriptだけで動くため、固定ページに設置しやすく、お役立ちツールサイトとも相性が良いです。

公開時には、ツール本体だけでなく、使い方、注意点、FAQ、関連ツールへのリンクも入れると、ページの価値が高まります。

4本の記事を通して、次の流れで実装できました。

回	内容
第1回	全体像と仕組み
第2回	HTMLとCSSで画面作成
第3回	JavaScriptで読み上げ機能実装
第4回	WordPress設置と公開方法