【診断に使える】YES・NOチャートをWordPressで作る

Twitterでたまにトレンドに入る「診断メーカー」や「診断ドットコム」のような診断ツールをブログにも取り入れたい！

そう思い作ったのがこちら。

30秒診断

あなたの余命はあと何年！？

※結果はフィクションです

1.運動は週にどのくらい行ってますか？

毎日
週2〜3回
ほとんどしていない

2.脂っぽい食べものはどのくらい食べますか？

毎日
週2〜3回
ほとんど食べない

2.脂っぽい食べものはどのくらい食べますか？

毎日
週2〜3回
ほとんど食べない

2.脂っぽい食べものはどのくらい食べますか？

毎日
週2〜3回
ほとんど食べない

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

3.睡眠時間はどれくらいですか？

YES・NOチャートだったら何でも作れるので、あんなことやこんなことに使ってください。

ちなみに項目が増えれば増えるほど作るのが大変になる仕様になってます。とても簡易的な構造です。

（がんばれば）選択肢、問題、無限に増やせます。

このカスタマイズは難易度ちょっと高めです。

HTMLをバリバリ編集していきます。

HTMLを知らなくてもできるように説明していきますが、わかりにくかったらごめんなさい！

注意事項

JavaScriptを使用しています。AMPなどJavaScriptが動かない環境だと動きません。

クリックでジャンプ

YES・NOチャートをWordPressで実装する方法

YES・NOチャートをWordPressで実装する方法

手順は以下の通りです。

手順

STEP1
CSSコピペ
style.cssにコードをコピペ
この手順を見る
STEP2
PHPコピペ
functions.phpにPHPをコピペ
この手順を見る
STEP3
HTMLコピペ&変更
記事作成ページでHTMLをコピペ、内容を変更
この手順を見る
STEP4
結果ページ作成
固定ページで結果ページを作成
この手順を見る

STEP1:CSSコピペ

CSSをコピペしていきます。

メモ

「外観→テーマエディター→style.css(子テーマ)」。もしくは、「外観→カスタマイズ→追加CSS」に貼り付けてください。

CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。

Copy

