小説用につくったページを、スマートフォンから見たときは、スマートフォン用のｃｓｓで表示するやり方。
これだとスマートフォン専用のサイトを作らずにすむので、超便利です。
１ ｐｃ用に作ったページに、以下のおまじないをくっつけます。
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
<link media="only screen and (max-device-width:480px)" href="smart.css" type="text/css" rel="stylesheet" />
<link media="screen and (min-device-width:481px)" href="style.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<link href="style.css" type="text/css" rel="stylesheet" />
<![endif]-->
これで、画面の横幅が４８０以上のときはｐｃ用のスタイルシートstyle.cssが適用されて、それ以下のスマホサイズのときはスマホ用のスタイルシートsmart.cssが適用されるようになります。
幅は固定じゃなくて％表示で。
これだけ！マジでこれだけなので！いっそスマホ用のｃｓｓなんかなくても動きます。
スマホで見て、すごくちっさくなって見えるサイトさんが多いので、ぜひ導入してみてください。
あと、画像は３２０以下、なるべく３００ぐらいに横幅を抑えるのがみそです。
じゃないと、スマホで見たとき、横にびろーんって表示が滑りますので。
あとは小説サイトに特有のもくじをどう表現したモノか、今は試行錯誤中です。
もくじの数字リンクが１００個ぐらい並んだページって、ｐｃならありだけど・・・スマホだとどうかな、と思って。
リストでタイル状に数字をならべるしかないのかな、と思ったりもします。むずかしい。
2014/11 追記
けっこう未だにアクセスがある記事のようですので、ついでに作ってたスマホ小説用テンプレートのリンクも貼り付けておきます。
２年もまえのですけど、よろしければorz
http://homepage1.nifty.com/yuri_world/lovenovel/smarttemp/index.html
