こんばんは、しゃーろです。
今、オンライン日本語教師として活動するためにオリジナル教材を作成しているのですが、WordPressで楽しいクイズゲーム的なものを作れたらいいなと思いました。
僕が作りたいと思っているのは、
音声ボタンを押したら「たべる」という音が流れ、生徒がその下にある3枚の画像の中から「たべる」に該当するものを選ぶ
というものです。
「これを作るのは容易ではない」と思ったのですが、プラグインを使ったら案外簡単に作成できたので、この記事で紹介したいと思います。
今回作成したのは以下です。
本教材の一部は MITライセンス のもとで提供されています。
© 2025 H5P.org contributors / MIT License
マイクもなく、音質が悪いかもしれませんが、テストなので許してください笑
このようなクイズ以外にも出来ることがたくさんあるみたいなので、他にも作ったものがあれば随時紹介したいと思っています。
プラグインの準備
今回の主役となるプラグインは「Interactive Content – H5P」というものです。
こちらをインストール・有効化していきます。

2025年10月15日現在では上のようなビジュアルで、最終更新が1年前なので少し不安でした。
また、使用中のWordpressバージョンで未検証ということだったのですが、問題なく使えたので良かったです。
他にも似たようなプラグインがたくさんあるのですが、今回使っていくのは上画像のものになります。
コンテンツをインストール

プラグインをインストールしたら、Wordpressのダッシュボードから「H5Pコンテンツ」→「新規追加」と進みます。

インストールして有効化したら、上のような画面になると思うので、「I consent, give me the Hub!」をクリックします。

読み込みに多少時間がかかりますが、読み込んだ後は上のようなページが表示されると思います。
一覧の中から「Multimedia Choice」を探し、「↓Get」をクリックします。

そうしたら、右下の「↓Install」をクリックしましょう。
ライセンスについて
ちなみに、その下に「License」という記載があると思います。
ここを読んでみると、
と書かれています。
なので、以下のような記載を、ページの下や利用素材一覧にまとめて記載しておくのがいいみたいですね。
(カスタムHTMLに貼り付ければ大丈夫です)
「追記」

コンテンツを作成したときに、上画像のように右下に著作権ボタンが表示されます。
このボタンを表示していれば、クレジット表記は必要ないみたいです。
ただ、これは非表示にすることもできます。

こちらはコンテンツの編集画面右端で、表示オプションの設定が可能です。
非表示にする場合は、クレジット表記を必ずするようにしましょう。
英語版↓
<p style="font-size: 12px; color: #888;">
Some interactive elements on this site use H5P components licensed under the MIT License.<br>
© 2025 H5P.org contributors / MIT License
</p>
日本語版↓
<p style="font-size: 12px; color: #888;">
本教材の一部は MITライセンス のもとで提供されています。<br>
© 2025 H5P.org contributors / MIT License
</p>
または、「使用素材・ライセンス情報」などをまとめた固定ページなどを作成して、そこに明記するという方法もあります。
<h2>使用しているオープンソース・素材について</h2>
<p>
本サイトの教材およびコンテンツ制作には、以下のオープンソース素材・フリー素材を利用しています。
</p>
<ul>
<li>H5P(MIT License)</li>
<li>一部の画像素材:Unsplash(Free License)</li>
<li>音声素材:Pixabay(Free for commercial use)</li>
</ul>
<p>
各素材は、ライセンス条件に従い適切に利用しています。
無断転載・二次配布はご遠慮ください。
</p>
クイズを作成
では、実際にクイズを作成していきましょう。
WAF設定がオンだとエラーになる可能性がある。

僕はConoHa WINGをサーバーとして利用しているのですが、ConoHa WINGのWAF設定によって上画像のようにエラーとなり、作成したコンテンツを更新できない場合があります。
あらかじめConoHa WINGのWAFをオフにしておきましょう。
または、サーバーのセキュリティ管理画面から、該当するURLのみ除外しておきましょう。

