急に「ブログにクイズいれてぇなぁ……」と思いまして、探したらありました。
WordPressプラグイン「ARI Stream Quiz」。かなり使い勝手がよくて気に入っています。動作も軽量かと。SNSシェアに結果も載せられますし。
以下、ざっくりとした導入や操作方法、カスタマイズなどをメモがてら書いておきます。インストール方法は書かなくても皆さんわかると思うので飛ばします。
この記事の目次
デモページ
お試しクイズ
プラグインのテストがてら、↑のようなページを作ってみました。（作品内容知らなくても動作確認にどうぞ）
公式
スクリーンショットは↑の公式ページが参考になります。
画像つきのクイズもカンタンに作れます。
日本語化は？
現在（2018年）日本語化はされていません。
ただ、Chromeブラウザを右クリック→「翻訳」で十分わかるレベルだと思います。
UIが非常に直感的でわかりやすいんですよ。
UIスクショ
UIがめちゃくちゃわかりやすい……。日本語化とか要らないレベルかと。
問題をサクサク追加できます。画像も入れられるし、回答の入れ替えもラクチン。
また、設定で「回答のランダム配置」もできます。なのでいちいち回答の順番に気を遣う必要もなくて良いです。
テーマに「buzzfeed」とあるように、かなりBuzzFeedの雰囲気に近く作れるかと。
設定項目部分はわからなければChromeで翻訳してください。
その他、表示に関する設定や、Twitter等のシェアに関する設定もあります。
リザルト画面も一工夫できます。「あなたは○問中○問正解だから何レベルです！」みたいな遊び心も可能と。それに応じたテキストも設定できます。
デザインカスタマイズ
Chromeブラウザで該当箇所を右クリック→「検証」で各CSS項目探し出して、だいたい「!important」で上書きしていきました。
以下、ざっくりと。
「Share your result via」を別の文字に
プラグインのphpいじるのがイヤだったので、子テーマのCSSで上書きしました。
div.share-title{
font-size: 0px !important;
}
div.share-title:before {font-size: 16px; content: "結果をみんなとシェアしよう！";}
まず元の文章を「font-size: 0px !important」で消します。（フォントサイズをゼロにして、「これ重要だから優先してね命令（!important）」で上書きした）
そして「div.share-title:before {font-size: 16px; content: “結果をみんなとシェアしよう！”;}」で、CSSでムリヤリ文章を追加しました。「:before」で元の文章の上にもってこれる。
なおこれ、たぶんバットノウハウです（自分はラクだから使ってますが）。元の文章のほうがSEO的には検出されると思いますのであしからずです。
背景色とかフォントサイズ
.quiz-question-answer{
background-color: transparent !important;
border: 1.5px solid #aaaaaa !important;
}
.asq-theme, .asq-theme-buzzfeed, .quiz-result, .asq-theme.asq-theme-buzzfeed, .quiz-section{
background-color: transparent !important;
}
.asq-theme.asq-theme-buzzfeed div.quiz-question-answer-correct{
background-color: #6bc93c !important;
}
div.quiz-score{
font-size: 28px !important;
margin-top: 30px;
margin-bottom: 30px !important;
}
div.result-title{
font-size: 24px !important;
}
↑はクラス名だけ参考にしていただければ。背景色やフォントサイズは、お好みで上書き編集してください。
シェアテキストを変更【追記】
「Settings」から「Sharing」へ。
こんな風に書き換えればツイート用のリザルトテキストなどを変更できます。
「correct」と「wrong」を書き換える【追記】
.quiz-question-result {
font-size: 0px !important;
}
.quiz-icon-wrong:after {
content: "不正解！";
font-size: 25px;
}
.quiz-icon-correct:after {
content: "正解！";
font-size: 25px;
}
上記コードをCSSに追記すればOK。
なにをしているかというと、「correct」「wrong」のフォントサイズを0にして非表示にし、afterで「正解！」「不正解！」を追加してます。力業ですね。
まとめ
「ARI Stream Quiz」オススメです。UIはわかりやすく、BuzzFeedを露骨に意識しているなどユーザーの需要もちゃんと理解してる感が素晴らしいなと。カスタマイズ性もけっこう高いと思います。
今回は以上です。良きクイズライフを────ではまたφ(・ω・ )
読み込み中 ...
▼ WordPressを高速で動かしたいなら
