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

オススメスクールランキング
1位のSkill Hacksは僕が講師をつとめており,自信を持ってオススメできます.
  1. Skill Hacks[スキルハックス] (関連記事)
  2. テックアカデミー(関連記事割引)
  3. WebCamp Pro(関連記事割引)
  4. テックキャンプ(関連記事割引情報)
オススメスクールランキング
1位のSkill Hacksは僕が講師をつとめており,自信を持ってオススメできます.
  1. Skill Hacks[スキルハックス] (関連記事)
  2. テックアカデミー(関連記事割引情報)
  3. WebCamp Pro(関連記事割引情報)
  4. テックキャンプ(関連記事割引情報)

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

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

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

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

問題 ブログ運営者の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>である.

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

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

無料の公式メルマガ開始!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です