自力でレスポンシブWEBデザインに変更する方法

iPhoneやAndroidのスマホが爆発的に普及して、スマホからのアクセスが急増しているにもかかわらず、旧式のウェブデザインのまま。なんとかしたい。でもどうやてって？

このサイトも例外ではないんです。HTMLやCSSはある程度わかりますが、長年離れているので、その辺の情報検索しても難しい解説しか出てこなくて途方に暮れていました。

でも、普段、自分がスマホを多用するのに、自分のサイトは見難い。 ついに、Googleの検索結果に「このサイトはスマホ対応ではありません。モバイルフレンドリーにしなさい」とダメ出しをくらったのをきっかけに、 レスポンシブWEBデザインを心に決めました。

※楽天退店組、法人の通販参入や切り替え向けシステム 　まじめに生き残りを考えている企業向けの通販システム（※個人事業主、副業は不向き）

もっとも簡単な方法を発見

とは言うものの、いろんな仕事をやっている関係で、この趣味サイトに取れる時間はたかが知れています。そこで調べに調べて、思いつきました。

それは、「レスポンシブWEBデザインのテンプレートを使う」という方法です。旧デザインに近いテンプレートを取ってきて、後は中身の移行です。ひたすら手作業なので、再編集も加えながら1時間あたり3ページから4ページの変更作業です。（けっこうしんどい・・・）

と言っても、ここを書いているときは、まだ作業は完了していません。1日10ページを目標に、2週間作業を続ければ140ページの移行が終了します。サイト全体で何ページあるか把握していませんが、140ページも変更できれば、ほぼ完成という感覚があったので、それを目標にしました。

仕組みは簡単

HTMLやCSSをかじったことがある人は、わりとスムーズに移行できると思います。テンプレートはHTMLのページの用のファイルとCSSファイルと、あとスマホ時のプルダウンメニューを動かすためのJavascript程度のセットです。

このページのソースを見てもらえばわかりますが、ソースはシンプルです。Hタグなんかも<h2>～</h2>など、style=""とかもついていません。デザイン、レイアウトはすべてCSSで操作します。

CSSの中身は、3つにわかれています。（１）パソコン用、（２）スマホ用、（3）タブレット用です。スマホはスマホでスタイルシートが必要かというとそうではなく、スマホ用に変更するような箇所だけです。

例えば、画像です。パソコン用に表示させた画像をそのままスマホで表示させると、画面の半分にしか表示されなかったりします。 そこで、スマホ表示の際は「.resize {width:100%;}」を指定してやれば、横幅いっぱいに表示してくれます。画像には予め「<p class="resize"><img src=""></p>」というふうにタグを組み込んでおきます。

というか、テンプレート側で必要な変換用のCSSは組まれているので、ほとんどすることはなく、好みのデザインにちょこっとカスタマイズする程度です。自分が取ってきたテンプレートには、この設定がなかったので、自分で挿入しておきました。

その他のやり方

サイトまるごとCMS化という方法もありますが、問題は、URLが一致させられるかどうかという点です。そこさえ、うまく行けばWordpressで完全に書き換えてしまっても、コンテンツは同じなので問題ないと思います。

当サイトは.htmlではなく、.shtmlという形式をとっていたり、ディレクトリの構造もやや複雑になっていたので、WordpressでのレスポンシブWBデザイン化は諦めました。

また、ランサーズなどを使ってコーディング丸投げも考えましたが、「趣味サイトに何十万も使うのもどうか。」というもあったし、「そもそも、ランサーとの打ち合わせに使う時間を考えると、それなら自分でやったほうが良い」という結論にいたしました。

話が長くなりましたが、難しいことに首を突っ込まず、もっとも簡単なテプンレート式が一番オススメという話でした。