メディアクエリで画像背景に差し替え画像背景の密集度がデバイスによって違う件スポンサーリンクcanvasでサイトの背景に画像をランダムに描くこれは姉妹サイト「ほんっとにはじめてのHTML5」で詳しく説明しているのでこちらを参照に。このサイトで使用している画像は、このようなPNGファイル。サイズがバラバラでも、それに対応したjavaScriptを書くので大丈夫。canvas要素を生成して、上記の画像を配置している。javaScriptソースはこちら。canvas要素を埋め込む(7行目)。指定したノード(#contents-wrap)の前に挿入(8行目)。この親divのウィンドウサイズを与えている(9〜14行目)。HTMLとCSSはこのようにHTMLはこんな状態。canvas要素は、javaScriptで生成するのでココ↓には書かない。乗っかるようにするために、CSSはこのようになっている。親(body)に対して「position:absolute」にして、上に乗せている。div#wrapper(canvas内包)の上に乗っかるわけで。canvasで使う画像は「絶対パス」でこれでページの背景全面にcanvasで画像をランダム配置することができた。今ご覧のサーバにインポートしたとたん、背景の画像が消えた!でも、canvasで描いている背景のグラデーションは効いてる。絶対パスに書き直したら描画された。いうわけで、WordPressでは画像のパスは相対パスじゃダメ。canvasによる背景がちゃんと描画されていたが、スマホで見ると、このように下部が切れてしまう。スマホなどのデバイスは、表示領域がウィンドウサイズとは異なるのでこうなる。ウィンドウサイズ取得の部分で、高さから何ピクセルか引いてみることに。cHall」は実際のカンバスの高さ(div#wrapperから取得した高さ)。ここから120px引いたものを描画時のカンバスの高さに(19行目)。これはこのあとの描画で使う。本来のウィンドウサイズからある程度小さくしておけば(ここでは120px)、カンバスは最下部まで達する前に終わり、bodyのbackgroudに指定した色になじむだろう...という発想で。それから、canvasのバックに斜めのグラデーションも指定しているのだが、これを端から端までグラデにしていたことも、途中で切れてみっともない原因の1つになっていた。黒に近い紺色(#0e195b)から紺色(#2d1497)までのグラデです。bodyのbackgroudは紺色(#2d1497)を指定。そこで、グラデも半分あたりで終わるように修正した。'#2d1497');」にしていた。portrait(縦持ち)だけは、このように自然になじむようになった。canvasでの背景の表示は上手くいったのだが、landscape(横持ち)では相変わらず下部の背景の欠けが起こる。bodyに画像で背景をつけることにした。メディアクエリは下記のとおり。