PCモバイル(ガラケー)両用サイトの作り方

普通のパソコン対応のホームページ(PCページ)にモバイル(携帯電話)で訪れる人が増えてきました。携帯電話の性能が上がってきて、たいていのページは問題無く表示されますが、中にはとても見られないページもあります。PCモバイル両用ページの作り方について考えてみました。

携帯電話(フィーチャーフォン)で普通のPC用ページを見た場合

携帯電話(フィーチャーフォン)で普通のPC用ページを見ると、CSS(スタイルシート)が無効になるのが一般的です。その場合は記述した順番にページが表示されます。また、一般的には携帯電話ではJavascriptが無効になるので、Javascript(ジャバスクリプト)を使ったページでは思い通りの動作をしません。

これを逆手に取ってPCモバイル両用ページを作ることができます。PCモバイル両対応ページ(サイト)となるように変更してみましょう。

PCモバイル両用ページにするには

完全にフルブラウザ楽天の携帯電話(スマートフォン)ならば、あまり問題はありませんが、普通の携帯電話(フィーチャーフォンとかガラケーという)ではスタイルシートとジャバスクリプトが使えないので、モバイルページで表示させたいものを先に書いていきます。これは元々SEOでも重要な事ですので、既に実行済の人も多いと思います。

まずは携帯電話でホームページを見てみましょう。不具合な点をひとつずつ、少しずつ解決していけばPCモバイル両用ページにすることができます。ホームページを携帯電話で見ることができない人は携帯電話シミュレーターを使えばパソコン上で見ることができます。(i-mode HTML Simulator II 等)

PCモバイル両用ページのデザイン

フレームの問題と表の問題は後述しますが、ページのデザインによってはうまくPCモバイル両用ページにすることができません。CSSを使って段組ページにして、コンテンツ(ページの内容)を先に記述するのが良いと私は思います。

CSSファイルをモバイルページ用にも使えるように書き換える

最近の携帯電話では、外部CSSファイルを読み込んで表示するものもあるようです。実際にFORMAのi-modeで私のホームページを見てみると、外部CSSを読み込んで表示されましたが、メイン部分に設定した margin が無効になり、サイドバーとメイン部分が重なって表示されていました。

そこでCSSファイルの一部に @media handheld{} を追加して、モバイルでもちゃんと表示できるようにしてみました。

@media handheld{
#side {width:160px;position:relative;top:5px;left:5px;border:1px solid #888;text-align:center;line-height:1.0}
a:link {color:#00f}
a:visited {color:#60c}
a:focus {color:red}
}

上記のように、#side の position:absolute を position:relative に書き換えました。そうすると、サイド部分はメインの後に配置されます。これでサイド部分がメイン部分に重なるのは防げました。

また、CSSの a:hover はモバイルでは適用されないのでモバイル用の、a:focus も記述してみました。 a:link と a:visited もこの順番に必要です。

PCモバイル両用ページでのフレームの問題

携帯電話はフレームページに対応していないので、普通は携帯電話では表示させることができません。しかし、工夫すれば表示させることも可能です。

次のようにフレーム未対応の携帯電話の為に、 noframes タグ内でメニューを表示させてやります。

<frameset cols="20%,*">
<frame src="menu.php">
<frame src="contents.htm">
<noframes>
<a href="menu.htm">メニュー</a>
</noframes>
</frameset>

PCモバイル両用ページでのテーブルデザインの問題

表でデザインされたページでは、表(テーブル、TABLE)の中の画像と文章がうまく表示されないことがあります。自分で確認されるのが一番です。できるだけ表でデザインしない方が良いでしょう。

携帯電話だけで表示させる

PCモバイル両用ページの場合、携帯電話だけに表示させて、パソコンには表示させたくないことがあります。楽天アフィリエイトのモバイル専用広告がこれに相当します。

この場合は、スタイルシート(CSS)を使ってdisplay:noneとすれば、パソコンでは表示されずにスタイルシート無効の携帯電話に表示されます。でも、この手法はSEOの点でやめた方がよさそうです。

<div style="display:none">
<p>これはスタイルシート無効の携帯電話に表示されます。</p>
</div>

PCだけで表示させる

逆に、携帯電話(フィーチャーフォン)に表示させずに、パソコンだけに表示させたい場合は、Javascript(ジャバスクリプト)で記述することです。

HTMLかXHTMLか

ページを記述する言語はHTMLでもXHTMLでも問題はありませんが、モバイル機器向けのXHTMLとして、「XHTML Basic 1.0」と「XHTML Mobile Profile 1.0」があります。元の言語はXHTML 1.0です。

XHTMLの文法に従っていない記述をしても、ある程度はブラウザ側で修正してくれてうまく表示できますので、あまり気にせずXHTML 1.0で記述しておいた方が良いかも知れません。

PHPかSSIか

後述の携帯電話(フィーチャーフォン)向けグーグルアドセンスを使うのであれば、PHPを使った方が良いでしょう。SSIで記述したページでもモバイル用のグーグルアドセンスが表示されましたので、どちらでも良いかも知れません。

携帯電話向けグーグルアドセンス

携帯電話向けグーグルアドセンスは普通PHPで記述します。(PHP、CGI/Perl、JSP、ASPのどれか)拡張子をphpにするか、拡張子がhtmlでもPHPが動作するようにhtaccessファイルに記述します。当然、PHPの使えるサーバーでないと携帯電話向けグーグルアドセンスは表示できません。

モバイル向けグーグルアドセンスは一つのページに一つしか付けることができませんので注意します。また、ダブルの広告はページの下部にしか付けられないので注意してください。

PHPのインクルード機能でグーグルアドセンスの外部ファイルを取り込むと便利です

PHPとはHTML文書中に記述されたスクリプトをサーバーのPHPが実行し、その結果を HTMLデーターとしてWebブラウザに渡すものです。

PHPファイル(拡張子は普通php)の中で同じフォルダ内にあるグーグルアドセンスの外部ファイル(mobile_adsense.inc)を呼び出すには次のようにします。

<?php include("mobile_adsense.inc"); ?>

インクルードするファイルの拡張子はincやhtmやhtmlやphpでも何でもかまいません。