インストールが出来たら、「Use」をクリックします。

上のような画面になると思うので、「タイトル」と「Question」を自由に入力します。
「Question」が実際に完成したときに表示されるのですが、ここは絶対に記載しなければならないみたいですね。
僕はなるべく文字を使いたくなかったのですが、とりあえず「どれかな?」と入力しておきました。

その下の「Option」に音声や画像を入れていきます。
1番上のOptionのプルダウンから「Audio」を選択しましょう。

Audioを選択したら、ソースファイルの「+」をクリックします。
「Upload audio file」をクリックし、該当する音声ファイルをアップロードします。
その下の設定は特にいじってはいません。

続いて、その下のOptionに画像を入れていきます。
プルダウンから「Image」を選択し、「+ Add」をクリックして画像ファイルをアップロードします。
代替テキストは、何らかの要因で画像が表示できない場合に表示されるテキストを入力します。(必須です)
この作業を表示させたい画像の数だけ繰り返してください。
以下のサイトで、画像を圧縮しながら拡張子も変更できます。

続いて、音声と一致する画像のみ「Correct」にチェックを入れます。
僕の場合であれば、音声が「たべる」なので、「食べている画像」をCorrectとして設定します。

その下の「Overall Feedback」という項目の「Score Range」というものは、正答率によって表示されるテキストを指定できるというものです。
例えば、正答率が0~20%なら「もういちど💦」、21~90%なら「おしい!」91~100%なら「すごい!😀」など。
「ADD RANGE」を押すと細かく調整できます。
その下の設定はお好みで調整してください。(説明が面倒くさいなんて言えない)

最後にページの一番上に戻り、右上にある「作成」をクリックします。
エラーになる場合はこちら↑
表示オプションを設定することもできます。
著作権ボタンを非表示にする場合は、クレジット表記を必ずするようにしましょう。
これでクイズ完成です。
サイトにクイズを表示しよう
では、作成したクイズを早速サイトに表示してみましょう。

クイズの下に小さく「<>埋め込み」と記載されていると思うので、そちらをクリックします。

コードをクリックしたらCtrl + Aで全選択し、Ctrl + Cでコピーします。
Macの場合→全選択「Command + A」、コピー「Command + C」

投稿を新規作成し、コピーしたコードをカスタムHTMLに貼り付けます。
プレビュー画面に切り替えると、実際に作成したクイズを表示することができます。
作成したクイズを再編集する方法
作成したクイズを「やっぱりこうしたい!」って時ももちろんありますよね。
作成したクイズは後から編集することが可能です。

WordPressのダッシュボードから「H5Pコンテンツ」→「すべてのH5Pコンテンツ」と進みます。

そうすると、自分が作成したコンテンツが表示されると思います。
右端の「編集」をクリックすると編集画面に切り替わり、好きなように編集できます。
埋め込みボタンを表示したくない場合
コンテンツを作成したときに「埋め込みボタン」が表示されますが、これがちょっと邪魔だと思うときもありますよね。
また、こちらから誰でもコードがコピーできるので、コンテンツを勝手に使われるのが嫌な人にとっては非表示にしたいはずです。

コンテンツの編集画面で、上のような表示オプション設定ができます。
ここで「埋め込みボタンを非表示」のチェックを外すと、埋め込みボタンがもちろん非表示になるのですが、カスタムHTMLに貼り付けたコードが無効になってしまうみたいです。
なので、
埋め込みボタンは表示されないけど、クイズも表示されない。
もしくはクイズは表示されるけど、埋め込みボタンは消せない。
こんな状況になってしまうんです。
生成される<iframe>埋め込みコード以外にも、それぞれのコンテンツに
のようなショートコードが割り当てられています。これをショートコードに貼り付ければコンテンツが表示されるはずなのですが、僕のWordpressテーマのSWELLのセキュリティのせいなのか、コンテンツが表示されませんでした。
functions.phpをいじったりしたのですが、全く解決せず。
ですが、以下の方法で誰でも簡単に埋め込みコードを非表示にして、コンテンツを表示することが可能です。