/* YES・NO チャート */
.yn-chart{
	margin:0 auto 2rem;
	padding: 2em;
	max-width: 600px;
	background:#fff8e3;
	box-shadow: 0 3px 5px rgba(0,0,0,.07);
	font-size:0.9rem;
}
.yn-chart__add{
	background: #fdc44f;
	color:#fff;
	padding: 0.2em 0.9em !important;
	margin:0 !important;
	text-align:center;
	display:inline-block;
	line-height: 1.5 !important;
}
.yn-chart__title{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	width: 100%;
	padding: 0.5em 0 0.3em!important;
	margin: 0 auto !important;
	font-size:1.35em !important;
	font-weight: 600 !important;
	color:#fdc44f;
	letter-spacing: 1px !important;
	line-height:1.5 !important;
}
.yn-chart__title:before,.yn-chart__title:after {
	content: "";
	flex: 1;
	height: 1px;
	background: #fdc44f;
	display: block;
}
.yn-chart__title:before {
	margin-right: 0.7em;
}
.yn-chart__title:after {
	margin-left: 0.7em;
}
.yn-chart__ex{
	text-align:center;
	margin: 0 !important;
	padding: 0 !important;
}
.yn-chart > div{
	display:none;
	padding-top: 100px;
	margin-top: -100px;
}
.yn-chart > div.yn-chart__display{
	display:block;
}
.yn-chart > div > figure{
	margin:1em 0 2em;
}
.yn-chart > div > figure img{
	display:block;
}
.yn-chart > div > p{
	margin:2em 0 0 !important;
	padding: 0.8em 1em 0.8em 4.3em !important;
	background:#fff;
	position:relative;
}
.yn-chart > div > p:before{
	content: "Q";
	background: #fdc44f;
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	height: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-weight: 600;
	font-size: 1.1em;
	min-width: 48px;
}
.yn-chart > div ul{
	margin:2em 0 0 !important;
	padding:0 !important;
	list-style:none !important;
	border:none;
}
.yn-chart > div ul li {
	margin: 0 0 1em 1em!important;
	padding: 0 !important;
}
.yn-chart > div ul li:last-child{
	margin:0 0 0 1em !important;
}
.yn-chart > div ul li a{
	background: #fff;
	display: block;
	padding: 0.8em !important;
	text-decoration: none;
	color: #333;
	box-shadow: 0 3px 5px rgba(0,0,0,.07);
}
.yn-chart > div ul li a:hover{
	box-shadow: inset 2px 2px 0 0 #ee8f81, 2px 2px 0 0 #ee8f81, 2px 0 0 0 #ee8f81, 0 2px 0 0 #ee8f81;
	transition: 0.1s ease-in-out;
	opacity:1;
}
.yn-chart > div ul li:before{
	content:unset !important;
}
.yn-chart__result{
	background:#fff;
	padding:1em;
}
.yn-chart__result-title{
	color: #fdc44f;
	font-size: 1.1em !important;
	font-weight:600 !important;
	padding: 0 !important;
	margin: 0 0 1em !important;
	border-bottom: 1px dashed #fdc44f;
}
@media screen and (max-width: 560px) {
	.yn-chart{
		padding:1.8em 1.3em;
	}
	.yn-chart > div > figure {
		margin: 0.5em 0;
	}
	.yn-chart > div > p {
		margin: 1em 0 0 !important;
		padding: 0.8em 1em 0.8em 3.3em !important;
	}
	.yn-chart > div ul {
		margin: 1em 0 0 !important;
	}
	.yn-chart__title{
		font-size:1em !important;
	}
	.yn-chart__title:before {
		margin-right:0.3em;
	}
	.yn-chart__title:after {
		margin-left:0.3em;
	}
	.yn-chart__ex,.yn-chart__add{
		font-size:0.9em !important;
	}
	.yn-chart > div > p:before{
		min-width: 30px;
	}
}
/* Twitterシェアボタンなど */
.p-tw-btn,.p-check-btn{
	text-align:center;
	margin:1.5em 5em !important;
	padding:0 !important;
}
.p-tw-btn a,.p-check-btn a{
	display:block;
	box-shadow: 0 3px 5px rgba(0,0,0,.15);
	color:#fff !important;
	font-weight:600 !important;
	text-decoration:none !important;
	padding:0.5em 0;
	border-radius:30px;
}
.p-tw-btn a{
	background:	#00acee;
}
.p-check-btn a{
	background:#fbc55e;
}
.p-tw-btn a:hover,.p-check-btn a:hover{
	transform: translateY(3px);
	box-shadow: 0 2px 2px rgba(0,0,0,.22);
}
.yn-chart > div > p.p-check-btn{
	background: none !important;
	padding: 0 5em !important;
}
.yn-chart > div > p.p-check-btn:before{
	content:unset !important;
}
@media screen and (max-width: 800px) {
	.p-tw-btn,.p-check-btn{
		margin:1.5em 3em !important;
	}
}
@media screen and (max-width: 560px) {
	.p-tw-btn,.p-check-btn{
		margin:1.5em 1em !important;
	}
	.yn-chart > div > p.p-check-btn{
		padding: 0 3em !important;
	}
}

めちゃくちゃ長くなってしまいました！

色の変更をしたいときは

#fff8e3：薄い黄色
#fdc44f：濃い黄色

上記カラーコードをCSS内で検索。変更したいカラーコードに置換してください。

STEP2:PHPコピペ

JavaScriptのコードを入力するためのPHPをfunctions.phpにコピペします。

functions.phpは少しでもミスるとサイトにアクセスできなくなります。

必ずバックアップをとってからから行ってください。

Copy

//YSE・NOチャート
if ( !function_exists( 'p_yesno_chart' ) ):
function p_yesno_chart() {
echo <<< EOM
<script>
jQuery('.yn-chart a').click(function() {
jQuery(this).closest('div').css('display', 'none');
id = jQuery(this).attr('href');
jQuery(id).fadeIn('fast');
return false;
})
</script>
EOM;
}
add_action( 'wp_print_footer_scripts', 'p_yesno_chart' );
endif;

