wanichanの日記

ちょっとした技術メモ。Microsoft中心。Webサイト管理等にまつわるネタ、サイトの更新情報等を発信中。最終版はwanichan.comに掲載していきます。

スマホ対応サイト構築中

現在、wanichan.net で wanichan.com のスマホ対応サイトを構築中です。

本当は、wanichan.com サイトをレスポンシブWebデザインにしたかったんですが、いろいろと面倒なことになって、絶対に躓くと思うんで、どさくさに紛れて取得した wanichan.netをスマホ対応サイトにしようというわけです。

すでに完成したコンテンツをスマホ対応作業。基本的にディレクトリー構造はそのままの方がいいですね。

んで、別に作る、ということは、そのものが重複コンテンツとしてみなされるので存在自体不利になるんじゃないかと心配になって、Googleプラスのコミュニティに質問したりなんかすると、すでにリソースあったんですね。

wanichan.net におけるスマホ対応サイト作成のポイント

  • スワイプして拡大を許可する
  • 本家のURLを<link rel="canonical">で指定する
  • 画像サイズを最大横幅100%、高さは自動で。

スワイプして拡大したほうがいろいろと使いやすいですよね。なんか拡大を禁止してるスマホ対応サイトって結構あったりするんですけど。

そんなわけで、こういう感じでmetaタグ記述してます。

<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" name="viewport">

rel=canonicalタグはどうやら<head>と</head>タグのできるだけ上位に記述するといいらしいです。しかし、私はExpression Web 4でダイナミックWebテンプレートを利用しているので、ページタイトルの文字化けを防ぐために、<head>の後にエンコード指定してからその次の行に入れるようにしてます。

<head>
<meta charset="utf-8">
<!-- #BeginEditable "doctitle" -->
<link rel="canonical" href="http://www.wanichan.com/(以下略)">
<title>タイトル</title>
<meta content="ページの説明" name="description" />
<!-- #EndEditable -->
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" name="viewport">

そのうちに、wanichan.comサイトそのものをレスポンシブWebデザインにリニューアルしたいですね。

最後に、画像サイズなんですけど、画面サイズに合わせて拡大/縮小したいので、CSSで

img{max-width:100%;height:auto;}

これでたいてい対応できますね!