Mobile』を使って、スマフォサイトを作成してみたいと思います。スマートフォン用のサイトは携帯の3G回線を利用しての接続が多いので、なるべくページの容量は少なくしなければなりません。いって文字だけのサイトは味気ないですよね。そこでまずサイトの顔ともいえるトップページのヘッダーに、画像を使用してみたいと思います。現在のスマートフォンのディスプレイは、iphoneの3GSまでが320×480px、iphone4が640×960pxで、Androidも同様のサイズです。そこで横幅320pxで作成すれば、ほとんどのスマートフォンに対応できますので、横幅320pxで作成していきたいと思います。縦スクロールは簡単ですので、トップページ以外は縦幅はほとんど考慮する必要は無いと思います。横幅300px程度で、トップページのヘッダーに使用する画像を用意します。用意した画像を前回スマートフォン用に作成したspフォルダのindex.phpのヘッダーにドラッグします(便宜上、WinRoad徒然草の文字は削除してあります)。Centralでどのように表示されるのか見てみたいと思います。一応画像は表示されましたが、背景が黒で画像も一部しか表示されていません。それでは、CSSを変更してヘッダーに画像が表示されるように設定しましょう。画像をクリックし、CSSスタイルの新規作成をクリックします。『新規CSSルール』のダイアログが表示されたら、ルール定義の新規スタイルシートを選択します。新規ファイルの保存場所はどこでも大丈夫ですが、とりあえず『jquery-mobile』フォルダに保存します。Mobile』のスタイルシートを変更すればいいのですが、あまり自信のないひとは、別ファイルを作成するのをお勧めします。別ファイルで保存すれば、変更も削除も簡単ですが、元ファイルを直接変更すれば、元に戻すのは大変です。CSSルール定義のダイアログが表示されますが、そのまま何も入力せずに『OK』をクリックします。新しいCSSファイルとのリンクが作成されています。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スパムになる可能性が高いそうです。間違っていたら指摘して下さい。最後にボックスをクリックし、画像の高さに合わせて高さ設定をします。Centralで表示してみることにしましょう。トップページのヘッダーに『WinRoad徒然草』のロゴが表示されました。きょうはここまでにします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト関連記事DreamweaverCS6.0の新機能を試してみました。本日、AdobeCS6.0が発売になりました。ダウンロードして、DreamweaverCS6.0の新機能を試してみたいと思います。Mobile』に対応するようになりました。今日は、データ更新用のページを作成したいと思います。更新用のフォームを一から作成するのは面倒ですので、DVD_insert.phpのページを使い回ししたいと思います。ラジオボタン』をクリックしてみます。AFFINGER5.。