ようやくスマホ対応的なものをやってみました。
実は前からスマホ用HTMLを別ソースで吐き出していたのですが、時代は1ソースだぜということで、単一のHTMLに対してスマホ用のCSSを書く形で対応しました。
以下やったこと。
【HTMLテンプレ弄り】
doctype宣言をHTML5に変更。
<!DOCTYPE html>
1.Viewportの設定
<meta name=”viewport” content=”width=530, initial-scale=0.6, maximum-scale=2.0 user-scalable=yes”>
既存のエントリーには最大490pxのimgやYouTubeのembed等が載っているのでこれをリサイズするのは面倒くさいぞということで、コンテンツ幅530px(両サイドに20pxのマージン)で固定されるように指定。
2.スマホにだけ別のCSSを読み込ませる
<link
rel=”stylesheet” href=”https://maharada.net/styles.css”
type=”text/css” media=”screen and (min-device-width: 481px)” />
<link href=”mobile.css” rel=”stylesheet” type=”text/css” media=”only screen and (max-device-width: 480px)” />
<!–[if IE]>
<link href=”styles.css” rel=”stylesheet” type=”text/css” />
<![endif]–>
ディスプレイの横幅が480px以上の時はstyles.cssを、
ディスプレイの横幅が480px以下の時はmobile.cssを読みこませる。
IEは screen and～とか意味分かんねーし、って言うので別途読み込ませてあげる。
詳しくはこちら。
3.左右のブロック達を仕分けして非表示にするためにユニークなID（Class）をつける。
4.トラックバックが邪魔くさかったので削除。
さすがにオワコン。
【スマホ用CSS弄り】
5.スマホには必要最低限のブロックのみにして不要なものは非表示に。
display:none;するだけの簡単なお仕事。
6.三段カラムのレイアウトを解除しシングルカラムに。
シングルにすると表示順はHTMLの表示順にならざるを得ない。
7.高解像度なスマホの画面に合わせて文字サイズ（px数）を大きく。
ざっくり感としてはPC用サイズの倍になる感じ。
8.続きを読むボタンが押しやすく、ボタンらしい見た目になるように調整。
border-radiusで角丸に、
gradientで縦グラデーションを、
サイズを大きくして指で押しやすく。
やらなかったけどシャドウもいける。詳しくはこちら。
背景画像系（サイトロゴ、見出し、リストマーク）を大きいサイズのものに置き換える。
スマホで見ると思った以上に小さくなっちゃうのでこれも倍に。
写真サムネのタイルの表示数を変える。
ここはCSS3の出番で、擬似クラスnth-child(n+13)という書き方をするとliの上から13個目から適用ということができるので、これを使ってスマホ用はサムネの数を半分の12個にした。これでスマホの小さい画面でもサムネが埋め尽くさずにすっきり。
詳しくはこちらとかこちら。
【課題、というか未処理】
- リスト系の表示をどうにかしたい
- 月別アーカイブのプルダウンをどうにかしたい
- タグクラウド・・・要るか？
- 画像をクリックした時のLiteboxがサイズでかすぎてどうしようもない。
落ち着いたら茜の間もやろっと。
ちなみにPC版への表示切替はできないぜぇ
Androidは検証はおろか見てすらいないぜぇ
IE6なんてものは知らないんだぜぇ
ワイルドだろぉ
コメント