STEP3:HTMLを入力

HTMLで診断コンテンツを作っていきます。これがやや複雑。

WordPress上ではなく、エディターを使った方がわかりやすいです。

まずは、こちらのHTMLを入力。

Copy

<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<!-- ここに質問を入れていきます -->

</div>

ここに質問を入れていきます。

一問目のHTML。一問目だけclass：yn-chart__displayが付いています。他の問題には付けないでください。

Copy

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目：タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

現状合体させるとこんな感じ↓です。

Copy

<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目：タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

</div>

あとは質問数・項目数に応じてHTMLを足していきます。

重要ポイント

idとhrefの文字を紐付けさせていきます。

現在、1問目の選択肢のhrefが#q2-1、#q2-2になっています。

この状態で2問目の質問HTMLを足してみます。

仕組み

1問目でhrefが#q2-1の選択肢をクリックするとidがq2-1の質問に飛びます。

Copy

<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目：タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-1">
<figure>imgタグ</figure>
<p>二問目：タイトル</p>
<ul>
   <li><a href="#q3-a-1">選択肢1</a></li>
   <li><a href="#q3-a-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-2">
<figure>imgタグ</figure>
<p>二問目：タイトル</p>
<ul>
   <li><a href="#q3-b-1">選択肢1</a></li>
   <li><a href="#q3-b-2">選択肢2</a></li>
</ul>
</div>

</div>

この紐付けの文字列は何でも良いので、ご自身のわかりやすい英数字でOKです。

例えば、「2択×3問のHTML」はこうなります。

Copy

<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目：タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-1">
<figure>imgタグ</figure>
<p>二問目：タイトル</p>
<ul>
   <li><a href="#q3-a-1">選択肢1</a></li>
   <li><a href="#q3-a-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-2">
<figure>imgタグ</figure>
<p>二問目：タイトル</p>
<ul>
   <li><a href="#q3-b-1">選択肢1</a></li>
   <li><a href="#q3-b-2">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-1">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-2">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-1">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-2">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="結果先URL">選択肢1</a></li>
   <li><a href="結果先URL">選択肢2</a></li>
</ul>
</div>

</div>

全パターン必ず作る必要はないので、必要に応じて減らしたり増やしたりしてください。

STEP4:結果表示用ページ作成

あとは結果が表示されるページを作成すればOKです。

別ページではなく、その場で結果を表示させたい人はこちらへジャンプ。

固定ページで作っていきましょう。

まずはTwitterのボタンの作り方。

Twitterリンク

https://twitter.com/intent/tweet?text=ツイート内容&url=リンクURL&hashtags=ハッシュタグ1,ハッシュタグ2

本当は自動生成すべきなんですが今回は手動での作り方です。

「Twitterリンクボタン」と「もう一度診断するボタン」をあわせたHTMLがこちらです。

Copy

<div class="p-check-btn"><a href="診断ページURL"><i class="fas fa-check-circle"></i> もう一度診断する</a></div>
<div class="p-tw-btn"><a href="https://twitter.com/intent/tweet?text=ツイート内容&url=リンク先URL&hashtags=ハッシュタグ,ハッシュタグ" target="_blank"><i class="fab fa-twitter"></i> 結果をツイートする</a></div>

もう一度診断するのリンク先（診断ページURL）について、

今回は別途診断ページを作成しましたが記事途中や記事終わりに配置してることもあると思います。

その場合、リンク先は「該当記事URL＋一問目のid」にすればOK。

例えば、このページの冒頭にある診断に飛ばしたい場合はこうなります。

<a href="https://ponhiro.com/yesno-chart/#q1">もう一度診断する</a>

デモ：もう一度診断する

あとはアイキャッチとコンテンツを入れたらOKですね。

診断結果ページの内容が薄い場合はnoindexにしましょう！

その場で診断結果を表示させる方法

最終結果を別ページではなくその場で表示させる方法。

サンプルはこちらです。

30秒診断

あなたの余命はあと何年！？

※結果はフィクションです

