【wordpress】クイズパーツ導入でブログをもっと楽しめる記事にする

Webエンジニア兼ブロガーの野うさぎです。

私は「読者にもっと楽しんでもらえるようなコンテンツを作るにはどうしたらいいだろう？」と日々模索しています。

以前私はこんな記事を書きました。

【クイズ形式】有名企業の名作キャッチコピー 30個まとめ野うさぎです。皆さんは自分のキャッチコピーってありますか？有名な会社やサービスには、それぞれパッと聞いて分かるよ...

このブログ内の記事で使っている「クイズ形式で使えるパーツ」が意外と好評だったため、ブロガーさん向けに少しアレンジした形で配布しようと思います。

この記事はこんな人向け

ブログをもっと楽しめるコンテンツにしたい人
ブログ記事のセッション時間を長くしたい人
クイズ形式のブログ記事を書きたい人

それではいってみましょう！

Contents

クイズパーツはどんなブログパーツか
- 実際のパーツの動き
このブログパーツの利用例
このブログパーツの導入方法（1〜2 min）
注意点: 記事内で複数利用する場合
このブログパーツを導入してみた効果
- 記事のセッション継続時間が上がった
まとめ

クイズパーツはどんなブログパーツか

記事内において、回答を隠しておきたい時などに利用できます。

「答えを見る」ボタンをクリック、タップするとあらかじめ仕込んでおいた回答が表示される仕組みになっています。

実際のパーツの動き

Quiz: バイキンマンの宿敵といえば？

答えを見る

Answer: アンパンマン

このブログパーツの利用例

一つの記事内に複数設置できるため、クイズ形式のまとめ記事などに使えるんじゃないかなと思います。

その他、下記のようにテキストを入れ替えることで、記事内で読者に自然に考える時間を与えることもできます。

さて、これまでキングダムの人気キャラについて色々とまとめてきましたが、ここで問題です。今回ご紹介した王騎、騰、廉頗、蒙武、李牧の中で一番人気のキャラは誰でしょう？

答えを見る

Answer: 王騎（NOUSAGI BLOG調べ）

このブログパーツの導入方法（1〜2 min）

WordPressのブログサイトに導入する方法について説明します。手順としてはこんな感じです。

style.cssにcssコードをコピペ
記事投稿画面の「テキスト」エディタにhtmlコードをコピペ
回答テキストなどを書き換え

style.cssにcssコードをコピペ

こちらのコードをstyle.cssにコピー&ペーストしてください。

.mod-quiz {
  margin-top: 50px;
}

.mod-quiz .button-open {
  color: #fff; // ※1 文字色
  background-color: #eda593; // ※2 背景色
  margin-top: 30px;
  font-weight: bold;
  cursor: pointer;
  font-size: 18px;
  border-radius: 5px;
  padding: 10px 15px;
}

.mod-quiz .hidden-input {
  display: none;
}

.mod-quiz .answer {
  margin-top: 30px;
  display: none;
  opacity: 0;
}

.mod-quiz .hidden-input:checked + p {
	display: none;
}

.mod-quiz .hidden-input:checked + .answer, .mod-quiz .hidden-input:checked + p + .answer {
  display: block;
  animation: answerShow 0.3s linear forwards;
}

@keyframes answerShow {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}

ご自身のブログに適したデザインにするためにも、ボタンの文字色（※1）や背景色（※2）は自由に変えてみてください！

コピペする際には // ※ 以降の説明テキストは削除してください。

記事投稿画面の「テキスト」エディタにhtmlコードをコピペ

続いて記事投稿画面に移り、テキストエディター画面に切り替えたら、パーツを配置したい箇所に下記のコードをまるっとコピペします。

<div class="mod-quiz">
  <label for="q-1" class="button-open">答えを見る</label>
  <input id="q-1" class="hidden-input" type="checkbox">
  <div class="answer">
    正解は、◯◯です！
  </div>
</div>

回答テキストなどを書き換え

最後に回答のテキスト（正解は、◯◯です！の部分）を書き換えます。

ボタンのテキストも自由に変えられるので、利用するシーンに合わせて適宜変えてみてください！

注意点: 記事内で複数利用する場合

一つの記事内に複数このパーツを設置する場合は、少しだけコードに手を加える必要があります。といっても2箇所だけです。

先ほどのhtmlコード内のq-1の部分の数字を、パーツごとに記事内で利用する順にq-2、q-3…と変えてあげてください。

クイズ１つ目

<div class="mod-quiz">
  <label for="q-1" class="button-open">答えを見る</label>
  <input id="q-1" class="hidden-input" type="checkbox">
  <div class="answer">
    正解は、徳川家康です！
  </div>
</div>

クイズ２つ目

<div class="mod-quiz">
  <label for="q-2" class="button-open">答えを見る</label>
  <input id="q-2" class="hidden-input" type="checkbox">
  <div class="answer">
    正解は、明智光秀です！
  </div>
</div>

この「q-◯」の部分は、ボタンと回答の紐付けをする記述になっています。

複数利用する際は先ほどのコードをコピペした後、この「q-◯」の部分だけを変えて利用してください。