あむちょです。

ひさしぶりにHTML5とjavaScriptを使ってみる。

今回作ったのは、ブログの上にあるヘッダー画像です。

マウスを画像の上で動かすと、ヘッダー画像が動きます。スマートフォンの人は、触った状態で動かせば、ヘッダー画像が動くはず。

HTML5に対応してないブラウザーだと、ただの動かない画像が表示されます。

いちおうやり方（あってるかわかりません）。

まずはwp-content/themes/テーマ名/header.php

をFTPクライアントでダウンロード。念のためバックアップ。

95行目あたりにある

<br />
elseif ( get_header_image() ) :<br />
    // Compatibility with versions of WordPress prior to 3.4.<br />
    if ( function_exists( &#8216;get_custom_header&#8217; ) ) {<br />
        $header_image_width  = get_custom_header()-&gt;width;<br />
	$header_image_height = get_custom_header()-&gt;height;<br />
    } else {<br />
	$header_image_width  = HEADER_IMAGE_WIDTH;<br />
	$header_image_height = HEADER_IMAGE_HEIGHT;<br />
    }<br />
?&gt;<br />
    &lt;img src=&quot;&lt;?php header_image(); ?&gt;&quot; width=&quot;&lt;?php echo $header_image_width; ?&gt;&quot; height=&quot;&lt;?php echo $header_image_height; ?&gt;&quot; alt=&quot;&quot; /&gt;<br />
&lt;?php endif; ?&gt;<br />

最後の<img>タグをはさむように

<br />
&lt;canvas id=&quot;canvas&quot; width=&quot;940&quot; height=&quot;198&quot; style=&quot;background-color:white;&quot;&gt;<br />
    &lt;img src=&quot;&lt;?php header_image(); ?&gt;&quot; width=&quot;&lt;?php echo $header_image_width; ?&gt;&quot; height=&quot;&lt;?php echo $header_image_height; ?&gt;&quot; alt=&quot;&quot; /&gt;<br />
&lt;/canvas&gt;<br />
&lt;script type=&quot;text/javascript&quot; src=&quot;jsのパス&quot;&gt;&lt;/script&gt;<br />

これで<canvas>タグに対応していないブラウザーでは通常のヘッダー画像が表示されます。javaScriptはこんなかんじ。

header.js

普通のHTML5を使ったjavaScriptです。画像と座標をひとまとめにして、構造体にしたらエラー出たので諦めてベタ書きです。スマホ向けに加速度センサー使って動かそうと思ったけど、疲れたのでまた今度。

それにしても読み込みが遅いです。キャッシュとかどうやったらできるんでしょうね。

誰か助けて

[ad]