何となく面倒なんだろうなと思い込んでいたが、この記事とかこの記事とかを読むと css をいじるだけでほぼ済むらしい。自分の論文公開用 html ページはさほど複雑なこともしていないし、案外簡単にモバイル対応にできるかも。と思ってもう少し調べてみると、こういう大変すばらしいページが。
Webサイト(HTML)をスマートフォンに対応させる方法について説明したページです。本格的にレスポンシブウェブデザインに対応するのは難しいかもしれませんが、できるだけ簡単にスマートフォンに対応するサイトの作り方を説明しています。
<head>部に下の１文を入れ込むだけで、文字がモバイルでもそれ用の大きさで表示される。これだけでもう半分以上やりたいことは済んだ。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
あとはページ幅をモバイル用にするくらいでよい。それに関してはモバイル用の css を作って次のように書く。本文部分は #main という id を設定してあるので、それを使って若干左右に余白を設けた。
body {
width: auto;
-webkit-text-size-adjust: 100%;
}
#main{
padding: 0 4%;
}
PC よりスマホの方が処理速度も通信速度も遅いことを考慮するなら、スマホでは css をひとつだけ読ませて、PC の方で追加の css を読ませるようにしたほうがベター。ということなので、そういう読み込ませ方にしておく（ html の<head>部に入れる）。
<link rel="stylesheet" href="../mobile.css" type="text/css"> <link rel="stylesheet" href="../pc.css" type="text/css" media="screen and (min-width:740px)">
なので、基本的なスタイル設定はモバイル用の mobile.css に書いておいて、pc.css にはモバイルと表示を変えたいところだけ書きこむ。ここの body のスタイルに “margin: 0 auto” を入れておかないと、ページがセンタリングされない（左寄せになる）。
body {
width: 740px;
margin: 0 auto;
}
#main{
padding: 0 55px;
}
モバイル表示の確認用にも便利なサイトがある。ありがたい時代だ。
The Responsinator is designed to test responsive websites on different device resolutions
これでサイトのリフォーム作業はあらかた終了。コンテンツはおいおい更新していくこととして、新年度に間に合って、まずはめでたしめでたし。リフォーム備忘録もこれにていったん打ち切り。