MTOSサイトで携帯対応まとめ(1)~構成を決める

MTOSでサイトを作り始めて約5カ月。

あれこれ試行錯誤しながら3カ月ほどでPC版をほぼ完成し、その後携帯版に取りかかるまでしばらくかかり、ここ1ヶ月くらいでぼちぼちエンジンがかかってきて、ようやく公開にこぎつけるところまでやってきました。

携帯版に関しては、ドコモとアメブロに少々振り回されました。

この間、いろいろつまづいたり発見したりがあったので、覚え書きとして書いておこうと思います。(あくまでも私の場合です。もっと良い方法があったらぜひ教えてください。)

PC版をすべて一旦完成させたところで、まず携帯版をどういう形で作るかを考えました。

現在はもう携帯と言えばスマホが主流ですが、まだまだガラケーも切り捨てるには早い状態です。特に、該当サイトにやってくる人はガラケーが多そうです。

スマホならPC版を見ることができるので、いずれ専用ページを作るとしても、まだ後回しでも大丈夫。やはり問題はガラケーです。

画面も狭いしCSSの対応もまちまち。PC版のHTMLはそのままではとても使えません。

という訳で、ガラケー対応のテンプレートを一通り作り、できれば自動的に誘導できる形にしようと思いました。

基本的に、現在のURLの下に「m」フォルダを作り、そこに生成する。(http://website/m)

でも、今回のサイトは複数ブログを使っており、サイトの下にあるブログの場合、「http://website/blog」となっているので、このwebsiteとblogの間に「m」を挟むのは難しくなります。

なので、ここは割り切って、ブログの方は、ブログの中でさらに「m」のフォルダを作り、「http://website/blog/m」の形で携帯サイトを生成し、それぞれをリンクでつなぐことにしました。

とりあえず、構成は決まりました。

簡単ですが、図を作ってみました。(あまりにもやっつけなので、後で差し替えるかもしれません…)

m-sitemap

この薄いピンクの部分が携帯用部分で、濃いピンクの四角で囲った「m」がそれぞれのトップページ、「m-TOP」が携帯サイト全体のトップページになります。(wpは「ウェブページ」です。)

各ブログへのトップページには、全体のトップページからメニューを作ってリンクします。

次は、各キャリア対応ですが、長くなりましたのでそれは次回。

ブログランキング・にほんブログ村へ
にほんブログ村

Twitt
  1. コメントはまだありません。

  1. トラックバックはまだありません。