すんこのアトリエとうぐいす工房

ゼロから始めるパソコン生活

【はてなブログ】無料で簡単!診断コンテンツの作り方

f:id:sunko-chan:20211221161350p:plain

診断ツールと言ってもいろんな種類があると思いますが、
今回は質問が次々と表示されそれに答えていくと
最終的に1つの結果にたどり着く診断ツールを作っていきたいと思います。

以下のページにあるようなものですね。
あなたにおすすめのオリジナルグッズ制作サイト診断

選択肢を選んだら次の選択肢、そしてまた次の選択肢と、
結果が表示されるまで分岐していくので、
質問の数に応じて分岐分の質問と結果を用意する必要があります。

質問が2個で選択肢が2個の場合は、質問が3個、結果が4個の計7個、
質問が3個で選択肢が2個の場合は質問が7個、結果が8個の計15個
設定する必要があるわけです。

質問部分(html部分)は自分で調整していかなければならないので
少し面倒ですが、設定自体は簡単なので頑張っていきましょう!

診断ツールのコード

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

上記のコードはすでにheadに追加してあれば必要ありません。
初めてjqueryを使う人はheadに追加します。

はてなブログの場合は、設定→詳細設定と進み、
<head>要素にメタデータを追加のところです。

html

<div class="choose_box">
<div id="qs_01" class="fit">
<p>質問1</p>
<ul>
<li><a class="btn" href="#qs_02">選択肢1</a></li>
<li><a class="btn" href="#qs_03">選択肢2</a></li>
</ul>
</div>
<div id="qs_02" style="display: none;">
<p>質問2</p>
<ul>
<li><a class="btn" href="#qs_03">選択肢2</a></li>
<li><a class="btn" href="#qs_03">選択肢2</a></li>
</ul>
</div>
<div id="qs_03" style="display: none;">
<p>質問2</p>
<ul>
<li><a class="btn" href="#qs_04">選択肢2</a></li>
<li><a class="btn" href="#qs_04">選択肢2</a></li>
</ul>
</div>
<div id="qs_04" style="display: none;">
<p>説明文<br>改行もできます。</p>
<p>画像も貼れます。<img src="画像のURL" alt="代替テキスト"></p>
<ul>
<li><a class="btn" href="#qs_05">結果を表示</a></li>
</ul>
</div>
<div id="qs_05" style="display: none;">
<p>リンクも貼れるよ。<a href="リンク先のURL">リンクにするテキスト</a></p>
<ul>
<li><a class="btn" href="#qs_01">もどる</a></li>
</ul>
</div>
</div>

htmlはこのまま貼り付けても機能はしますが、
どれを選んでも同じ結果表示になるので、これを参考にカスタムしてください。

基本は選択肢のhrefと選んだ選択肢に対応する質問のdvd idを同じにしていく感じです。

CSS

<style>
.choose_box {
  width: 100%;
}

 .choose_box p {
  margin-top: 5%;
  margin-bottom: 10%;
  font-size: 24px;
  display: block;
  font-weight: bold;
  text-align: center;
}

.choose_box li {
  display: inline-block;
  width: 80%;
  margin: 1%;
  list-style: none;
}

