あむちょです。

前回と全く同じ話。

前回、WordPressのサイドバーにHTML5のcanvasを表示する方法を説明しました。
HTML5とjavaScriptで目を引くバーナーを作る

前回はわざわざHTML5を使うほどでもなかったので、今回はHTML5っぽい事をしたかったのでまた作りました。

今回作ったのはアートスクリプトまとめのリンクです。HTML5に対応してないブラウザーだと、ただの画像が表示されます。

やり方は基本的には前回と同じです。

WordPressの設定→ウィジェットからテキストを選択。

本文に以下を追加

<br />
&lt;a target=&quot;_blank&quot; href=&quot;http://fieldwalking.jp/blog/html5-artScript/&quot;&gt;<br />
　　　　&lt;canvas id=&quot;artScript&quot;  width=&quot;180&quot; height=&quot;150&quot; style=&quot;background-color:black;&quot;&gt;<br />
　　　　　　　　&lt;img src=&quot;http://fieldwalking.jp/blog/wp-content/uploads/2013/05/title.jpg&quot;/<br />
　　　　&lt;/canvas&gt;<br />
　　　　&lt;script type=&quot;text/javascript&quot;&gt;<br />
　　　　　　　　var Art_randomNum=Math.floor(Math.random()*6);</p>
<p>　　　　　　　　document.write(&quot;&lt;script type=\&quot;text/javascript\&quot; src=\&quot;http://fieldwalking.jp/blog/wp-content/themes/twentyten/widget/artScript/Art&quot;+Art_randomNum+&quot;.js\&quot;&gt;&lt;/scr&quot;+&quot;ipt&gt;&quot;);<br />
　　　　&lt;/script&gt;<br />
&lt;/a&gt;<br />

表示するスクリプトはランダムしてあるので、jsファイルを連番でアップロード。

Math.floor(Math.random()*6)で0~5までのランダムな整数値を所得して文字列に結合してます。文字列の中で</script>を使うとブラウザーが勘違いするので、”</scr”+”ipt>”のように途中で分割してます。

これで6種類のスクリプトがランダムに表示されます。

これでページビューが増えますように

[ad]