【wordpress】クイズパーツ導入でブログをもっと楽しめる記事にする|野うさぎブログ
Web制作

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

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

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

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

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

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

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

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

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

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

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

実際のパーツの動き

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


Answer: アンパンマン

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

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

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

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


Answer: 王騎(NOUSAGI BLOG調べ)

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

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

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

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…と変えてあげてください。

クイズ1つ目

<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つ目

<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-◯」の部分だけを変えて利用してください。

このブログパーツ を導入してみた効果

記事のセッション継続時間が上がった

このパーツを導入したことにより、読者がブログに滞在してくれる時間が長くなりました。

実際に渡しのブログでは、このブログパーツを導入した記事のセッション継続時間がサイト内の他の記事に比べて3〜4倍長くなっています。

読者が記事内で何らかのアクション(今回はクリック、タップ)をすることで、読者の記事に対する没入感が増し、コンテンツを長く楽しんでくれているものだと捉えることができます。

こちらで掲載しているコードに関してはコピペ自由なので、もしこちらを導入してみた場合は、是非 Twitter にて感想をお聞かせください!

まとめ 

ブログサイトにおいてクイズパーツを導入することで 、読者にブログをもっと読み込んでもらえるような仕組みを作ることができました。

このパーツ作成は実験的なものですので、 良ければ拡散&効果の程をお聞かせいただけると嬉しいです!

ではではノシ