ワードプレスでクイズのブログを作る場合こたえを一時的に隠したいと思いその方法を探してみました。
例えば
日本で1番高い山はなんですか？
正解は
などとして答えを隠し「正解は」の部分をタップすると答えに飛べるようにする場合です。
答えを隠す方法
クイズのブログで「正解は」をタップすると答えが表示される仕組みをWordPressで実装するには、次の方法がおすすめです。
1. HTMLとCSSで簡単に作成する方法
「答え」を最初は隠しておき、タップすると表示されるシンプルな方法です。
手順
投稿エディタで「カスタムHTMLブロック」を使い、次のコードを挿入します。
html
コードをコピーする
日本で1番高い山はなんですか？
解説
onclick属性で「正解は」をクリックした際に、id=”answer”の要素を表示するように指定しています。
style=”display: none;”で最初は非表示に設定しています。
2. プラグインを使う方法
WordPressのプラグインを使うと、HTMLやCSSを書かずに手軽にクイズやアコーディオン形式のコンテンツを作成できます。
おすすめプラグイン
Shortcodes Ultimate
短いコード（ショートコード）を使って隠しコンテンツを作成できます。
使い方例：
プラグインをインストールし有効化。
投稿エディタに次のショートコードを入力します。
shortcode
コードをコピーする
[su spoiler title=”正解は” style=”fancy”]富士山です。[/su spoiler]
これで「正解は」をクリックすると答えが表示される仕組みが完成します。
Accordion Blocks
アコーディオン形式で答えを隠し、クリックすると表示するコンテンツを作成できます。
3. テーマの機能を活用する方法
お使いのWordPressテーマによっては、アコーディオンやトグルといった機能が標準装備されていることがあります。テーマのブロック機能やショートコードがある場合は、それを活用しましょう。
まとめ
HTMLとCSSを使って手動で作成する。
Shortcodes Ultimateなどのプラグインを使うと手軽に実装できる。
テーマの機能を確認し、専用ブロックを使う。
プラグインを導入すれば、コードが苦手な方でも簡単に仕組みを作成できます。
スポンサードリンク
