このページをクリップ


当サイトも一応iPod touch,iPhone対応にするべくmetaタグでviewpointの設定をし、専用のCSSを用意して見やすくしています。

簡単にスタイルシートで見え方を変えただけです。サイドにあるナビゲーションもメインのコンテンツの下に配置しています。

上のキャプチャ画像が当サイトをiPod touch 1stで見た画像です。

iPod touch,iPhone対応の手法

簡単に述べると、当サイトはソースの書き方がヘッダー部分、メインカラム部分、左サイドカラム部分、右サイドカラム部分となっています。

iPod touch,iPhone対応CSSでは、ヘッダー、右サイドの部分はdisplay: none;にして表示させていません。

ヘッダー部分はFlashとサイト内検索の部分なのでiPod touch,iPhoneのSafariではFlashが読み込めないので非表示とさせました。さらに右サイドはブログ検索と広告だけなので必要なしと考えました。

メインカラム部分はそのままにして、左サイドカラムをFloatをさせずにメインカラム部分の下に表示させるようにしています。

そして、CSSで左サイドカラムのナビ部分をiPod touch,iPhone風の見せ方にしています。

あくまで簡単にiPod touch,iPhone対応のサイトにするためのものなので、もう少しメインカラムの表示のさせ方を考えた方が良いかと思っています。

  • サイト
  • facebook
  • twitter

PCからタブレット、スマホまで対応いたしました。ガラケーもとりあえず対応しております。

Macに要求するものはどれ?


* (票)

* (票)

* (1票)

* (票)

* (票)