モバイルからのアクセスは背景動画を表示させない

モバイルデバイスでは正しく表示されない

前回は、Webページの背景に動画を入れる方法を解説したが、実は1つ悩ましいことがある。それは、iPhoneなどのモバイルデバイスでアクセスした時の見た目だ。背景に動画を使ったWebページをiPhoneで読み込んだ場合、設置したはずの動画が読み込まれず、なんだかドットの粗い画像が背景に敷かれてしまうのだ。


このサイトのトップページを例にとってみよう。最初、PCで訪問すると背景に雲の動画が表示されるように設定したが…。


それをそのままiPhoneで表示させると、こんな残念な見た目になってしまった。

実はこの背景画像、YouTube動画のサムネイルを拡大して表示したもの。サムネイルの拡大率を画面の高さで自動計算された結果、かなり粗くなってしまっているのだ。

せっかく魅力的で印象的なWEBサイトを作ろうと背景に動画を用いたのに、モバイルで見ると逆効果になってしまうのは悲しいことだ。そこで、モバイルデバイスからアクセスした際には、動画を表示させず、代わりに別の見た目を表示させる方法を紹介しよう。

スクリーンサイズによって見た目を調整

その方法とは、画面サイズを見分けて、モバイルデバイスの画面サイズであれば動画を表示させないというものだ。設定には「リソースエディタ」という機能を使う。やや難解な部分もあるので、手順をしっかり確認しながら慎重に進めていこう。

まず、背景動画の設定。これは前回のエントリーを見ながら設置を行おう。今回の記事では、PCで表示させたときにしっかり動画が表示されているところからスタートする。その設定が済んでいたら、続いてモバイルデバイス用に設定を追記していく。そのために使うのが「リソーソエディタ」だ。


 左のページ管理パネルの一番上にある、サイト名の部分をクリックし、表示されるメモ帳のようなボタンをクリックしよう。


すると、少し不安になるような警告文が出るが、ここは恐れずに［はい］を押してリソースエディタを起動する。


このようなウィンドウが表示されるはずだ。今回の設定は、Webページの細かな見た目を定義する「CSSファイル」というものを追加することで実現させる。そこで、［_userdata］の階層を選択し、［ファイル作成］ボタンをクリックして、その中に新しいファイルを作成しよう。


 ファイル名は英数文字ならなんでもいいが、この記事では分かりやすいように「mobile.css」と入れておいた。拡張子まで含めてしっかり入力しよう。


 新しく作成したファイルを選択したのが上の図。ここに「CSS」と呼ばれるコードを記述していく。「CSSなんて書いたこともないし、わからない」という人もいるだろうが、心配は無用だ。次の文字列を間違えないようにそのまま書いておけばいい。

 全部でわずか5行のコードだ。説明すると、スクリーンサイズを判断して、幅が1030ピクセル以下なら、ページの背景（background）をなし（none）にするという設定。ちなみに「!important」とは、この設定をほかのCSS設定より優先するという宣言だ。

ここまで書いたら、［保存］ボタンを押して保存しよう。
  

作成したCSSはきちんと読み込ませよう

さて、設定はこれで終わりではない。CSSファイルというのは、作っただけではなんの効果もなく、それをWebページが読み込んで初めて効果を発揮する。背景動画を割り当てたページで、作ったCSSを読み込むように設定していこう。


 まずは、動画背景を設定したページの［ページ設定］ウインドウを開こう。

このページ設定ウィンドウの中に［スクリプトと詳細設定］というタブがある。これをクリックすると、そこに白い［スクリプト入力］欄があるのに気づくはずだ。ここに、先ほど作ったCSSファイルを読み込ませるためのコードを記述する。

もし、ファイル名を「mobile.css」とした場合、以下の1行を追記しよう。

 なお、すでにこのスクリプト入力蘭に何かを書き込んでいる場合は、書き込んでいるものの下に1行追加すればOKだ。

あとは［OK］ボタンを押して設定を確定させれば無事完了。サイトをアップロードして、iPhoneなどでアクセスしてみよう。


こんな感じで、背景がなくなっていれば成功だ。CSSに詳しい人なら、背景を「なし」にするのではなく、別の画像を指定するという方法も考えられるだろう。


今回の記事は、WEB制作に馴れていない人だとやや難解に感じるかもしれない。しかし、個々の意味を完全に理解できなくても、上記の手順をしっかり読んでやっていけばどうにかなるはず。コードの記述を敬遠せず、ぜひ試してみてほしい。