【WordPress】クイズプラグイン「ARI Stream Quiz」でBuzzFeed気分に

情報をシェアしよう

急に「ブログにクイズいれてぇなぁ……」と思いまして、探したらありました。


WordPressプラグイン「ARI Stream Quiz」。かなり使い勝手がよくて気に入っています。動作も軽量かと。SNSシェアに結果も載せられますし。


以下、ざっくりとした導入や操作方法、カスタマイズなどをメモがてら書いておきます。インストール方法は書かなくても皆さんわかると思うので飛ばします。

スポンサーリンク

デモページ

お試しクイズ

プラグインのテストがてら、『キミはキメラ』のクイズを作りました。 お暇でしたらやってみてください。使用させて頂いたWord...

プラグインのテストがてら、↑のようなページを作ってみました。(作品内容知らなくても動作確認にどうぞ)

公式

Easy to use WordPress Viral Quiz Plugin. Create Trivia and Personality quizzes in BuzzFeed style and collect unlimited leads.

スクリーンショットは↑の公式ページが参考になります。


画像つきのクイズもカンタンに作れます

日本語化は?

現在(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を露骨に意識しているなどユーザーの需要もちゃんと理解してる感が素晴らしいなと。カスタマイズ性もけっこう高いと思います。


今回は以上です。良きクイズライフを────ではまたφ(・ω・ )

【アンケ】クイズ番組といえば?

結果を見る

読み込み中 ... 読み込み中 ...

スポンサーリンク