STEPWORKS

元ASPの中の人。今はWebサイト制作/運営とAndroidアプリ勉強中。
2011/08/18 21:39

携帯サイトをたった1行のタグでスマートフォンに対応させる方法

携帯アフィリエイターにとってスマートフォンの躍進は脅威ではないでしょうか。単純に利用してくれるお客さん(=成果対象となるユーザー)が減少することを意味しています。特に10代、20代と言ったアフィリエイターにお金を落としてくれる若い世代が機種変更に積極的で、次に販売になる冬モデルの販売開始、そして年末年始でさらにごっそりとガラケーからスマホへ移行するでしょう。

とは言え、まだまだ携帯アフィリエイトも1、2年くらいは稼げることも事実です。携帯端末が割賦制のため最大2年はユーザー側も躊躇する期間があります。

この移行期に携帯だけに注力するのはもったいなくはありませんか?どうせならスマホユーザーも対象にアフィリエイトできるといいですよね。でも、どうしたらいいか分からない!難しいのはできない!有料はやだ!という方のために記事を書いてみます。

■たった1行で携帯サイトをスマホでも見やすいようにする

まず、携帯サイトをスマホ端末からアクセスするとどのように表示されるかご覧下さい。

before

このようにスマホのブラウザ上では携帯サイトが縮小されて表示されてしまいます。
そのため、ユーザーは拡大して閲覧する必要があってとても面倒です。

<meta name=”viewport” content=”width=320, user-scalable=no”>

 
上のタグをサイトの<head>~</head>タグの間に入れてみましょう。
そして同じくスマホ端末から再度アクセスしてみると・・・

 

after

 

まさしくガラケーで見たような表示になります!簡単ですね。

 

このタグはスマホのブラウザに「横幅320ピクセルで表示するように」と指定したので、携帯の解像度に近い表示となったのです。携帯のブラウザではこのタグは無視されるので表示を邪魔するようなことはありません。

 

これで携帯サイトをスマホでも見られるようにできました。次回の記事では「携帯サイトでスマホの広告も対応させる」方法を書きたいと思います。