1.運動は週にどのくらい行ってますか？

毎日
週2〜3回
ほとんどしていない

2.脂っぽい食べものはどのくらい食べますか？

毎日
週2〜3回
ほとんど食べない

2.脂っぽい食べものはどのくらい食べますか？

毎日
週2〜3回
ほとんど食べない

2.脂っぽい食べものはどのくらい食べますか？

毎日
週2〜3回
ほとんど食べない

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

3.睡眠時間はどれくらいですか？

6時間以下
6〜8時間
8時間以上

診断結果

あなたの寿命は32年です。

もう一度診断する

診断結果

あなたの寿命は52年です。

もう一度診断する

診断結果

あなたの寿命は56年です。

もう一度診断する

診断結果

あなたの寿命は60年です。

もう一度診断する

診断結果

あなたの寿命は65年です。

もう一度診断する

診断結果

あなたの寿命は72年です。

もう一度診断する

診断結果

あなたの寿命は87年です。

もう一度診断する

診断結果

あなたの寿命は92年です。

もう一度診断する

診断結果

あなたの寿命は98年です。

もう一度診断する

質問と仕組みは同じなので結果用のHTMLを足していきます。

ひとつの結果のHTMLがこちら。

Copy

<div id="★">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#一問目のid">もう一度診断する</a></p>
</div>

★は紐付けするために好きな英数字を入れてください。

と言ってもよくわからないと思うので例を見てみましょう。

先ほどの2択×3問のHTMLに結果を足すとこうなります。

Copy

<div class="yn-chart">
<p class="yn-chart__add">診断</p>
<p class="yn-chart__title">タイトル</p>
<p class="yn-chart__ex">補足説明</p>

<div id="q1" class="yn-chart__display">
<figure>imgタグ</figure>
<p>一問目：タイトル</p>
<ul>
   <li><a href="#q2-1">選択肢1</a></li>
   <li><a href="#q2-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-1">
<figure>imgタグ</figure>
<p>二問目：タイトル</p>
<ul>
   <li><a href="#q3-a-1">選択肢1</a></li>
   <li><a href="#q3-a-2">選択肢2</a></li>
</ul>
</div>

<div id="q2-2">
<figure>imgタグ</figure>
<p>二問目：タイトル</p>
<ul>
   <li><a href="#q3-b-1">選択肢1</a></li>
   <li><a href="#q3-b-2">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-1">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="#result-1">選択肢1</a></li>
   <li><a href="#result-2">選択肢2</a></li>
</ul>
</div>

<div id="q3-a-2">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="#result-3">選択肢1</a></li>
   <li><a href="#result-4">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-1">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="#result-5">選択肢1</a></li>
   <li><a href="#result-6">選択肢2</a></li>
</ul>
</div>

<div id="q3-b-2">
<figure>imgタグ</figure>
<p>三問目：タイトル</p>
<ul>
   <li><a href="#result-7">選択肢1</a></li>
   <li><a href="#result-8">選択肢2</a></li>
</ul>
</div>

<div id="result-1">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-2">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-3">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-4">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-5">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-6">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-7">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

<div id="result-8">
<figure>imgタグ</figure>
<div class="yn-chart__result">
<p class="yn-chart__result-title">診断結果</p>
<p>結果の文章とか</p>
<p>結果の文章とか</p>
</div>
<p class="p-check-btn"><a href="#q1">もう一度診断する</a></p>
</div>

</div>

もう長くてわけわかんなくなってきました。

3問目のhrefに結果先のidを入れてます。

一つ一つのかたまりを見ていけば仕組みはシンプルなので、かたまりごとに作っていくと良いと思います。

かなり複雑になってしまいましたが、いろんなことに使えると思うので是非チャレンジしてみてね！

