サイト改装覚書-4

　今回は作業内容ではなくスマホ対応、いわゆるレスポンシブデザインについての覚書です。
　自分は素人なので、詳細なタグとかは書きません。サイトのリンクから参考サイトへ飛んでもらえればと思います。
　基本作業は

・サイトの構造を把握しておく。
・PC用、スマホ用（余裕があるならタブレット用も）のcssを用意する。
・参考サイトのタグをヘッダにコピペする。

　です。一番手間なのはcssをスマホ用に調整することでした。

　先の覚書でも書いたように、私のサイトは元々1カラムだったので調整は簡単でした。
　回り込みも上部のメニュー以外では使っていないので、htmlについてはあまりいじっていません。ヘッダへのコピペ以外は、タイトル画像を足したり、リンクまわりのタグを少々整えたりくらいです。

　ほとんどの作業はcssまわりの修正と調整です。
　PCの画面とスマホの画面では見やすい文字サイズや行間が違うので修正をくりかえしました。
　現在使用しているcssはstyle、smart、bookstyle、booksmart、mailstyle、mailsmartの6種類です。mail～はメールフォーム用なので実質4枚です。
　トップと同じデザインのページと小説ページは微妙に文字のレイアウトが違います。

　この方法ではウインドウサイズで判断させるので、縮小すればある程度はPCでも確認できます。
　　
　最近はレスポンシブデザインを最初から提供しているレンタルサーバーもありますが、古いレンタルサーバーでもjavascriptに疎くても、手間さえかければそれなりのものが出来ます。
　レッツトライ。