何となく面倒なんだろうなと思い込んでいたが、この記事とかこの記事とかを読むと css をいじるだけでほぼ済むらしい。自分の論文公開用 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
これでサイトのリフォーム作業はあらかた終了。コンテンツはおいおい更新していくこととして、新年度に間に合って、まずはめでたしめでたし。リフォーム備忘録もこれにていったん打ち切り。