まずは、「埋め込みボタンを表示」にチェックを入れたまま、「更新」をクリックします。

そうすると、作成したコンテンツが表示されるので、下にある「<>埋め込み」をクリックします。
表示されたコードをコピーしましょう。

コードがコピー出来たら、右上にある「編集」をクリックし、コンテンツ編集画面に戻ります。

「コンテンツの下にツールバーを表示」からチェックを外し、「更新」をクリックします。
コピーしたコードをカスタムHTMLに貼り付ければ、埋め込みボタンを表示せずにコンテンツのみを表示できます。
このやり方では著作権ボタンも消えてしまうので、クレジット表記は忘れないようにしましょう。

ちなみに、Wordpressのダッシュボードから「設定」→「H5P」と進むと、H5Pの設定ができます。

この画面で表示オプションをデフォルトでオフにしたり出来ます。
ただ、僕の今回のやり方だと最終的にすべて非表示にするので、このままで大丈夫かなと思います。
一度埋め込みボタンも表示させなければならないので笑
【応用】コンテンツに枠をつける
作成したコンテンツは枠がなく、クイズを並べると少しわかりづらい気がしました。
なので、ChatGPTを使って枠をつける方法を調べたら簡単だったので紹介します。
方法は2つあるので、合っている方を試してみてください。
方法1: HTMLブロックに直接style追加
1つ目の方法は、「HTMLブロックに直接style追加する方法」です。
埋め込みボタンから生成したコードを、以下のコードと合体させます。
使用するコード↓
<div style="border: 3px solid #ccc; border-radius: 12px; padding: 20px; box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff;">
<!-- ここにH5Pの埋め込みコードを貼る -->
</div>
上のコードの<!– ここにH5Pの埋め込みコードを貼る –>の部分に埋め込みコードを貼り付けましょう。
そうすると、以下のように灰色の枠がつけられます。
本教材の一部は MITライセンス のもとで提供されています。
© 2025 H5P.org contributors / MIT License
枠線の色や丸み、背景色や内側の余白などは自由に変えることができます。
変えたい方はChatGPTなどを活用して試してみてください。
方法2: CSSクラスを定義
2つ目の方法は、「CSSクラスを定義する方法」です。
これをすると、他のH5Pコンテンツにも同じスタイルが適用されます。
ただ、埋め込みコードのみでは不十分なので、結局カスタムHTMLを多少編集する必要があります。

WordPressのダッシュボードから「外観」→「カスタマイズ」と進みます。

追加CSSを選択し、以下のコードを貼り付けて「公開」をクリックします。
.h5p-box {
border: 2px solid #d0d0d0;
border-radius: 10px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
margin: 30px 0;
}
投稿編集画面に戻り、カスタムHTMLに以下のコードを貼り付けます。
<div class="h5p-box">
<!-- ここにH5Pの埋め込みコードを貼る -->
</div>
上のコードの<!– ここにH5Pの埋め込みコードを貼る –>の部分に埋め込みコードを貼り付けます。
これで、方法1と同じように枠をつけることができます。
毎回HTMLを書くのが面倒くさい方は、再利用ブロックなどに登録しておくと、何回も同じものを呼び出せるので便利です。
まとめ
いかがだったでしょうか?
今回は、Wordpressのプラグイン「Interactive Content – H5P」を使用して、オリジナルのクイズコンテンツを作成してみました。
僕もWordpressでクイズを作ったりするのは初めてだったので多少手間取ったのですが、慣れれば簡単にクイズを作成できそうです。
他にもいろいろなコンテンツが作れるみたいなので、機会があれば試してみたいと思います。
この記事が少しでも役に立ったら嬉しいです。
最後まで読んでいただき、ありがとうございました!