ul {
  width: 80%;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

.choose_box ul li a {
  color: #fff;
  display: block;
  padding: 8px;
  text-align: center;
  white-space: nowrap;
  background-color: #2791d4;
  font-weight: bold;
  font-size: 18px;
  border: 2px solid #2791d4;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.choose_box ul li a:hover {
  background-color: #fff;
  color: #2791d4;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.fit {
  width:100%;
  border: 5px double #fc4a1a;
}
</style>

CSSはこのまま貼り付ければ大丈夫ですが、カスタムすることもできます。

script

<script>
$(function () {
		$(".btn").on("click", function () {
			$(this).closest("div").css("display", "none");
			id = $(this).attr("href");
			$(id).addClass("fit").fadeIn("slow").show();
			});
	});
</script>

scriptもこのまま貼り付ければ大丈夫ですが、
htmlでidやclass名を変更した場合は
対応した箇所も同じid、class名に変更する必要があります。

コードの説明

まずはhtmlからです。

<div class="choose_box">

class名は任意の文字で大丈夫ですが、
それぞれscriptとCSSに対応しているのでそちらと合わせる必要があります。

<div id="qs_01" class="fit">
<p>質問1</p>
<ul>
<li><a class="btn" href="#q_02">選択肢1</a></li>
<li><a class="btn" href="#q_03">選択肢2</a></li>
</ul>
</div>

<div id="q_02" style="display: none;">
<p>質問2</p>
<ul>
<li><a class="btn" href="#q_03">選択肢2</a></li>
<li><a class="btn" href="#q_03">選択肢2</a></li>
</ul>
</div>

<div id="qs_04" style="display: none;">
<p>説明文<br>改行もできます。</p>
<p>画像も貼れます。<img src="画像のURL" alt="代替テキスト"></p>
<ul>
<li><a class="btn" href="#qs_05">結果を表示</a></li>
</ul>
</div>

<div id="qs_05" style="display: none;">
<p>リンクも貼れるよ。<a href="リンク先のURL">リンクにするテキスト</a></p>
<ul>
<li><a class="btn" href="#qs_01">もどる</a></li>
</ul>
</div>

質問や選択肢をここで設定していきます。
div idはその質問のアドレスみたいなものになります。
任意の文字で大丈夫ですが、管理しやすいように連番にした方がいいです。

class="fit"はCSSで使用するのでそこと合わせればなんでも。

二問目以降はstyle="display: none;"にします。
普段は表示しないと言う設定ですね。
これでクリックするたびに質問が変わる感じになるわけです。

質問を増やす場合はstyle="display: none;"の方で追加していきます。

<div id="qs_01" class="fit">
<p>質問1</p>
<ul>
<li><a class="btn" href="#q_02">選択肢1</a></li>
<li><a class="btn" href="#q_03">選択肢2</a></li>
<li><a class="btn" href="#q_03">選択肢3</a></li>
</ul>
</div>

上のように<li><a class="btn" href="#q_02">選択肢1</a></li>の部分を増やすことで
選択肢を増やすことができます。

href="#~"の~の部分は次に表示する質問のdiv idを設定します。

診断結果のところでは
<li><a class="btn" href="#qs_01">もどる</a></li>
と言う風に最初の質問にリンクすることで何回でも診断できるように設定できます。

<img src="画像のURL" alt="代替テキスト">
<a href="リンク先のURL">リンクにするテキスト</a>を用いて
画像やリンクを貼ることもできます。

次はCSSを見ていきましょう。

.choose_box {
  width: 100%;
}

一番最初に設定したdiv classと同じ文字列になるようにします。
ここではchoose_boxですね。

width: 100%;でサイズを設定しています。

 .choose_box p {
    margin-top: 5%;
    margin-bottom: 10%;
    font-size: 24px;
    display: block;
    font-weight: bold;
    text-align: center;
}

ここでpタグのスタイルを設定します。
質問や説明文の部分ですね。

margin-topとmargin-bottomでそれぞれ上下の余白、
font-sizeでテキストの大きさ、
display: block;で要素を縦に配置、
font-weight: bold;でテキストを太字、
text-align: center;でテキストを中央揃えです。

.choose_box li {
  display: inline-block;
  width: 80%;
  margin: 1%;
  list-style: none;
}

こちらはliタグのスタイル設定です。
選択肢やもどるの部分をどう表示するかの設定ですね。

display: inline-block;で要素を並列配置、
width:で選択肢の幅、
marginで余白を設定。

liタグでリスト表示した場合、リストの横に・などの記号がひょうじされるので、
list-style: none;で非表示にしています。

ul {
  width: 80%;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}

ulタグのスタイル設定です。
リスト全体の表示設定になります。

widthでリストの表示幅、
padding: 0 5%;でリストの余白を設定します。
0 5%で上下余白なし、左右に5%の余白になります。

ちなみにpaddingは
・値が1個の場合、上下左右に適用。
・値が2個の場合、1個目は上下、2個目は左右に適用。
・値が3個の場合、左からそれぞれ上、左右、下の順に適用。
・値が4個の場合、左からそれぞれ上、右、下、左の順に適用。
となります。

display: flex;で要素を並列配置、
justify-content: center;で左右の中央寄せ、
flex-wrap: nowrap;で改行なしです。

ちなみに上下の中央寄せはalign-items: center;、
左寄せまたは上寄せはcenterの代わりにflex-start、
右寄せまたは下寄せはcenterの代わりにflex-endを用います。

つまり
justify-content: flex-end
align-items: flex-end
で右下寄せになる感じです。

.choose_box ul li a {
  color: #fff;
  display: block;
  padding: 8px;
  text-align: center;
  white-space: nowrap;
  background-color: #2791d4;
  font-weight: bold;
  font-size: 18px;
  border: 2px solid #2791d4;
  text-decoration: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

ここは選択肢のデザインです。
ここはそんなに難しくないのでサクッといきます。

colorでテキストカラー、
display: block;で要素を縦並びに、
paddingで余白。

text-align: center;でテキストを中央寄せ、
white-space: nowrap;で改行なし、
background-colorで背景の色を。

font-weight: bold;でテキストを太字に、
font-sizeでフォントサイズを指定、
borderで枠を作成、
borderは線の太さ、線の種類、線の色と設定します。

text-decoration: none;はテキストの装飾を無効にします。
選択肢はリンクなので、これを設定しないと選択肢に下線が表示されてしまいます。

border-radiusは枠の四隅の丸みの設定ですね。
数値が大きいほど丸みが増します。
ちなみに50%にすると丸になります。

  • webkit-border-radius
  • moz-border-radius

はそれぞれSafari、Google Chrome用、Firefox用です。

.choose_box ul li a:hover {
  background-color: #fff;
  color: #2791d4;
  -webkit-transition: 0.7s;
  -moz-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

こちらは選択肢にカーソルを合わせた時にアニメーションさせる設定です。

カーソルを合わせた時のテキストと背景の色を設定し、
transitionで変化する時間を指定します。

  • webkit、-moz、-oはそれぞれChrome、Safariなど、Firefox、Opera用です。
.fit {
  border: 5px double #fc4a1a;
}

最後、診断ツール全体の設定です。

borderで枠を設定ですね。

最後にscript。

$(function () {
		$(".btn").on("click", function () {
			$(this).closest("div").css("display", "none");
			id = $(this).attr("href");
			$(id).addClass("fit").fadeIn("slow").show();
			});
	});

クリックした時に現在表示している質問を非表示にして、
クリックした選択肢のhrefの値をidとし、class="fit"を追加して、
表示するというスクリプトです。

fitだった質問1をdisplay: none;にして非表示、
同時に選択した回答先のdisplay: none;をfitに変えて表示、
以降その繰り返しって感じです。

選択したら今の質問を消して、次の質問を表示するって事ですね。

デザインが崩れる場合は

このまま導入するとデザインが崩れる場合があります。
私ははてなブログで導入した時にアーカイブや最新記事などが
上手く表示されなくなりました…

クラス名が被ってしまっているためだと思われます。
その場合はクラス名を変更するとうまくいく場合があります。

私はclass="fit"を変更したらうまくいきました。
変更したらスクリプトのaddClass("fit")の部分も変更するのを忘れずに。

まとめ

質問数が増えると設定項目が倍増していく。
style="display: none;"で選択中の質問以外は非表示にしておく。
選択肢をクリックしたらその質問にdispley:noneを付与して非表示にする。
選んだ選択肢のhrefを取得してidとし、
そのidの質問に表示させるclass(今回はfit)を付与して表示させる。

設置してデザインが崩れた場合はid、class名を他のにしてみる。

質問に答えていくとおすすめのものを教えてくれるってやつ、
やりたかったんですよね。

デザインを凝ったりとかいろいろできそうだけど、今回はここまで。

質問数が増えると設定項目が増えて、
こんがらがってくるのでやり始める前に全体像を紙かなんかに書いて
見ながらやった方がいいです。