読者です 読者をやめる 読者になる 読者になる

はてなブログで簡単にクイズを作る方法

プログラミング

スポンサーリンク


はてなブログ内でクイズを設置してみたくなったのでそれのメモ.

これをすると,誰でも簡単にはてなブログ上でクイズを作ることが出来ます.

形式は,よくテストとかで出る穴埋め形式のクイズです.

こんな感じのクイズができます.

問題 ブログ運営者のTwitterは@yuki_99_sである.

カーソルを載せると答えが出ます.

マークダウン記法にする

はてなブログは,「見たまま」と「はてな記法」と「Markdown記法」の3つから記法を選べます.

f:id:McG:20160527181210p:plain

とりあえず,Markdown記法を選びましょう.

Markdown記法ってなんぞ?って人はこちらを.

kojika17.com

クイズを書いていく.

では実際にクイズを書いていきましょう.

そして,答えにしたいところを"_“と”_“(アンダースコア2つ)で囲みます.

こんな感じですね.

f:id:McG:20160527182124p:plain

プレビューで見てみると以下のように表示されているはずです.

f:id:McG:20160527192020p:plain

“__"と”__“で囲んだところは,実際の表記では太字になります.

この太字のところが解答なのでこれを隠していきましょう.

jQueryを使って隠す

記事の一番下にこれを貼り付けます.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
    $('strong').css('color','white');
    $('strong').css('border-bottom','dashed 1px #000000');
  });
  $('strong').hover(function(){
    $(this).css('color','red');
  },function(){
    $('strong').css('color','white');
    $('strong').css('border-bottom','dashed 1px #000000');
  });
</script>

1行目で,jQueryを読み込みます.

で,その下で文字色を変えたり,マウスが乗っかったら赤色で表示させる処理を書いています.

クイズ完成

問題 ブログ運営者のTwitterは@yuki_99_sである.

カーソルを載せると答えが出ます.

こんな感じのクイズができるんですね.

問題

jQueryの読み込みが遅いので,はじめの文字色を白にする処理に1秒くらいかかる…

はてなブログって,CSSを記事別に変えることってできないのかな..

無理やりspanタグを使えば…

ブログ運営者のTwitterは@<span style="color:#ffffff; border-bottom:dashed 1px #000000;">__yuki_99_s__</span>である.

こんな感じになってはじめから白くできるんだけどめんどくさいからね…

もっといい方法が見つかったら更新します.

© 2016 Yuki Sako.