【お正月】コピペで簡単!! はてなブログでおみくじを3分で作る方法!!

みなさん，あけましておめでとうございます!!

今年もどうぞよろしくお願いいたします．

新年ということで，おみくじです!!

シェアボタン付きです!!

？

あなたの運勢「なに吉」？

さて，このおみくじ，誰でも簡単にコピペだけではてなブログにおみくじを設置できます!!

おみくじ作ったら結果をTwitterでシェアしたくもなると思うので宣伝にもなるはず!!

おみくじ作成手順
コードの意味を詳しく知りたい方は…
まとめ

おみくじ作成手順

それでは，実際におみくじの作成手順を紹介します!!

手順1. 編集方法の変更

まず，はてなブログの記事作成画面から，編集方法でMarkdown記法を選択します．

見たままモードなどだと，linkタグが消えてしまうことがあるようで…

Markdownモードが安心です．

手順2. コードのコピペ

以下のコードをコピペします．

<link rel="stylesheet" href="http://yukisako.github.io/css/newyear.css" type="text/css" />
<div class="omikuji">
<div id="result">？</div>
<div id="btn">あなたの運勢は？</div>
<script>
      (function(){
        document.getElementById('btn').addEventListener('click' ,function() {
          var omikuji = ["大大吉", "大吉", "小吉", "中吉", "末吉", "諭吉", "凶吉"]
          var result = Math.floor(Math.random() * omikuji.length);
          document.getElementById('result').innerHTML = omikuji[result];
        });
        document.getElementById('btn').addEventListener('mousedown', function(){
          this.className = 'pushed';
        });
        document.getElementById('btn').addEventListener('mouseup', function(){
          this.className = '';
        });
      })();
    </script>
</div>
<div class="result">
<input type="button" id="post" value="結果をTwitterで投稿する"></input>
<script>
      $("#post").on("click",function(){
        if (document.getElementById('result').innerHTML == "？"){
            alert("占いが済んでいません")
          } else {
          var url = document.location.href;
          var str = "ブログ占いをしました!! 今年の運勢は" + document.getElementById('result').innerHTML+ "です!! %23ブログ占い from @yuki_99_s";
          url = "http://twitter.com/share?url="+escape(url)+"&text="+str;
          window.open(url,"_blank","width=600,height=300");
          }
        });
    </script>
</div>