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

 

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


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


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

 

スポンサーリンク

デモページ

 

お試しクイズ

キミはキメラクイズ!(全12問)

 

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

 

公式

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


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

 

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

結果を見る

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

 

▼ WordPressを高速で動かしたいなら

WordPress
役立つ情報はシェアしよう
執筆者をフォローしよう
おすすめレンタルサーバー
Mixhost

このサイトで利用中。初期費用なし、お手頃価格でWordPressを高速化。クラウド型だからプラン変更も即時&ラクチン。アダルトOKなので同人サイトも自由につくれます。

エックスサーバー

初心者のWordPress運用といえばコレみたいな定番サーバー。性能はMixHostと近いですが、初期費用と長期契約の面でややコスト増。使用者が多いので検索するとほしい情報がすぐみつかるのは助かります。

ConoHa WING

「最速」ならコレ。初期費用なしですが、やや月額高め。徹底して速さを求めるガチ勢むけ。

StarGazer – スタゲ
タイトルとURLをコピーしました