Dreamweaverでスマートフォンサイト作成5

トップページのヘッダーを画像に変更

それでは、今日から実際に『jQuery Mobile』を使って、スマフォサイトを作成してみたいと思います。スマートフォン用のサイトは携帯の3G回線を利用しての接続が多いので、なるべくページの容量は少なくしなければなりません。かといって文字だけのサイトは味気ないですよね。そこでまずサイトの顔ともいえるトップページのヘッダーに、画像を使用してみたいと思います。

現在のスマートフォンのディスプレイは、iphoneの3GSまでが320×480px、iphone4が640×960pxで、Androidも同様のサイズです。そこで横幅320pxで作成すれば、ほとんどのスマートフォンに対応できますので、横幅320pxで作成していきたいと思います。縦スクロールは簡単ですので、トップページ以外は縦幅はほとんど考慮する必要は無いと思います。

まず横幅300px程度で、トップページのヘッダーに使用する画像を用意します。用意した画像を前回スマートフォン用に作成したspフォルダのindex.phpのヘッダーにドラッグします(便宜上、WinRoad徒然草の文字は削除してあります)。

さっそくDevice Centralでどのように表示されるのか見てみたいと思います。一応画像は表示されましたが、背景が黒で画像も一部しか表示されていません。

それでは、CSSを変更してヘッダーに画像が表示されるように設定しましょう。画像をクリックし、CSSスタイルの新規作成をクリックします。『新規CSSルール』のダイアログが表示されたら、ルール定義の新規スタイルシートを選択します。

新規ファイルの保存場所はどこでも大丈夫ですが、とりあえず『jquery-mobile』フォルダに保存します。

CSSに自信のある人は、直接『jQuery Mobile』のスタイルシートを変更すればいいのですが、あまり自信のないひとは、別ファイルを作成するのをお勧めします。別ファイルで保存すれば、変更も削除も簡単ですが、元ファイルを直接変更すれば、元に戻すのは大変です。

CSSルール定義のダイアログが表示されますが、そのまま何も入力せずに『OK』をクリックします。新しいCSSファイルとのリンクが作成されています。

只、このままCSSファイルを記入しても、『jQuery Mobile』のdata-role属性で、こちらの思うようなデザインができません。そこで、『my_header』という名前のIDセレクターを作成することにします。『Dreamweaver』のコード画面で画像に変更したい箇所の『data-role=”header”』という文字を削除して、代わりに『id=”my_header”』と入力します。

今ある画像をいったん削除して、トップページのヘッダー部分に『winroad徒然草』とタイトルを入力します。入力したら、ヘッダー部分をクリックして、タグセレクタの『h1』をクリック。CSSの新規作成ボタンをクリックします。

新規CSSルールのダイアログを確認したら、『OK』ボタンをクリックします。

CSSルール定義のダイアログで、『背景』をクリックし、下のように設定します。

次にカテゴリのブロックをクリックし、text-indentを『-9999px』に設定します。

text-indentを-9999に指定するのは、<h1>タグ内の文字内容『Winroad徒然草』は検索ロボットに認知させて、表示だけは、背景画像を表示するためのテクニックです。どこかの書籍にSEOスパムにはならないと書いてあったので、それを信じて利用しています。只、画像だけを表示させるために、文字色を背景色と同色にして見えなくするテクニックはSEOスパムになる可能性が高いそうです。もし間違っていたら指摘して下さい。

最後にボックスをクリックし、画像の高さに合わせて高さ設定をします。

それでは、Device Centralで表示してみることにしましょう。

トップページのヘッダーに『WinRoad徒然草』のロゴが表示されました。きょうはここまでにします。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