名前:りんたろう :投稿日：2021/01/06(水) 18:38:42 ID：AzNjA2ODc
いつも参考にさせていただいております。
ご質問があります。お手すきの際にご確認していただけましたら嬉しいです！
・resultページにリンクを埋め込み、それを押すと、他の選択肢が消えてしまいます。
質問をやり直しても、ページをロードし直さない限り表示されなくなってしまうのはどうしたらよいでしょうか？
・「○問目：タイトル」のCSSはなしでしょうか？
よろしくお願いいたします！
返信
名前:ハマスケ :投稿日：2021/01/11(月) 22:57:55 ID：Q5MTM4Mzc
いつも参考にさせていただいております。
お手すきで質問に返答いただけましたら嬉しいです。
パソコンでは何も変化なく使えるのですが、スマホでアンケート取ろうとすると、次の質問にいかないようになりました、、
cssとfunctions.phpはコピーして導入済みです。
もしよろしければ改善するべきところを教えていただきたいです。
よろしくお願いいたします。
返信
名前:ふぉい :投稿日：2021/04/04(日) 20:57:16 ID：M0MjExMjY
お世話になっております。
いつも有益な情報大変助かります。
1点質問です。
私のブログでもハマスケさんと同じように、スマホで回答すると次の質問にいかないようになりました。
考えられる原因あればご教示ください。
よろしくお願いいたします。
返信
名前:あふにち :投稿日：2021/12/10(金) 12:30:56 ID：AxOTMxMzM
いつも有益な情報をありがとうございます。
YES/NOチャートを作ってみたところ、回答を押しても、次の質問へ移りませんでした。テーマはswellを使っています。
テーマがcocoonの別ブログで使ったところ、うまく動きました。
テーマによっては使えないのでしょうか。
突然の質問で申し訳ございません。
返信

名前:よしあき :投稿日：2023/01/26(木) 19:14:53 ID：Y0MjQ0Njc
めちゃくちゃ有益情報ありがとうございます。私も同じ問題を抱えていたのですが解決しました。
返信

名前:みるき :投稿日：2022/01/15(土) 14:51:13 ID：E5NTMzNDM
私も、テーマがswellで次の質問へ移りませんでした。
【解決】swell設定→jQueryを強制的に読み込むにチェック入れる
これで、次の質問へ移るようになりました！
テーマswellの方で困っている方いらっしゃったら、試してみてください。
返信
名前:まる :投稿日：2022/03/08(火) 14:32:49 ID：U5Njk4MDE
お世話になっております。
こちらのチャートを使用させていただきたいと思っているのですが、
回答（aタグ）をクリックすると少し上にスクロールがされてしまいます。
//////
.yn-chart > div{
display:none;
padding-top: 100px;
margin-top: -100px;
}
/////
こちらを入れていることで
チャート全体が映る位置では固定されるのですが、
（回答をクリックするとページの上部がチャートの上部に来るようにスクロールしてしまう）
例えば、チャートが半分くらい写っていて
回答ボタンをクリックしてもその場所から動いてほしくないです。
spanタグに入れ替えれば動かないということもわかるのですが
コードをちゃんと書き換えられるほど詳しくはなく。。。
このページ上でサンプルとしてあるチャートと全く同じ動きにしたいのですが
（クリックしてもスクロールが一切されない）
別途JavaScriptなどで制御しているのでしょうか。
改善できるものが他にあれば教えていただきたいです。
どうぞ宜しくお願いします。
返信

名前:まるまる :投稿日：2023/12/21(木) 20:54:41 ID：gxNTkxMjg
こんにちは。
私も同じ悩みを抱えて、今日解決したので解決方法を記載します。
結論、JS側でデフォルトのスクロールを止めてあげる必要があります。
if ( !function_exists( ‘p_yesno_chart’ ) ):
function p_yesno_chart() {
echo <<<EOM
jQuery(document).ready(function($) {
$(document).on(‘click’, ‘.yn-chart a’, function(e) {
e.preventDefault(); // スクロールを防止
var id = $(this).attr(‘href’);
$(this).closest(‘div’).css(‘display’, ‘none’);
$(id).fadeIn(‘fast’);
return false;
});
});
EOM;
}
add_action( ‘wp_print_footer_scripts’, ‘p_yesno_chart’ );
endif;
上記コードを追加して、classにnoscrollをつけると
実現できますよ！
どうか誰かのお役に立ちますように！
返信